/*
 * TricoClinic - Tema v2 (tokens e primitivas)
 *
 * Extraído dos protótipos em docs/tema-v2/prototipos/. É um PONTO DE PARTIDA:
 *  - a seção 1 reaproveita os NOMES de variável do assets/css/core.css, então o
 *    CSS que já existe passa a herdar o visual novo sem ser reescrito;
 *  - a seção 2 acrescenta tokens novos (gradientes, vidro, aurora);
 *  - a seção 3 traz as primitivas novas (.tc-*), usadas onde ainda não há
 *    componente equivalente (campo de busca rápida, modal com trilho, barra
 *    inferior mobile).
 *
 * Carregar DEPOIS de core.css. Sem etapa de build.
 * Cores da marca (não mudam): #44bfe1 azul, #ddde40 limão, #244356 azul escuro, #2b2a3a roxo escuro.
 * Tema escuro: ligado por html[data-theme="dark"] ou, sem escolha explícita, pelo sistema.
 */

/* ===== 1. Tokens que já existem no core.css (mesmos nomes) ===== */
:root {
    --bg-app: #eef3f7;
    --card-bg: rgba(255, 255, 255, 0.78);
    --sidebar-bg: rgba(255, 255, 255, 0.78);
    --header-bg: transparent;
    --border-light: rgba(36, 67, 86, 0.10);
    --border-medium: rgba(36, 67, 86, 0.18);
    --text-primary: #16222b;
    --text-secondary: #5a6b78;
    --text-muted: #7a8b98;
    --primary-light: #e4f6fb;
    --accent-light: #f6f6c9;

    --radius-md: 14px;
    --radius-lg: 22px;
    --radius-xl: 28px;

    --shadow-sm: 0 1px 2px rgba(36, 67, 86, .05), 0 10px 30px -12px rgba(36, 67, 86, .18);
    --shadow-lg: 0 2px 4px rgba(36, 67, 86, .06), 0 22px 44px -14px rgba(36, 67, 86, .28);

    --sidebar-width: 236px;
    --sidebar-collapsed: 80px;
}

