/* =========================================================
   Fundação visual da plataforma (alinhada à home hermelo.com.br)
   =========================================================

   Uma cor de marca, o verde Hermelo, marca ação principal, navegação atual
   e tudo que é recorrência. O resto é tinta sobre papel. --ok / --wait /
   --bad continuam reservadas para estado operacional verdadeiro.
   ========================================================= */

@font-face {
  font-family: Manrope;
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
}

:root {
  /* Hoje do Master (28/10/2026): borda dos cartões, fundo e borda do carrossel de avisos */
  --card-rule: var(--rule); --car-bg: #123E40; --car-rule: transparent; --dot-off: rgba(245,241,232,.55);
  /* --- superfícies --- */
  --paper:      #F3F4EF;   /* fundo da aplicação */
  --surface:    #FCFCF9;   /* cartões, painéis */
  --surface-2:  #E9ECE4;   /* faixas internas, trilhos, campos rebaixados */
  --skel: #E9ECE4; --skel-2: #E2E6DD; --skel-big: #E9ECE4;   /* esqueletos de carregamento (no escuro, mais claros que o cartão para aparecer) */

  /* --- tinta --- */
  --ink:        #0F1D17;
  --ink-2:      #33423A;
  --ink-mute:   #5B6961;
  --rule:       #D3D9CF;
  --rule-soft:  #E2E6DD;
  --rule-strong: #76847B;   /* só controles: campos, cartões de escolha, botões vazados */

  /* --- marca --- */
  --brand:      #123E40;   /* ação principal, navegação atual, recorrência */
  --brand-ink:  #F5F1E8;   /* texto sobre --brand */
  --brand-soft: #DCEAE8;   /* fundo de destaque suave */
  --brand-text: #123E40;   /* texto da marca sobre papel */
  --brand-deep: #123E40;   /* bloco de destaque escuro */
  --btn-fill:   var(--brand);      /* preenchimento dos botões primários (no escuro, um tom mais firme que o da marca) */
  --btn-ink:    var(--brand-ink);

  /* --- semântica (estado operacional) --- */
  --ok:    #1F6B45;  --ok-bg:   #E3EFE6;
  --wait:  #855408;  --wait-bg: #F6ECD8;
  --attn:  #B54708;  --attn-bg: #FCE8D8;
  --bad:   #A33A2B;  --bad-bg:  #F7E6E2;

  /* --- tipografia --- */
  --font-display: Manrope, 'Segoe UI', system-ui, sans-serif;
  --font-ui: Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* --- forma: controles 10px, painéis 16px, pílulas em botões --- */
  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;
  --rail-w:    232px;

  /* --- espaçamento: escala única (28/10/2026). Título de seção → cartão 12 (--sp-3); entre seções 24 (--sp-5);
         entre cartões irmãos 12 (--sp-3); padding interno de cartão 16 (--sp-4). Sem margem negativa para compensar outra. --- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  --shadow:    0 1px 2px rgba(15, 29, 23, .05);
  --shadow-lg: 0 24px 48px -20px rgba(15, 29, 23, .28), 0 8px 16px -10px rgba(15, 29, 23, .18);
}

/* Componentes de formulário definem `display` explicitamente; sem esta regra
   o atributo semântico hidden podia perder para `.form-group { display:flex }`
   e exibir campos que não se aplicavam ao papel escolhido. */
[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --card-rule: #566A5D; --car-bg: #1A5654; --car-rule: #4F9A98; --dot-off: rgba(245,241,232,.62);
    --paper:     #0D110F;
    --surface:   #151B17;
    --surface-2: #1B231E;
    --ink:       #EEF2EC;
    --ink-2:     #C9D3CB;
    --ink-mute:  #9AA89F;
    --rule:      #2A352E;
    --rule-soft: #212A24;
    --rule-strong: #68796E;   /* só controles: campos, cartões de escolha, botões vazados */
    --skel: #434F47; --skel-2: #4F5D54; --skel-big: #2B362F;
    --btn-fill: #8FC9C0; --btn-ink: #0D2729;
    --brand:      #A9D9D2;
    --brand-ink:  #0D2729;
    --brand-soft: #203A3B;
    --brand-text: #A9D9D2;
    --brand-deep: #123E40;
    --ok:   #6CC393;  --ok-bg:   #15281D;
    --wait: #E0B25A;  --wait-bg: #2A2215;
    --attn: #F5A060;  --attn-bg: #33200F;
    --bad:  #E88A76;  --bad-bg:  #2E1B17;
    --shadow:    0 1px 2px rgba(0, 0, 0, .3);
    --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .7), 0 8px 16px -10px rgba(0, 0, 0, .5);
  }
}

