/* Padrão AAA (WCAG 2.2). Carregado por último: tokens de cor com 7:1, foco visível, alvos de 44px. */
:root{
  --muted:#494e53;      /* 7.08:1 no paper */
  --coral:#893024;      /* texto e botões: 7.04:1 */
  --coral-accent:#d54b38; /* só barras, bordas e detalhes que não são texto */
  --teal:#1b574d;
  --violet:#56476f;
  --field-border:#7c838a; /* borda de campo: 3.8:1 (componente) */
  --coral-hover:#6e251b;  /* fundo do botão principal no hover: 9.6:1 com texto branco */
  /* Sistema visual: cantos e sombras iguais em todo o app */
  --radius:8px;
  --radius-sm:6px;
  --shadow-sm:0 1px 2px #20252b0d;
  --shadow-md:0 10px 30px #20252b1f;
  /* Faixa de aviso (sem internet ou erro ao salvar): texto 8.98:1 no fundo */
  --warn-bg:#fff4ed;
  --warn-line:#efd3bf;
  --warn-ink:#633a24;
}

/* Foco sempre visível, inclusive em campos */
input,select,textarea{border-color:var(--field-border)}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus{outline:none}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:3px solid var(--teal);outline-offset:4px}
.timer-dock :focus-visible{outline-color:#fff}
.challenge-days button.is-today{outline:0;box-shadow:inset 0 0 0 2px var(--coral-accent)}
html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom));scroll-padding-top:90px}

/* Texto que ficava claro demais */
.nav-caption,.nav-item,.day-tile,.tag.neutral,.challenge-days button,.set-number>span,footer,label,.meal-foods,.banner-content p,.empty strong,.assessment-values,.shopping-food>small,.breadcrumb{color:var(--muted)}
.nav-item.active,.day-tile.active strong{color:var(--coral)}
.btn:hover{background:var(--coral-hover);border-color:var(--coral-hover)}
.btn.danger,.form-error{color:var(--coral)}
/* Botão de perigo é branco com texto vermelho (texto branco aqui o deixava invisível) */
.btn.danger{background:var(--white);color:var(--coral);border-color:var(--coral)}
.btn.danger:hover{background:var(--coral-light);color:var(--coral);border-color:var(--coral)}
::placeholder{color:var(--muted);opacity:1}
.meal-check{border-color:var(--field-border)}.meal-check svg{color:var(--muted)}
.progress span,.challenge .progress span{background:var(--coral-accent)}

/* Alvos de toque de pelo menos 44x44 */
.icon-button,.meal-check,.focus-row button,.timer-dock button,.top-actions .avatar{min-width:44px;min-height:44px}
.btn,.text-button,.segmented button,.agenda-filters button,.shopping-period button,.study-review-filters button,.workout-days button,.load-units button,.app-update-button,.cloud-status,.agenda-days button,.view-tabs button,.nav-item{min-height:44px}
.hit{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:-12px;cursor:pointer}
input[type="checkbox"],input[type="radio"]{width:22px;height:22px;accent-color:var(--teal)}

/* Leitura confortável */
p,.hint,.modal-intro{max-width:80ch}
.sidebar nav{height:auto;min-height:69px}
.topbar{height:auto;min-height:77px}

/* Leitor de tela */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Sem internet: o app fica só leitura (a alteração é desfeita com aviso) */
.is-offline .btn:not(.secondary):not([data-action^="cloud"]){filter:grayscale(.6)}

/* Barra lateral em tela baixa (notebook 1366x768, janela não maximizada): sem isso o bloco de baixo
   ("Constância..." e perfil) era desenhado por cima do último item do menu (Estudos) e roubava o clique. */
@media(min-width:821px){
  .sidebar{overflow-y:auto;overscroll-behavior:contain}
  .sidebar>*{flex-shrink:0}
}
@media(min-width:821px) and (max-height:820px){
  .side-message{display:none}
  .nav-caption{margin:28px 0 10px}
}

/* Link "Ir para o conteúdo": invisível de verdade até receber foco do teclado
   (só empurrar para cima com top:-100px vazava no celular). */
.skip:not(:focus){clip-path:inset(50%);width:1px;height:1px;overflow:hidden;padding:0;white-space:nowrap}
.skip:focus{top:10px;left:10px;border:2px solid var(--teal);border-radius:6px}

/* ---------- Casca do app: ajustes de sistema visual (agente 5) ---------- */
/* Botão só de ícone também precisa de 44px de largura (ex.: "Ajustar metas" no celular, "Alertas") */
.text-button,.view-tabs .alert-tab{min-width:44px}
/* Aviso rápido centralizado conforme a largura do menu lateral */
@media(min-width:821px) and (max-width:1150px){.toast{left:calc(50% + 104px)}}
.auth-locked .toast{left:50%;bottom:24px}
.brand{min-height:44px}
/* Tablet (561 a 820px): o menu lateral mostra o nome curto embaixo do ícone, não só o ícone */
@media(min-width:561px) and (max-width:820px){
  .sidebar{width:92px;padding:20px 8px}
  .workspace{margin-left:92px}
  .sidebar nav{margin-top:26px;gap:6px}
  .sidebar nav .nav-item{flex-direction:column;gap:5px;padding:10px 2px;text-align:center}
  .sidebar nav .nav-item span.nav-short,.sidebar nav .nav-item>span:only-of-type{display:block;font-size:12px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sidebar nav .nav-item .nav-full{display:none}
}
/* Ícone de seta no fim de cada item de lista clicável fica alinhado */
.profile .avatar{width:36px;height:36px}
/* Tela larga (conteúdo limitado a 1550px): topo, faixa de aviso e rodapé alinhados com o conteúdo */
@media(min-width:1791px){.topbar,footer,.cloud-notice{padding-left:calc((100% - 1550px) / 2 + 36px);padding-right:calc((100% - 1550px) / 2 + 36px)}}
/* Notebook baixo: menu da conta mais compacto para caber com menos rolagem */
@media(max-height:700px){.account-item{min-height:52px;padding-block:6px}.account-group{margin:12px 0 6px}.account-card{padding:10px 14px}}

/* Botão desativado não muda de cor com o mouse em cima (não pode parecer clicável) */
.btn:disabled:hover,.btn:disabled:active{background:var(--coral);border-color:var(--coral);transform:none}
.btn.secondary:disabled:hover{background:var(--white);border-color:var(--line)}
.btn.danger:disabled:hover{background:var(--white);border-color:var(--coral)}