/* ===== 2. Tokens novos ===== */
:root {
    --tc-primary-strong: #1f93b6;           /* azul para texto e links sobre fundo claro */
    --tc-surface-solid: #ffffff;            /* modais, popovers, campos */
    --tc-field: rgba(255, 255, 255, .9);
    --tc-overlay: rgba(16, 30, 40, .42);
    --tc-grid: rgba(36, 67, 86, .12);       /* linhas de grade de gráficos */

    /* gradientes da marca */
    --tc-grad-brand: linear-gradient(100deg, #ddde40, #b9e46a 45%, #44bfe1);
    --tc-grad-hero: linear-gradient(130deg, #44bfe1, #7fd6c9 55%, #ddde40);
    --tc-hero-ink: #0f2a35;
    --tc-on-grad: #10303c;                  /* texto sobre gradiente claro */

    /* fundo "aurora" (manchas de cor desfocadas atrás do conteúdo) */
    --tc-aurora-1: rgba(68, 191, 225, .30);
    --tc-aurora-2: rgba(221, 222, 64, .26);

    /* estados */
    --tc-ok-soft: #d9f5ea;  --tc-ok-ink: #0b8a63;
    --tc-bad-soft: #fde0e0; --tc-bad-ink: #c63030;
    --tc-warn-soft: #fdeccb; --tc-warn-ink: #9a5b00;
    --tc-pend-ink: #7a7a10;

    /* eventos da agenda, por especialista */
    --tc-e1-bg: #d9f2fa; --tc-e1-bar: #44bfe1; --tc-e1-ink: #0f4a5e;
    --tc-e2-bg: #f3f4bd; --tc-e2-bar: #c3c42a; --tc-e2-ink: #55560a;
    --tc-e3-bg: #d5e0e8; --tc-e3-bar: #244356; --tc-e3-ink: #1a3242;

    --tc-font-display: 'Plus Jakarta Sans', system-ui, sans-serif;
    --tc-font-body: 'DM Sans', system-ui, sans-serif;
}

/* Tema escuro: os mesmos tokens, valores escuros. Duplicado de propósito
   (o seletor de media não pode ser reaproveitado pelo [data-theme]). */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-app: #12171d; --card-bg: rgba(30, 40, 50, .72); --sidebar-bg: rgba(30, 40, 50, .72);
        --border-light: rgba(255, 255, 255, .10); --border-medium: rgba(255, 255, 255, .18);
        --text-primary: #eaf2f6; --text-secondary: #a3b4c0; --text-muted: #8296a6;
        --primary-light: rgba(68, 191, 225, .16); --accent-light: rgba(221, 222, 64, .16);
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .5);
        --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 44px -14px rgba(0, 0, 0, .65);
        --tc-surface-solid: #1b252e; --tc-field: rgba(255, 255, 255, .06); --tc-overlay: rgba(0, 0, 0, .6); --tc-grid: rgba(255, 255, 255, .10);
        --tc-grad-hero: linear-gradient(130deg, #1d7f9c, #2a7f86 55%, #7f8a2a); --tc-hero-ink: #f4fbfd;
        --tc-aurora-1: rgba(68, 191, 225, .22); --tc-aurora-2: rgba(221, 222, 64, .10);
        --tc-ok-soft: rgba(16, 185, 129, .18); --tc-ok-ink: #4adeb0; --tc-bad-soft: rgba(239, 68, 68, .20); --tc-bad-ink: #ff8d8d;
        --tc-warn-soft: rgba(245, 158, 11, .2); --tc-warn-ink: #fbbf55; --tc-pend-ink: #e3e56a;
        --tc-e1-bg: rgba(68, 191, 225, .22); --tc-e1-ink: #bfeefb; --tc-e2-bg: rgba(221, 222, 64, .2); --tc-e2-ink: #eef07a;
        --tc-e3-bg: rgba(150, 190, 215, .18); --tc-e3-ink: #cfe3ef; --tc-e3-bar: #8fb6cf;
        color-scheme: dark;
    }
}
:root[data-theme="dark"] {
    --bg-app: #12171d; --card-bg: rgba(30, 40, 50, .72); --sidebar-bg: rgba(30, 40, 50, .72);
    --border-light: rgba(255, 255, 255, .10); --border-medium: rgba(255, 255, 255, .18);
    --text-primary: #eaf2f6; --text-secondary: #a3b4c0; --text-muted: #8296a6;
    --primary-light: rgba(68, 191, 225, .16); --accent-light: rgba(221, 222, 64, .16);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -12px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 22px 44px -14px rgba(0, 0, 0, .65);
    --tc-surface-solid: #1b252e; --tc-field: rgba(255, 255, 255, .06); --tc-overlay: rgba(0, 0, 0, .6); --tc-grid: rgba(255, 255, 255, .10);
    --tc-grad-hero: linear-gradient(130deg, #1d7f9c, #2a7f86 55%, #7f8a2a); --tc-hero-ink: #f4fbfd;
    --tc-aurora-1: rgba(68, 191, 225, .22); --tc-aurora-2: rgba(221, 222, 64, .10);
    --tc-ok-soft: rgba(16, 185, 129, .18); --tc-ok-ink: #4adeb0; --tc-bad-soft: rgba(239, 68, 68, .20); --tc-bad-ink: #ff8d8d;
    --tc-warn-soft: rgba(245, 158, 11, .2); --tc-warn-ink: #fbbf55; --tc-pend-ink: #e3e56a;
    --tc-e1-bg: rgba(68, 191, 225, .22); --tc-e1-ink: #bfeefb; --tc-e2-bg: rgba(221, 222, 64, .2); --tc-e2-ink: #eef07a;
    --tc-e3-bg: rgba(150, 190, 215, .18); --tc-e3-ink: #cfe3ef; --tc-e3-bar: #8fb6cf;
    color-scheme: dark;
}

/* ===== 3. Primitivas novas ===== */

/* Fundo aurora: aplicar a classe no <body> */
.tc-aurora { position: relative; overflow-x: hidden; }
.tc-aurora::before, .tc-aurora::after {
    content: ""; position: fixed; z-index: 0; border-radius: 50%; filter: blur(70px); pointer-events: none;
}
.tc-aurora::before { width: 520px; height: 520px; left: -120px; top: -140px; background: var(--tc-aurora-1); animation: tc-drift 22s ease-in-out infinite alternate; }
.tc-aurora::after  { width: 480px; height: 480px; right: -140px; bottom: -120px; background: var(--tc-aurora-2); animation: tc-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes tc-drift { to { transform: translate(90px, 60px) scale(1.12); } }

/* Card em vidro + entrada suave */
.tc-glass {
    background: var(--card-bg); backdrop-filter: blur(16px);
    border: 1px solid var(--border-light); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); padding: 18px;
}
.tc-rise { animation: tc-rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes tc-rise { from { opacity: 0; transform: translateY(14px); } }
.tc-hover { transition: transform .3s, box-shadow .3s; }
.tc-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* Card de destaque com gradiente */
.tc-hero {
    background: var(--tc-grad-hero); background-size: 180% 180%; color: var(--tc-hero-ink);
    border-color: transparent; animation: tc-flow 9s ease-in-out infinite alternate;
}
@keyframes tc-flow { to { background-position: 100% 100%; } }

/* Botão principal com gradiente da marca */
.tc-btn-primary {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 99px;
    padding: 10px 18px; font-weight: 600; color: var(--tc-on-grad); background: var(--tc-grad-brand);
    box-shadow: 0 10px 22px -12px rgba(68, 191, 225, .9); transition: transform .2s;
}
.tc-btn-primary:hover { transform: translateY(-2px); }

/* Pílulas de situação */
.tc-st { display: inline-block; font-size: 11px; font-weight: 600; border-radius: 99px; padding: 3px 10px; white-space: nowrap; }
.tc-st.ok   { background: var(--tc-ok-soft);   color: var(--tc-ok-ink); }
.tc-st.pend { background: var(--accent-light); color: var(--tc-pend-ink); }
.tc-st.warn { background: var(--tc-warn-soft); color: var(--tc-warn-ink); }
.tc-st.bad  { background: var(--tc-bad-soft);  color: var(--tc-bad-ink); }

/* Campo de busca rápida (combobox). JS de referência: prototipos/modal-atendimento.html, função cbInit */
.tc-cb { position: relative; }
.tc-cb input {
    width: 100%; border: 1.5px solid var(--border-light); background: var(--tc-field); color: var(--text-primary);
    border-radius: 13px; padding: 11px 14px 11px 40px; font: inherit; outline: 0;
}
.tc-cb input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(68, 191, 225, .18); }
.tc-cb-list {
    position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 15; max-height: 268px; overflow: auto;
    background: var(--tc-surface-solid); border: 1px solid var(--border-light); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 6px;
}
.tc-cb.up .tc-cb-list { top: auto; bottom: calc(100% + 6px); }
.tc-cb-opt { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; text-align: left; border-radius: 11px; padding: 9px 10px; }
.tc-cb-opt.on, .tc-cb-opt:hover { background: var(--primary-light); }
.tc-cb-opt mark { background: linear-gradient(transparent 55%, var(--accent) 55%); color: inherit; }

/* Modal largo: cabeçalho, trilho de seções, corpo rolável, resumo fixo, rodapé */
.tc-modal-ov { position: fixed; inset: 0; z-index: 1050; background: var(--tc-overlay); backdrop-filter: blur(7px); display: flex; align-items: center; justify-content: center; padding: 16px; }
.tc-modal {
    width: min(1060px, 100%); height: min(790px, calc(100vh - 32px)); background: var(--tc-surface-solid);
    border: 1px solid var(--border-light); border-radius: var(--radius-xl); box-shadow: 0 40px 90px -24px rgba(0, 0, 0, .5);
    display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
}
.tc-modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 24px; border-bottom: 1px solid var(--border-light); background: linear-gradient(110deg, var(--primary-light), var(--accent-light)); }
.tc-modal-body { display: grid; grid-template-columns: 200px minmax(0, 1fr) 290px; min-height: 0; }
.tc-modal-rail { padding: 18px 12px; border-right: 1px solid var(--border-light); overflow: auto; }
.tc-modal-scroll { overflow: auto; padding: 6px 26px 30px; min-width: 0; }
.tc-modal-sum { border-left: 1px solid var(--border-light); padding: 20px; overflow: auto; }
.tc-modal-foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--border-light); }