:root[data-theme="dark"] {
  --card-rule: #566A5D; --car-bg: #1A5654; --car-rule: #4F9A98; --dot-off: rgba(245,241,232,.62);
  --paper:     #0D110F;
  --surface:   #151B17;
  --surface-2: #1B231E;
  --ink:       #EEF2EC;
  --ink-2:     #C9D3CB;
  --ink-mute:  #9AA89F;
  --rule:      #2A352E;
  --rule-soft: #212A24;
  --rule-strong: #68796E;   /* só controles: campos, cartões de escolha, botões vazados */
  --skel: #434F47; --skel-2: #4F5D54; --skel-big: #2B362F;
  --btn-fill: #8FC9C0; --btn-ink: #0D2729;
  --brand:      #A9D9D2;
  --brand-ink:  #0D2729;
  --brand-soft: #203A3B;
  --brand-text: #A9D9D2;
  --brand-deep: #123E40;
  --ok:   #6CC393;  --ok-bg:   #15281D;
  --wait: #E0B25A;  --wait-bg: #2A2215;
  --attn: #F5A060;  --attn-bg: #33200F;
  --bad:  #E88A76;  --bad-bg:  #2E1B17;
  --shadow:    0 1px 2px rgba(0, 0, 0, .3);
  --shadow-lg: 0 24px 48px -20px rgba(0, 0, 0, .7), 0 8px 16px -10px rgba(0, 0, 0, .5);
}

:root[data-theme="light"] {
  --card-rule: var(--rule); --car-bg: #123E40; --car-rule: transparent; --dot-off: rgba(245,241,232,.55);
  --paper:     #F3F4EF;
  --surface:   #FCFCF9;
  --surface-2: #E9ECE4;
  --ink:       #0F1D17;
  --ink-2:     #33423A;
  --ink-mute:  #5B6961;
  --rule:      #D3D9CF;
  --rule-soft: #E2E6DD;
  --rule-strong: #76847B;   /* só controles: campos, cartões de escolha, botões vazados */
  --brand:      #123E40;
  --brand-ink:  #F5F1E8;
  --brand-soft: #DCEAE8;
  --brand-text: #123E40;
  --brand-deep: #123E40;
  --ok:   #1F6B45;  --ok-bg:   #E3EFE6;
  --wait: #855408;  --wait-bg: #F6ECD8;
  --attn: #B54708;  --attn-bg: #FCE8D8;
  --bad:  #A33A2B;  --bad-bg:  #F7E6E2;
  --shadow:    0 1px 2px rgba(15, 29, 23, .05);
  --shadow-lg: 0 24px 48px -20px rgba(15, 29, 23, .28), 0 8px 16px -10px rgba(15, 29, 23, .18);
}

/* =========================================================
   Compatibilidade com as telas ainda não migradas
   =========================================================
   As páginas antigas (clientes, serviços, agenda, comandas…) referenciam
   nomes de variável do sistema anterior. Mapear em vez de reescrever tudo
   de uma vez faz elas herdarem a paleta nova imediatamente, e a migração
   fina de cada tela acontece uma por vez sem nada quebrado no meio.
   Remover este bloco quando a última página estiver migrada. */
:root {
  --font: var(--font-ui);
  --primary: var(--brand);
  --primary-dark: var(--brand);
  --primary-light: var(--brand-soft);
  --success: var(--ok);       --success-light: var(--ok-bg);
  --warning: var(--wait);     --warning-light: var(--wait-bg);
  --danger: var(--bad);       --danger-light: var(--bad-bg);
  --info: var(--ink-2);       --info-light: var(--rule-soft);
  --cyan: var(--ok);          --cyan-light: var(--ok-bg);

  --bg: var(--paper);
  --bg-secondary: var(--surface);
  --bg-card: var(--surface);
  --bg-card-hover: var(--surface-2);
  --bg-input: var(--surface);
  --bg-elevated: var(--surface);

  --text: var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted: var(--ink-mute);

  --border: var(--rule);
  --border-light: var(--rule-soft);

  --radius-full: 9999px;
  --radius-lg: var(--radius);
  --shadow-sm: var(--shadow);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent);
  --sidebar-width: var(--rail-w);
  --accent: var(--brand);
  --surface-raised: var(--surface);

  --mb-ink: var(--ink);
  --mb-text: var(--ink);
  --mb-text-soft: var(--ink-mute);
  --mb-surface: var(--surface);
  --mb-surface-2: var(--paper);
  --mb-border: var(--rule);
  --mb-primary: var(--brand);
  --mb-primary-deep: var(--brand);
  --mb-primary-soft: var(--brand-soft);
  --mb-success: var(--ok);
  --mb-warning: var(--wait);
  --mb-danger: var(--bad);
  --mb-grad: var(--ink);
  --mb-radius: var(--radius);
  --mb-radius-sm: var(--radius-sm);
  --mb-shadow: var(--shadow-lg);
  --mb-shadow-sm: var(--shadow);
  --mb-font: var(--font-ui);

  /* O conjunto --ui-* precisa estar COMPLETO. Faltavam nove destes nomes e a
     falta não aparece como erro: `background: var(--ui-surface-raised)` com a
     variável indefinida vira transparente, e o menu de categorias da tela de
     Serviços passou a flutuar sem fundo por cima do formulário. Ao criar um
     apelido novo aqui, criar a família inteira. */
  --ui-surface: var(--surface);
  --ui-surface-raised: var(--surface);   /* menus e popovers: acima do cartão */
  --ui-canvas: var(--paper);
  --ui-field: var(--surface);
  --ui-border: var(--rule);
  --ui-border-soft: var(--rule-soft);
  --ui-text: var(--ink);
  --ui-text-strong: var(--ink);
  --ui-text-soft: var(--ink-2);
  --ui-text-faint: var(--ink-mute);
  --ui-primary: var(--brand);
  --ui-primary-hover: color-mix(in srgb, var(--brand) 86%, var(--ink));
  --ui-primary-soft: var(--brand-soft);
  --ui-danger: var(--bad);
  --ui-success: var(--ok);
  --ui-warning: var(--wait);
  --ui-shadow-card: var(--shadow);
  --ui-shadow-float: var(--shadow-lg);
}

/* =========================================================
   Variáveis de telas (E3-03: todas as definições de :root ficam aqui).
   ========================================================= */
/* Cadastros (Equipe e Serviços) — vinha de catalog.css */
:root {
  --cat-neutral-50: hsl(45 20% 98%);
  --cat-neutral-100: hsl(45 16% 96%);
  --cat-neutral-200: hsl(42 12% 90%);
  --cat-neutral-300: hsl(40 9% 82%);
  --cat-neutral-400: hsl(40 6% 61%);
  --cat-neutral-500: hsl(40 5% 47%);
  --cat-neutral-600: hsl(40 6% 38%);
  --cat-neutral-700: hsl(40 7% 28%);
  --cat-neutral-800: hsl(40 7% 17%);
  --cat-neutral-900: hsl(40 7% 12%);
  --cat-green-100: hsl(160 28% 93%);
  --cat-green-200: hsl(160 30% 85%);
  --cat-green-300: hsl(161 32% 72%);
  --cat-green-400: hsl(163 34% 60%);
  --cat-green-500: hsl(165 39% 31%);
  --cat-green-600: hsl(165 42% 26%);
  --cat-green-700: hsl(164 43% 21%);
  --cat-green-800: hsl(163 40% 16%);
  --cat-green-900: hsl(162 38% 12%);
  --cat-bg: var(--cat-neutral-100);
  --cat-surface: var(--cat-neutral-50);
  --cat-subtle: var(--cat-neutral-200);
  --cat-border: var(--cat-neutral-300);
  --cat-control: var(--cat-neutral-500);
  --cat-text: var(--cat-neutral-900);
  --cat-muted: var(--cat-neutral-600);
  --cat-action: var(--cat-green-600);
  --cat-action-text: var(--cat-neutral-50);
  --cat-tint: var(--cat-green-100);
  --cat-accent: var(--cat-green-700);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cat-bg: var(--cat-neutral-900); --cat-surface: var(--cat-neutral-800);
    --cat-subtle: var(--cat-neutral-700); --cat-border: var(--cat-neutral-700);
    --cat-control: var(--cat-neutral-400); --cat-text: var(--cat-neutral-100);
    --cat-muted: var(--cat-neutral-300); --cat-action: var(--cat-green-300);
    --cat-action-text: var(--cat-green-900); --cat-tint: var(--cat-green-900);
    --cat-accent: var(--cat-green-200);
  }
}
:root[data-theme="dark"] {
  --cat-bg: var(--cat-neutral-900); --cat-surface: var(--cat-neutral-800);
  --cat-subtle: var(--cat-neutral-700); --cat-border: var(--cat-neutral-700);
  --cat-control: var(--cat-neutral-400); --cat-text: var(--cat-neutral-100);
  --cat-muted: var(--cat-neutral-300); --cat-action: var(--cat-green-300);
  --cat-action-text: var(--cat-green-900); --cat-tint: var(--cat-green-900);
  --cat-accent: var(--cat-green-200);
}
/* Navegação — vinha de navigation.css */
:root { --rail-w: 256px; }
/* Recorrência — vinha de recurrences.css */
:root[data-theme="dark"] { --rec-attention-ink:#f5cc80;--rec-attention-bg:#49391f; }
@media(prefers-color-scheme:dark) { :root:not([data-theme="light"]) { --rec-attention-ink:#f5cc80;--rec-attention-bg:#49391f; } }
/* Agenda — vinha de calendar.css */
:root { --cal-warning-text:hsl(25 70% 32%);--cal-warning-bg:hsl(36 85% 94%); }
:root[data-theme=dark] { --cal-warning-text:hsl(36 80% 75%);--cal-warning-bg:hsl(30 40% 18%); }
@media(prefers-color-scheme:dark) { :root:not([data-theme=light]) { --cal-warning-text:hsl(36 80% 75%);--cal-warning-bg:hsl(30 40% 18%); } }