@media (max-width: 1020px) {
    .tc-modal-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .tc-modal-rail { display: flex; gap: 6px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border-light); padding: 10px 14px; }
    .tc-modal-sum { display: none; }  /* o resumo passa a ser a última seção do corpo */
}
@media (max-width: 700px) {
    .tc-modal-ov { padding: 0; align-items: flex-end; }
    .tc-modal { width: 100%; height: calc(100dvh - 14px); border-radius: 28px 28px 0 0; }
}

/* Barra inferior do mobile (5 slots, o do meio é o botão "+") */
@media (max-width: 900px) {
    .tc-tabbar {
        display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: end; position: fixed; left: 12px; right: 12px;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 1000; max-width: 520px; margin-inline: auto; padding: 8px;
        background: var(--tc-surface-solid); border: 1px solid var(--border-light); border-radius: 26px; box-shadow: var(--shadow-lg);
    }
    .tc-tabbar-fab { width: 56px; height: 56px; border-radius: 50%; margin: -26px 6px 0; border: 0; background: var(--tc-grad-brand); color: var(--tc-on-grad); }
}

@media (prefers-reduced-motion: reduce) {
    .tc-aurora::before, .tc-aurora::after, .tc-rise, .tc-hero { animation: none !important; }
    .tc-hover, .tc-btn-primary { transition: none !important; }
}