/*
  style.css
  Estilos do Dashboard de Plantões.
  Mobile-first: regras base já são para celular; @media adapta para telas maiores.
*/

/* ===== Variáveis de cor (tema claro com toque azul) ===== */
:root {
    --bg:           #f4f6fb;
    --bg-card:      #ffffff;
    --text:         #1f2937;
    --text-muted:   #6b7280;
    --border:       #e5e7eb;
    --primary:      #2563eb;
    --primary-dark: #1d4ed8;
    --success:      #16a34a;
    --warn:         #d97706;
    --danger:       #dc2626;
    --info:         #0284c7;
    --shadow:       0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
    --radius:       12px;
}

/* Modo automático: segue o tema do sistema operacional.
   `:root:not([data-theme="light"])` faz com que, se o user FORÇOU light,
   ignore o sistema; senão (auto ou nada), aplica dark quando o sistema é dark. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg:         #0f172a;
        --bg-card:    #1e293b;
        --text:       #f1f5f9;
        --text-muted: #94a3b8;
        --border:     #334155;
        --shadow:     0 1px 3px rgba(0, 0, 0, 0.4);
    }
}

/* Tema FORÇADO escuro (independente do sistema) — quando user escolheu "Escuro" */
:root[data-theme="dark"] {
    --bg:         #0f172a;
    --bg-card:    #1e293b;
    --text:       #f1f5f9;
    --text-muted: #94a3b8;
    --border:     #334155;
    --shadow:     0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Tema FORÇADO claro: já é o default fora do media query, então não precisa
   sobrescrever variáveis. O seletor `:not([data-theme="light"])` na regra
   acima já desliga o auto-dark do sistema. */

/* ===== Reset básico ===== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    /* Defesa global contra scroll horizontal: se algum elemento filho
       insistir em ultrapassar, fica clipado em vez de quebrar layout.
       Investigue com DevTools se notar conteúdo truncado. */
    overflow-x: hidden;
}
/* Mídia/canvas nunca pode estourar o container pai */
img, canvas, svg, video { max-width: 100%; height: auto; }
/* Tabelas longas devem rolar horizontalmente DENTRO do próprio wrapper,
   não empurrar a página inteira. Use <div class="table-scroll"> ao redor. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
h1, h2, h3 { margin: 0 0 0.5rem; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
code {
    background: var(--border);
    padding: 0.1em 0.3em;
    border-radius: 4px;
    font-size: 0.9em;
}

.muted { color: var(--text-muted); }
.text-success { color: var(--success); }
.text-warn { color: var(--warn); }

/* ===== Layout / container ===== */
.container {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1rem;
}

main.container {
    flex: 1;
    padding-top: 1rem;
    padding-bottom: 2rem;
}

/* ===== Topbar ===== */
.topbar {
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 10;
}
.topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    gap: 1rem;
}
/* ============================================================
   Barra de progresso de navegação (estilo YouTube/GitHub)
   Mostrada quando o usuário clica numa aba. Cresce de 0 a ~85%
   em 650ms; o resto "completa" quando a próxima página renderiza.
   transform-origin:left + scaleX permite animação GPU-acelerada.
   ============================================================ */
.nav-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--success, #16a34a);
    transform: scaleX(0);
    transform-origin: left center;
    z-index: 9999;
    pointer-events: none;
    box-shadow:
        0 0 8px color-mix(in srgb, var(--success, #16a34a) 55%, transparent),
        0 0 2px color-mix(in srgb, var(--success, #16a34a) 80%, transparent);
}

/* ============================================================
   Logo "kalen" — Bricolage Grotesque 500, lowercase + disco verde

   Conceito: wordmark minimalista terminando com um disco verde
   sólido onde estaria um ponto final. Semanticamente, o disco
   É o "kalendae" romano — o marcador do dia em que as contas
   se acertam. Visualmente lê como period.

   Specs (alinhadas ao SVG do designer):
     - Tipografia: Bricolage Grotesque 500, lowercase
     - Letter-spacing: -0.02em (ligeiramente apertado, brand-y)
     - Cor texto: var(--text) — adapta light/dark automaticamente
     - Disco: 0.4em de diâmetro, verde sólido, baseline-aligned
   ============================================================ */
.logo {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    font-family: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-weight: 500;
    font-size: 1.55rem;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text);
    text-transform: lowercase;
    transition: opacity 0.18s ease;
}
.logo:hover {
    text-decoration: none;
    opacity: 0.82;
}
.logo:focus-visible {
    outline: 2px solid var(--success, #16a34a);
    outline-offset: 4px;
    border-radius: 4px;
}
.logo-text { display: inline-block; }

.logo-dot {
    /* Disco verde sólido — substitui um período estilizado. baseline-alignment
       garante que o fundo do disco descanse exatamente sobre a baseline do
       texto (como faria um '.' tipográfico). */
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    margin-left: 0.1em;
    border-radius: 50%;
    background: #16A34A;
    flex-shrink: 0;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .logo-dot {
    /* Micro-pulse no hover — o disco "respira" sutilmente, sinalizando
       que a marca está viva sem comprometer minimalismo. */
    transform: scale(1.18);
}
.nav { display: flex; gap: 0.75rem; }
.nav a {
    color: var(--text-muted);
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
}
.nav a:hover {
    color: var(--text);
    background: var(--border);
    text-decoration: none;
}
.topbar-account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Tab bar inferior (só mobile) =====
   Padrão de app mobile: nav fixa no rodapé, dedão fácil de alcançar.
   Em desktop fica escondida (display:none nas media queries abaixo). */
/* ============================================================
   Tab bar inferior — glassmorphism + estado ativo cinético

   Visão: barra com fundo "frosted glass" (backdrop-filter blur),
   linha decorativa no topo em gradiente (em vez de borda dura), e
   estado ativo com pill animado atrás do ícone + lift sutil. Cada
   tap é tátil — animação spring com cubic-bezier de overshoot.
   ============================================================ */
.tabbar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    /* Glassmorphism: fundo translúcido + blur. Suporta light/dark via var. */
    background: color-mix(in srgb, var(--bg-card) 85%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* Sombra suave acima (lift visual) sem borda dura — a linha do topo
       vem do ::before com gradient, dando uma "presença" refinada. */
    box-shadow:
        0 -10px 32px -8px rgba(0, 0, 0, 0.08),
        0 -1px 0 0 color-mix(in srgb, var(--border) 50%, transparent);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
/* Linha decorativa no topo da tabbar: gradient que esmaece nas bordas.
   Visualmente mais leve que uma border-top sólida. */
.tabbar::before {
    content: "";
    position: absolute;
    top: 0;
    left: 12%;
    right: 12%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        color-mix(in srgb, var(--text) 14%, transparent) 40%,
        color-mix(in srgb, var(--text) 14%, transparent) 60%,
        transparent
    );
    pointer-events: none;
}

/* ----- Tab individual ----- */
.tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Altura confortável: ~68px + safe-area. Bem acima do mín 44pt da Apple HIG. */
    padding: 0.7rem 0.25rem 0.65rem;
    color: var(--text-muted);
    text-decoration: none;
    min-width: 0;
    position: relative;
    transition: color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.tab:hover, .tab:focus { color: var(--text); text-decoration: none; }
.tab:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -4px;
    border-radius: 12px;
}
/* Tap state: scale-down sutil pra feedback tátil em mobile */
.tab:active .tab-icon { transform: scale(0.92); }

/* tab-icon é o "pill container" — recebe um ::before redondo que vira
   o fundo tintado quando .is-active. Padding horizontal generoso faz o
   pill ter formato horizontalmente alongado (estilo Material You). */
.tab-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tab-icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity 0.22s ease,
        transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}
.tab-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    position: relative;
    z-index: 1;
    transition: stroke-width 0.18s ease, transform 0.2s ease;
}

.tab-label {
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    letter-spacing: 0.005em;
    transition: font-weight 0.18s ease, letter-spacing 0.18s ease;
}

/* ----- Estado ativo: pill aparece + ícone "sobe" + label encorpa ----- */
.tab.is-active { color: var(--primary); }
.tab.is-active .tab-icon::before {
    opacity: 1;
    transform: scale(1);
}
.tab.is-active .tab-icon svg {
    /* Ícone sobe levemente + stroke mais grosso (mimetiza "filled" do SF) */
    transform: translateY(-1px);
    stroke-width: 2;
}
.tab.is-active .tab-label {
    font-weight: 600;
    letter-spacing: 0;
}

/* Mobile (≤640px): troca menu horizontal pela tab bar inferior */
@media (max-width: 640px) {
    /* Esconde a nav horizontal do topbar */
    .nav-desktop { display: none; }

    /* Compacta o nome no chip pra caber na topbar (só ícone + 1ª palavra) */
    .user-chip {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        max-width: 9rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Mostra a tab bar inferior */
    .tabbar { display: flex; }

    /* Espaço extra no fim do conteúdo pra não ficar coberto pela tab bar
       (~70px da tab + safe-area). Footer também ganha o espaço. */
    main.container { padding-bottom: 5.5rem; }
    .footer { padding-bottom: 5rem; }
}

/* ===== Botões — sistema consistente =====
   Todas as variantes têm mesma altura, padding horizontal proporcional,
   border-radius pill (999px), e transições padrão.
   Estados: idle / hover (lift+sombra) / active (scale-down) / focus-visible (ring) / disabled.
   Variantes: cor (primary/ghost/danger) + tamanho (sm/regular) + forma (icon/pill).
*/
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 2.5rem;
    padding: 0 1.15rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    background: var(--bg-card);
    color: var(--text);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.12s ease;
}
.btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}
.btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* Variantes de cor */
.btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.btn-primary:hover:not(:disabled) { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn-danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.btn-danger:hover:not(:disabled) { filter: brightness(0.92); }
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
    box-shadow: none;
}
.btn-ghost:hover:not(:disabled) {
    background: var(--bg-card);
    color: var(--text);
    border-color: var(--text-muted);
}

/* Variantes de tamanho */
.btn-sm {
    min-height: 2rem;
    padding: 0 0.85rem;
    font-size: 0.83rem;
    gap: 0.35rem;
}

/* Botão só com ícone/símbolo: quadrado, mesma altura que .btn regular */
.btn-icon {
    min-width: 2.5rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}
.btn-icon.btn-sm {
    min-width: 2rem;
    font-size: 1rem;
}

/* ===== Mensagens flash ===== */
.flashes { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
.flash {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    border-left: 4px solid;
    background: var(--bg-card);
}
.flash-count {
    margin-left: 0.5rem;
    font-weight: 600;
    opacity: 0.7;
    font-size: 0.85em;
}
.flash-success { border-color: var(--success); }
.flash-warning { border-color: var(--warn); }
.flash-error   { border-color: var(--danger); }

/* ===== Alerts ===== */
.alert {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    margin: 1rem 0;
    box-shadow: var(--shadow);
    border-left: 4px solid var(--info);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.alert-warn  { border-left-color: var(--warn); }
.alert-error { border-left-color: var(--danger); }
.alert-info  { border-left-color: var(--info); }
.alert summary { cursor: pointer; }
.unmatched-list { margin: 0.5rem 0 0; padding-left: 1.5rem; font-size: 0.9rem; }

/* Avisos fecháveis (botão × no canto). Marque com .dismissible-alert no
   container e adicione <button class="alert-dismiss"> dentro. */
.dismissible-alert {
    position: relative;
    padding-right: 2.5rem;
}
.alert-dismiss {
    position: absolute;
    top: 0.4rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
}
.alert-dismiss:hover { background: var(--bg); color: var(--text); }

/* ===== Toggle de view (Por mês / Lista) ===== */
.view-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 3px;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
    flex-shrink: 0;
}
/* Quando dentro de .topbar-actions, o pai já tem margin-bottom */
.topbar-actions .view-toggle { margin-bottom: 0; }
.view-tab {
    padding: 0.4rem 1rem;
    border-radius: 999px;
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.15s ease;
    text-decoration: none;
}
.view-tab:hover { color: var(--text); text-decoration: none; }
.view-tab.is-active {
    background: var(--primary);
    color: #fff;
    font-weight: 500;
}

/* ===== Dropdowns de mês/ano no header do dashboard ===== */
/* ============================================================
   Month picker — pill unificado com chevrons custom

   Os <select> nativos viram appearance:none e ganham um chevron
   SVG sobreposto. Mês e ano dividem o mesmo "card" com um
   separador vertical sutil entre eles.
   ============================================================ */
.month-picker {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    margin: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 color-mix(in srgb, white 35%, transparent);
}
.month-picker-field {
    position: relative;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    transition: background 0.15s ease;
    cursor: pointer;
}
.month-picker-field:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
}
.month-picker-field:focus-within {
    background: color-mix(in srgb, var(--primary) 12%, transparent);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 50%, transparent);
}
.month-picker-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.45rem 1.65rem 0.45rem 0.95rem;
    line-height: 1;
    /* Texto centralizado no field */
    text-align: center;
    text-align-last: center;
}
.month-picker-field select:focus {
    outline: none;
}
.month-picker-field-year select {
    /* Ano é mais curto — padding interno menor pra ficar compacto */
    padding-left: 0.75rem;
    padding-right: 1.45rem;
    color: var(--text-muted);
    font-weight: 500;
}
.month-picker-chevron {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.85rem;
    height: 0.85rem;
    color: var(--text-muted);
    pointer-events: none;
    transition: transform 0.18s ease, color 0.18s ease;
}
.month-picker-field:hover .month-picker-chevron,
.month-picker-field:focus-within .month-picker-chevron {
    color: var(--primary);
}
.month-picker-divider {
    width: 1px;
    align-self: center;
    height: 1.1rem;
    background: var(--border);
    margin: 0 0.15rem;
}

/* Setas laterais (anterior / próximo) — botão circular sutil que casa
   com a estética do pill central. Usa SVG inline em vez de ‹/›. */
.month-nav-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    text-decoration: none;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.month-nav-arrow svg { width: 1.05rem; height: 1.05rem; display: block; }
.month-nav-arrow:hover {
    background: color-mix(in srgb, var(--primary) 8%, var(--bg-card));
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
    text-decoration: none;
}
.month-nav-arrow:active { transform: scale(0.94); }
.month-nav-arrow:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Quando .month-nav contém o picker, troca a distribuição pra centralizar */
.month-nav-picker { justify-content: center; gap: 0.65rem; }

/* ===== Tabela da view "Lista" ===== */
.lista-range select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text);
    font-size: 0.9rem;
}
.lista-table-wrap {
    overflow-x: auto;          /* permite scroll horizontal em mobile */
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.lista-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    font-size: 0.9rem;
}
.lista-table th,
.lista-table td {
    padding: 0.65rem 0.85rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.lista-table th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg);
    font-weight: 600;
    position: sticky;
    top: 0;
}
.lista-table td.num,
.lista-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.lista-table tbody tr:hover { background: var(--bg); }
.lista-table tfoot td {
    background: var(--bg);
    border-top: 2px solid var(--border);
    border-bottom: none;
}
.lista-month-link {
    font-weight: 600;
    color: var(--text);
}
.lista-month-link:hover { color: var(--primary); }

/* ===== Linha de ações do topo (toggle + exportar lado a lado) ===== */
.topbar-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

/* ===== Barra de exportação (PDF/CSV) ===== */
/* (.export-bar antiga removida — substituída por .action-bar com icon-btns) */

/* ============================================================
   Action bar do dashboard — botões compactos só com ícone
   (privacidade + dropdown de exportar). Substituem as 3 linhas
   antigas (Exportar: PDF + CSV) por algo mais limpo.
   ============================================================ */
.action-bar {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background 0.18s ease,
        color 0.18s ease,
        border-color 0.18s ease,
        transform 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}
.icon-btn svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
}
.icon-btn:hover {
    background: var(--bg);
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Eye toggle: mostra um SVG ou outro conforme estado is-active */
.privacy-toggle .icon-eye-slash { display: none; }
.privacy-toggle[aria-pressed="true"] .icon-eye      { display: none; }
.privacy-toggle[aria-pressed="true"] .icon-eye-slash { display: block; }
.privacy-toggle[aria-pressed="true"] {
    color: var(--primary);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
    background: color-mix(in srgb, var(--primary) 10%, var(--bg-card));
}

/* ============================================================
   Dropdown — usado pelo botão de exportar

   IMPORTANTE: o .topbar-actions e .month-nav têm animation com
   transform, o que cria stacking contexts isolados. Sem o z-index
   explícito abaixo, o dropdown ficava ATRÁS dos elementos do
   month-nav (seletor de ano e seta ›). A correção é elevar o
   .action-bar quando .is-open, escapando dos siblings.
   ============================================================ */
.dropdown { position: relative; z-index: 1; }
.dropdown.is-open { z-index: 30; }
/* Quando o dropdown está aberto, sobe o container inteiro pra escapar
   do stacking context do .topbar-actions e ficar acima do .month-nav.
   A classe .has-open-dropdown é setada via JS (compat melhor que :has()). */
.action-bar { position: relative; }
.action-bar.has-open-dropdown { z-index: 200; }
/* Pelas dúvidas: também sobe o topbar-actions pai inteiro */
.topbar-actions { position: relative; }
.topbar-actions:has(.dropdown.is-open) { z-index: 200; }
.dropdown-trigger.is-open,
.dropdown.is-open .dropdown-trigger {
    background: var(--bg);
    color: var(--text);
    border-color: color-mix(in srgb, var(--primary) 50%, var(--border));
}
.dropdown-menu[hidden] { display: none; }
.dropdown-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 12rem;
    padding: 0.35rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow:
        0 12px 28px -10px rgba(0, 0, 0, 0.18),
        0 2px 6px rgba(0, 0, 0, 0.04);
    z-index: 50;
    /* Animação de entrada — escala + fade vindo do topo-direita */
    transform-origin: top right;
    animation: dropdownIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dropdownIn {
    from { opacity: 0; transform: scale(0.92) translateY(-4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    color: var(--text);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}
.dropdown-item:hover {
    background: color-mix(in srgb, var(--primary) 8%, transparent);
    color: var(--text);
    text-decoration: none;
}
.dropdown-item svg {
    width: 1.05rem;
    height: 1.05rem;
    color: var(--text-muted);
    flex-shrink: 0;
}
.dropdown-item:hover svg { color: var(--primary); }

/* ============================================================
   Privacidade: substitui valores monetários por bullets (• • • •)
   ----------------------------------------------------------------
   Técnica:
   - .is-money é position:relative SEMPRE; o pseudo ::after também
     existe sempre (mesmo quando visível) com opacity 0 — assim
     dá pra animar opacity/transform em AMBAS as direções (ocultar
     e revelar) via transition. Se o ::after só existisse quando
     hidden, ele "sumiria" abrupto ao desocultar.
   - O texto real fica transparente quando .values-hidden, mas
     continua ocupando o layout — sem "pulo" ao alternar.
   - user-select:none evita copiar o valor por baixo.
   ============================================================ */
.is-money {
    position: relative;
    transition: color 0.22s ease;
}
/* Filhos (strong, span, small) também transitam pra ficar em sincro */
.is-money * {
    transition: color 0.22s ease;
}
/* Pseudo dos bullets: sempre existe; visibilidade controlada via opacity */
.is-money::after {
    content: "• • • •";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    letter-spacing: 0.12em;
    font-weight: 500;
    font-size: inherit;
    font-family: inherit;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.96);
    transition: opacity 0.22s ease, transform 0.22s ease;
}
/* Spans inline (.shift-hours, .passed-value, .total-value, .stat-value):
   precisam virar inline-block pra position:relative gerar uma caixa
   estável onde o pseudo absoluto pode se posicionar com inset:0. */
span.is-money { display: inline-block; }

/* Estado oculto: texto vira transparente, bullets ganham opacity 1 */
html.values-hidden .is-money {
    color: transparent !important;
    text-shadow: none !important;
    user-select: none;
    -webkit-user-select: none;
}
html.values-hidden .is-money * { color: transparent !important; }
html.values-hidden .is-money::after {
    opacity: 1;
    transform: scale(1);
}
/* Tabela de Extras: a coluna .num é alinhada à direita; bullets também. */
td.is-money::after {
    justify-content: flex-end;
    padding-right: 0.75rem;
}

/* ===== Navegação de mês ===== */
.month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap; /* deixa quebrar em mobile estreito */
}
.month-title {
    margin: 0;
    text-align: center;
    font-size: 1.4rem;
    flex: 1 1 auto;
    min-width: 0;       /* permite shrink além do conteúdo */
    word-break: break-word;
}

/* /analise: form de filtros responsivo
   - Mobile: 1 coluna (cada label numa linha)
   - Tablet/desktop (>=720px): 4 colunas (De / Até / Modo / Botão) */
.analise-filters-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .analise-filters-grid { grid-template-columns: 1fr 1fr 1fr auto; }
}

/* ===== Cards de totais ===== */
.totals {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.total-card {
    background: var(--bg-card);
    padding: 1rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.total-label { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.total-value { font-size: 1.4rem; font-weight: 700; }

/* ===== Grid de hospitais ===== */
.hospital-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.hospital-card {
    background: var(--bg-card);
    border-radius: var(--radius);
    padding: 1rem;
    box-shadow: var(--shadow);
    border-top: 4px solid var(--hospital-color, var(--primary));
}
.hospital-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.hospital-card-head h2 { font-size: 1.1rem; margin: 0; }
.hospital-rate { font-size: 0.85rem; color: var(--text-muted); }
.hospital-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.hospital-stats > div { display: flex; flex-direction: column; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); }
.stat-value { font-size: 1.2rem; font-weight: 600; }

/* ============================================================
   Toggle de pagamento — design refinado/tátil

   Pendente: pill outline neutro com um checkbox vazio. Hover
   "promete" o estado pago (tinta verde sutil). Pago: pill cheia
   verde com checkmark animado. Transição entre estados é suave.
   ============================================================ */
.payment-toggle {
    --toggle-success: var(--success, #16a34a);
    --toggle-success-soft: color-mix(in srgb, var(--toggle-success) 14%, transparent);
    --toggle-success-tint: color-mix(in srgb, var(--toggle-success) 6%, transparent);

    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.65rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 0.005em;
    color: var(--text);
    transition:
        background 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease,
        box-shadow 0.22s ease,
        transform 0.12s ease-out;
    overflow: hidden;
}
.payment-toggle:hover:not(:disabled) {
    background: var(--toggle-success-tint);
    border-color: color-mix(in srgb, var(--toggle-success) 35%, var(--border));
    transform: translateY(-1px);
}
.payment-toggle:active:not(:disabled) { transform: scale(0.97); }
.payment-toggle:focus-visible {
    outline: 2px solid var(--toggle-success);
    outline-offset: 2px;
}
.payment-toggle:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Caixa-checkbox circular à esquerda */
.payment-toggle .toggle-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid currentColor;
    color: var(--text-muted);
    transition:
        background 0.25s ease,
        border-color 0.25s ease,
        color 0.25s ease;
}
.payment-toggle .toggle-icon svg {
    width: 0.85rem;
    height: 0.85rem;
    color: #fff;
    /* O checkmark começa "invisível" (totalmente offsetado) e desenha quando paid */
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    transition: stroke-dashoffset 0.35s cubic-bezier(0.65, 0, 0.35, 1);
}
.payment-toggle:hover:not(:disabled) .toggle-icon {
    color: var(--toggle-success);
}

/* Estado: PAGO — pill cheia, checkmark desenhado */
.payment-toggle.is-paid {
    background: var(--toggle-success);
    border-color: var(--toggle-success);
    color: #fff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.15),
        0 1px 3px color-mix(in srgb, var(--toggle-success) 28%, transparent);
}
.payment-toggle.is-paid:hover:not(:disabled) {
    background: color-mix(in srgb, var(--toggle-success) 88%, #000);
    border-color: color-mix(in srgb, var(--toggle-success) 88%, #000);
}
.payment-toggle.is-paid .toggle-icon {
    background: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.payment-toggle.is-paid .toggle-icon svg { stroke-dashoffset: 0; }

/* Animação "stamp" ao confirmar pagamento — disparada via JS */
.payment-toggle.just-toggled {
    animation: paymentStamp 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes paymentStamp {
    0%   { transform: scale(0.94); }
    45%  { transform: scale(1.04); }
    100% { transform: scale(1); }
}

/* Versão compacta (tabela de avulsos, plantões manuais) */
.payment-toggle.btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    gap: 0.45rem;
}
.payment-toggle.btn-sm .toggle-icon {
    width: 0.95rem;
    height: 0.95rem;
}
.payment-toggle.btn-sm .toggle-icon svg {
    width: 0.7rem;
    height: 0.7rem;
}

/* ============================================================
   Barra de progresso — refinada com gradient + brilho sutil
   ============================================================ */
.payment-progress {
    width: 100%;
    height: 8px;
    background: color-mix(in srgb, var(--border) 60%, transparent);
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.65rem;
    position: relative;
}
.payment-progress-fill {
    display: block;
    height: 100%;
    background: linear-gradient(
        90deg,
        var(--success, #16a34a),
        color-mix(in srgb, var(--success, #16a34a) 80%, #fff)
    );
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.65, 0, 0.35, 1);
    box-shadow: 0 0 8px color-mix(in srgb, var(--success, #16a34a) 35%, transparent);
}
.payment-progress-summary {
    font-size: 0.8rem;
    text-align: center;
    margin-top: 0.4rem;
    letter-spacing: 0.005em;
}
.payment-progress-summary strong {
    color: var(--success, #16a34a);
    font-weight: 600;
}

/* ===== Lista de plantões dentro do card ===== */
.shifts-details { margin-top: 0.75rem; font-size: 0.9rem; }
.shifts-details summary { cursor: pointer; color: var(--text-muted); }
.shifts-list {
    list-style: none;
    padding: 0.5rem 0 0;
    margin: 0;
}
.shifts-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* Mini toggle de plantão individual (à direita do item) */
.shift-toggle {
    margin-left: auto;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.shift-toggle:hover:not(:disabled) {
    border-color: var(--success);
    color: var(--success);
}
.shift-toggle.is-paid {
    background: rgba(22, 163, 74, 0.12);
    border-color: var(--success);
    color: var(--success);
    font-weight: 500;
}
.shift-toggle.via-month {
    cursor: not-allowed;
    opacity: 0.7;
}
.shift-toggle:disabled { cursor: not-allowed; }
.shift-source {
    display: inline-flex;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
}
.shift-google { background: #4285F4; }   /* azul Google */
.shift-manual { background: #6b7280; }   /* cinza */
.shift-when   { flex: 1; font-size: 0.85rem; }
.shift-hours  { font-weight: 600; }

/* ===== Cards genéricos ===== */
.card {
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 1rem;
    margin-bottom: 1rem;
}
.card > summary {
    cursor: pointer;
    list-style: none;
    padding: 0.25rem 0;
}
.card > summary::-webkit-details-marker { display: none; }

.form-card[open] > summary { margin-bottom: 1rem; }

/* Cor lateral em cards de hospital editáveis */
.hospital-edit-card { border-left: 4px solid var(--hospital-color, var(--primary)); }
.color-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--hospital-color, var(--primary));
    margin-right: 0.4rem;
    vertical-align: middle;
}

/* ===== Formulários ===== */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    min-width: 0; /* permite shrink em grids estreitas (mobile) */
}
.form-grid input,
.form-grid select {
    padding: 0.55rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    width: 100%;       /* nunca passa do label pai */
    max-width: 100%;
}
.form-grid input:focus,
.form-grid select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.form-grid .actions { display: flex; gap: 0.5rem; }

.empty {
    text-align: center;
    padding: 3rem 1rem;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* ===== Cards de plantões avulsos ===== */
.shifts-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
.shift-row { border-left: 4px solid var(--hospital-color, var(--primary)); }
.shift-row header { display: flex; align-items: center; margin-bottom: 0.5rem; }
.shift-row-body { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; font-size: 0.9rem; }

/* ===== Tabs do form de avulsos ===== */
.entry-type-tabs {
    display: flex;
    gap: 0.5rem;
    background: var(--bg);
    padding: 0.25rem;
    border-radius: 999px;
    border: 1px solid var(--border);
}
.entry-type-tab {
    flex: 1;
    text-align: center;
    padding: 0.5rem 1rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    transition: all 0.15s ease;
}
.entry-type-tab input { display: none; }
.entry-type-tab:has(input:checked) {
    background: var(--primary);
    color: #fff;
    font-weight: 500;
}

/* ===== Plantões passados (deduções de renda fixa) ===== */
.passed-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 0.75rem;
    border-top: 1px solid var(--border);
}
.passed-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
}
.passed-value {
    color: var(--danger);
    font-weight: 600;
    min-width: 90px;
}
.passed-desc {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.passed-del { margin: 0; }
.passed-del-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
}
.passed-del-btn:hover { color: var(--danger); border-color: var(--danger); }

/* ============================================================
   "Passei plantão" — chip ao lado do valor (R$) com form que
   expande full-width logo abaixo do bloco de stats.
   ============================================================ */

/* Linha "valor + chip Passei plantão" lado a lado */
.stat-value-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Chip do trigger — pill com ícone minus.circle + texto.
   Usa cor warn pra sinalizar que é uma operação de subtração. */
.passei-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.75rem 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.005em;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        color 0.18s ease,
        transform 0.12s ease,
        box-shadow 0.18s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    -webkit-tap-highlight-color: transparent;
}
.passei-trigger svg {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.passei-trigger:hover {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
    background: color-mix(in srgb, var(--warn) 8%, var(--bg-card));
    transform: translateY(-1px);
    box-shadow: 0 3px 8px color-mix(in srgb, var(--warn) 18%, transparent);
}
.passei-trigger:active { transform: scale(0.96); }
.passei-trigger:focus-visible {
    outline: 2px solid var(--warn);
    outline-offset: 2px;
}
/* Estado aberto: chip fica "ativo" + o ícone − gira pra virar × */
.passei-trigger.is-open {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 50%, var(--border));
    background: color-mix(in srgb, var(--warn) 12%, var(--bg-card));
}
.passei-trigger.is-open svg { transform: rotate(45deg); }

/* O .form-grid tem `display: grid`, que sobrescreve o atributo HTML
   `hidden` do browser. Sem essa regra explícita, o form de "Passei
   plantão" aparece aberto mesmo com `hidden` no markup. */
.passei-form-grid[hidden] { display: none; }

/* Form expandido — full-width abaixo do bloco de stats, com fundo
   levemente tintado em warn pra criar conexão visual com o chip. */
.passei-form-grid {
    grid-template-columns: 1fr;
    margin-top: 0.6rem;
    padding: 0.85rem;
    background: color-mix(in srgb, var(--warn) 5%, var(--bg));
    border: 1px solid color-mix(in srgb, var(--warn) 18%, var(--border));
    border-radius: 12px;
    animation: passeiFormIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes passeiFormIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ===== Estado vazio dentro de coluna lateral ===== */
.empty-mini {
    background: var(--bg-card);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.empty-mini p { margin: 0; }

/* ===== Layout 2 colunas: Renda fixa | Avulsos ===== */
.bottom-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}
@media (min-width: 720px) {
    .bottom-row { grid-template-columns: 1fr 1fr; }
}

/* ===== Tabela de avulsos no dashboard ===== */
.avulsos-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: 0.9rem;
}
.avulsos-table th,
.avulsos-table td {
    padding: 0.55rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}
.avulsos-table th {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg);
}
.avulsos-table td.num,
.avulsos-table th.num { text-align: right; }
.avulsos-table tbody tr:last-child td { border-bottom: none; }
.avulsos-table tfoot td {
    background: var(--bg);
    font-size: 0.85rem;
    border-top: 1px solid var(--border);
    border-bottom: none;
}
.avulsos-table .payment-toggle {
    /* Na tabela, o botão não ocupa a largura toda — só o necessário pro conteúdo */
    width: auto;
    min-width: 7rem;
}

/* ===== Título de seção ===== */
.section-title {
    margin: 1.5rem 0 0.75rem;
    font-size: 1rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ===== Dropdown compacto de seleção de calendário ===== */
.cal-source-form { padding: 0.75rem 1rem; }
.cal-source-form-bottom { margin-top: 1.5rem; }
.cal-source-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.cal-source-label select {
    flex: 1;
    min-width: 200px;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 0.95rem;
}
.cal-source-label select:focus {
    outline: none;
    border-color: var(--primary);
}

/* ===== Grade mensal (calendarios) ===== */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Primeira linha (cabeçalho Seg/Ter/...) tem altura automática.
       Demais linhas (semanas) têm altura fixa em 90px - cada célula
       idêntica, independentemente de ter eventos ou não. */
    grid-template-rows: auto;
    grid-auto-rows: 90px;
    gap: 4px;
    margin-top: 0.5rem;
}
.cal-header {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-align: center;
    padding: 0.5rem 0;
    font-weight: 600;
}
.cal-cell {
    background: var(--bg-card);
    border-radius: 8px;
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.cal-empty {
    background: transparent;
    box-shadow: none;
}
.cal-day {
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.8rem;
    align-self: flex-end;
}
.cal-event {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #fff;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.cal-event-shift {
    font-weight: 700;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
    padding: 0 4px;
    flex-shrink: 0;
}
.cal-event-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Legenda */
.cal-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 0.5rem;
}
/* Chips da legenda: propositalmente NEUTROS (cinza claro com texto escuro)
   pra não competir com as cores que o usuário associou aos hospitais. A
   diferenciação fica pela letra dentro do chip (D/N/24/G/M), não pela cor. */
.cal-chip {
    display: inline-block;
    width: 22px;
    height: 18px;
    border-radius: 4px;
    background: var(--bg-muted, rgba(0, 0, 0, 0.06));
    color: var(--text);
    text-align: center;
    line-height: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    border: 1px solid var(--border);
}
.cal-chip-24 { font-size: 0.6rem; }

/* Marcador de origem do plantão (Google vs criado no app) — também neutro */
.cal-source-mark {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    background: var(--bg-muted, rgba(0, 0, 0, 0.06));
    color: var(--text);
    font-size: 0.65rem;
    font-weight: 700;
    margin-right: 0.3rem;
    vertical-align: middle;
    border: 1px solid var(--border);
}
/* Plantões manuais ficam sutilmente diferenciados na grade (borda tracejada) */
.cal-event-manual { border: 1px dashed rgba(255, 255, 255, 0.45); }
.cal-event-google { border: 1px solid transparent; }
.cal-legend-bar {
    text-align: center;
    font-size: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0;
}
.sync-google-toggle {
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
    color: var(--text) !important;
    font-size: 0.9rem;
}
.sync-google-toggle input { width: auto !important; }

/* Célula clicável da grade do calendário */
.cal-cell-clickable { cursor: pointer; transition: background 0.1s; }
.cal-cell-clickable:hover { background: var(--bg); }

/* ============================================================
   Destaque do dia atual — estilo Google Calendar
   O número do dia ganha um círculo cheio com cor primária; o
   próprio card recebe um halo sutil pra ficar visível mesmo
   numa grade lotada de plantões coloridos.
   ============================================================ */
.cal-cell-today {
    box-shadow:
        var(--shadow),
        0 0 0 1.5px color-mix(in srgb, var(--primary) 65%, transparent);
}
.cal-cell-today .cal-day {
    color: #fff;
    background: var(--primary);
    width: 1.6em;
    height: 1.6em;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--primary) 45%, transparent);
    /* Pequena entrada animada na primeira render */
    animation: todayDayPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes todayDayPop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.cal-event { cursor: pointer; transition: transform 0.1s; }
.cal-event:hover { transform: scale(1.05); }

/* ===== Modais (criar/editar plantão na grade) ===== */
.modal[hidden] { display: none; }
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.modal-panel {
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 1;
}
.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 1.1rem; }
.modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0 0.25rem;
}
.modal-close:hover { color: var(--text); }
.modal-body {
    padding: 1.25rem;
}
.modal-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}
.modal-actions-stack {
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}
.modal-event-meta p { margin: 0.25rem 0; }
.modal-edit-form { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.modal-create-date-display { margin-bottom: 0.5rem; }

/* ===== Dias da semana (form de recorrência) ===== */
.days-of-week {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.5rem 0.75rem 0.75rem;
    background: var(--bg);
}
.days-of-week legend {
    padding: 0 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.dow-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.dow-chip {
    flex: 1 1 auto;
    min-width: 3rem;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
.dow-chip input { display: none; }
.dow-chip span {
    display: block;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.1s;
}
.dow-chip input:checked + span {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.dow-chip:hover span { border-color: var(--primary); }

/* Linha do "Personalizado" — input "A cada N semanas" */
.custom-weeks-row {
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
}
.custom-weeks-row[hidden] { display: none; }
.custom-weeks-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.5rem !important;
    font-size: 0.9rem !important;
    color: var(--text) !important;
}
.custom-weeks-label input {
    width: 4.5rem !important;
    text-align: center;
    padding: 0.4rem 0.5rem !important;
}

/* Toggle "Repetir esse plantão" — checkbox que expande os campos abaixo */
.repeat-toggle {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 0.6rem !important;
    padding: 0.7rem 0.85rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text) !important;
    font-size: 0.9rem !important;
    transition: border-color 0.15s, background 0.15s;
}
.repeat-toggle:hover { border-color: var(--primary); }
.repeat-toggle input { width: auto !important; accent-color: var(--primary); }

/* Bloco de campos que aparece quando o toggle está ativo */
.repeat-fields {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-top: 1px dashed var(--border);
    margin-top: -0.25rem;
    animation: dashFadeUp 0.25s ease-out;
}
.repeat-fields[hidden] { display: none; }

/* ===== Lista de plantões do mês (abaixo da grade do calendário) ===== */
.month-shifts-section { margin-top: 2rem; }
.month-shifts-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.month-shift-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 0.85rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    transition: border-color 0.15s, box-shadow 0.15s;
    animation: dashFadeUp 0.4s both ease-out;
}
.month-shift-item:hover {
    border-color: var(--shift-color, var(--primary));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
/* Linhas clicáveis (plantões manuais não-agregados) abrem o modal de edição */
.month-shift-item-clickable {
    cursor: pointer;
}
.month-shift-item-clickable:hover {
    background: var(--bg-hover, rgba(0, 0, 0, 0.025));
}
.month-shift-color {
    width: 4px;
    align-self: stretch;
    background: var(--shift-color, var(--primary));
    border-radius: 2px;
    flex-shrink: 0;
}
.month-shift-info {
    flex: 1;
    min-width: 0;
}
.month-shift-line1 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.month-shift-line2 {
    font-size: 0.82rem;
    margin-top: 0.15rem;
}
.month-shift-kind {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}
.month-shift-badge {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.month-shift-badge-google { background: #e8f0fe; color: #1967d2; }
.month-shift-badge-recurring { background: #fef3c7; color: #92400e; }
.month-shift-badge-single { background: #f3f4f6; color: #6b7280; }
.month-shift-badge-synced { background: #d1fae5; color: #065f46; }
.month-shift-badge-fixed { background: #ede9fe; color: #5b21b6; }
@media (prefers-color-scheme: dark) {
    .month-shift-badge-google { background: rgba(25, 103, 210, 0.18); color: #8ab4f8; }
    .month-shift-badge-recurring { background: rgba(146, 64, 14, 0.25); color: #fcd34d; }
    .month-shift-badge-single { background: rgba(107, 114, 128, 0.2); color: #9ca3af; }
    .month-shift-badge-synced { background: rgba(6, 95, 70, 0.25); color: #6ee7b7; }
    .month-shift-badge-fixed { background: rgba(91, 33, 182, 0.25); color: #c4b5fd; }
}
.month-shift-no-delete {
    width: 1.5rem;
    text-align: center;
    flex-shrink: 0;
}
.month-shift-delete-form { margin: 0; }
.month-shift-delete, .month-shift-delete-form .btn { flex-shrink: 0; }

/* ===== Página /conta ===== */
.account-page {
    max-width: 640px;
    margin: 0 auto;
}
.account-title {
    font-size: 1.6rem;
    margin: 0 0 0.25rem;
    letter-spacing: -0.01em;
}
.account-sub {
    margin: 0 0 2rem;
}
.account-section {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem 1.5rem;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}
.account-section .section-title { margin-top: 0; }
.account-section p.muted { margin-bottom: 1rem; }
.account-form { margin-top: 1rem; }

/* Seção de Assinatura em /conta: chip de status + link pra detalhes */
.account-sub-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.account-sub-info { flex: 1 1 16rem; min-width: 0; }
.account-sub-info p.muted { margin: 0.5rem 0 0; }
.account-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.account-chip.is-founder { background: #e0e7ff; color: #3730a3; }
.account-chip.is-beta    { background: #cffafe; color: #155e75; }
.account-chip.is-trial   { background: #fef3c7; color: #92400e; }
.account-chip.is-active  { background: #d1fae5; color: #065f46; }
.account-chip.is-expired { background: #fee2e2; color: #991b1b; }
.theme-grid {
    width: 100%;
}

/* Modal de confirmar delete recorrente: 2 ações lado a lado */
.modal-del-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}
@media (min-width: 480px) {
    .modal-del-actions { flex-direction: row; justify-content: flex-end; }
}

/* Mobile: células menores; chip mostra só D/N pra economizar espaço */
@media (max-width: 640px) {
    .cal-grid { grid-auto-rows: 64px; }
    .cal-cell { padding: 0.25rem; }
    .cal-event-name { display: none; }
    .cal-event { justify-content: center; padding: 1px 3px; }
    .cal-day { font-size: 0.75rem; }
    .cal-header { font-size: 0.65rem; padding: 0.25rem 0; }
}

/* ===== Loading spinner ===== */
.spinner {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}
.spinner::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spinner-rot 0.8s linear infinite;
}
@keyframes spinner-rot {
    to { transform: rotate(360deg); }
}

/* Spinner inline pra botões em estado de loading.
   Usado quando um form/link com data-loading dispara ação demorada
   (ex: criar plantões em lote, exportar PDF). */
.btn-spinner {
    display: inline-block;
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-rot 0.7s linear infinite;
    flex-shrink: 0;
    opacity: 0.85;
}
.btn.is-loading,
a.is-loading {
    opacity: 0.85;
    pointer-events: none;
    cursor: wait;
}

/* ===== Wrapper do gráfico (Chart.js) ===== */
.chart-wrapper {
    position: relative;
    height: 380px;
    padding: 1rem;
    margin-bottom: 1rem;
}
@media (min-width: 720px) {
    .chart-wrapper { height: 460px; }
}
.chart-wrapper canvas { max-width: 100%; }

/* ===== Footer ===== */
.footer {
    border-top: 1px solid var(--border);
    padding: 1rem 0;
    text-align: center;
    color: var(--text-muted);
    background: var(--bg-card);
}
.footer-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}
.footer-links {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
}
.footer-links a:hover { color: var(--primary); text-decoration: underline; }
@media (min-width: 640px) {
    .footer-inner { flex-direction: row; justify-content: space-between; gap: 1rem; }
}

/* ===== Telas maiores: tablet/desktop ===== */
@media (min-width: 640px) {
    .totals { grid-template-columns: repeat(4, 1fr); }
    .hospital-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-grid .full { grid-column: 1 / -1; }
}

@media (min-width: 960px) {
    .hospital-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Refinamentos visuais do dashboard (não mudam paleta nem layout)
   - Stagger reveal no carregamento (puro CSS via nth-child)
   - Hover/active states refinados
   - Microinterações nos toggles e barra de progresso
   - Section titles com marcador decorativo lateral
   ============================================================ */

/* Animação base reusada por vários elementos */
@keyframes dashFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animação dedicada para a barra de progresso (cresce de 0 ao valor real) */
@keyframes dashFillIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* ----- Stagger no header do dashboard ----- */
.topbar-actions { animation: dashFadeUp 0.45s 0.02s both ease-out; }
.month-nav      { animation: dashFadeUp 0.45s 0.08s both ease-out; }

/* ----- Stagger nos 4 cards de totais (cada um entra ~50ms depois) ----- */
.totals .total-card {
    animation: dashFadeUp 0.5s both ease-out;
    transition: transform 0.18s ease-out, box-shadow 0.18s ease-out;
}
.totals .total-card:nth-child(1) { animation-delay: 0.14s; }
.totals .total-card:nth-child(2) { animation-delay: 0.20s; }
.totals .total-card:nth-child(3) { animation-delay: 0.26s; }
.totals .total-card:nth-child(4) { animation-delay: 0.32s; }

.totals .total-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ----- Cards de hospital + renda fixa: entrada e hover ----- */
.hospital-grid .hospital-card {
    animation: dashFadeUp 0.5s both ease-out;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.hospital-grid .hospital-card:nth-child(1) { animation-delay: 0.40s; }
.hospital-grid .hospital-card:nth-child(2) { animation-delay: 0.48s; }
.hospital-grid .hospital-card:nth-child(3) { animation-delay: 0.56s; }
.hospital-grid .hospital-card:nth-child(4) { animation-delay: 0.64s; }
.hospital-grid .hospital-card:nth-child(5) { animation-delay: 0.72s; }
.hospital-grid .hospital-card:nth-child(6) { animation-delay: 0.80s; }

.hospital-card {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.hospital-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
}
.hospital-card:active { transform: translateY(-1px); }

/* ----- Bottom row (renda fixa + avulsos) entra junto ----- */
.bottom-row { animation: dashFadeUp 0.5s 0.85s both ease-out; }

/* ----- Section title: marcador vertical decorativo ----- */
.section-title {
    position: relative;
    padding-left: 0.85rem;
    display: flex;
    align-items: center;
}
.section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 1em;
    background: var(--primary);
    border-radius: 2px;
    opacity: 0.85;
}

/* ----- Barra de progresso: cresce ao carregar ----- */
.payment-progress {
    overflow: hidden;
    position: relative;
}
.payment-progress-fill {
    transform-origin: left center;
    /* Animação CSS-only: width já é setada inline pelo template, mas aplicamos
       um scaleX que vai de 0 a 1 pra ter o efeito de "encher" no carregamento. */
    animation: dashFillIn 0.9s 0.6s both cubic-bezier(0.22, 1, 0.36, 1);
    transition: width 0.6s ease-out, background 0.3s ease-out;
}

/* (Estilos do .payment-toggle e da animação 'just-toggled' ficam no bloco
   principal acima — esse trecho antigo foi removido pra evitar override
   conflitante do hover/animação.) */

/* ----- Avulsos table: linhas com fade-in stagger ----- */
.avulsos-table tbody tr {
    animation: dashFadeUp 0.4s both ease-out;
}
.avulsos-table tbody tr:nth-child(1) { animation-delay: 0.95s; }
.avulsos-table tbody tr:nth-child(2) { animation-delay: 1.00s; }
.avulsos-table tbody tr:nth-child(3) { animation-delay: 1.05s; }
.avulsos-table tbody tr:nth-child(n+4) { animation-delay: 1.10s; }

/* ============================================================
   Animações em outras páginas (mesma keyframe dashFadeUp)
   ============================================================ */

/* /lista — tabela do resumo mensal */
.lista-table-wrap { animation: dashFadeUp 0.5s 0.1s both ease-out; }

/* /hospitais — form e cards */
.hospital-edit-card {
    animation: dashFadeUp 0.45s both ease-out;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.hospital-edit-card:nth-child(1) { animation-delay: 0.1s; }
.hospital-edit-card:nth-child(2) { animation-delay: 0.16s; }
.hospital-edit-card:nth-child(3) { animation-delay: 0.22s; }
.hospital-edit-card:nth-child(4) { animation-delay: 0.28s; }
.hospital-edit-card:nth-child(n+5) { animation-delay: 0.34s; }
.hospital-edit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* /analise — cards de filtros, totais e tabela */
.analise-filters-grid { animation: dashFadeUp 0.45s 0.05s both ease-out; }
#analise-totals       { animation: dashFadeUp 0.45s 0.18s both ease-out; }
.chart-wrapper        { animation: dashFadeUp 0.55s 0.28s both ease-out; }
#series-table-wrapper { animation: dashFadeUp 0.45s 0.4s both ease-out; }

/* /calendarios — formulários de criação e a grade */
.cal-source-form { animation: dashFadeUp 0.4s 0.05s both ease-out; }
.cal-grid        { animation: dashFadeUp 0.5s 0.2s both ease-out; }
.cal-cell        { transition: background 0.12s ease-out; }
.cal-event {
    transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.cal-event:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

/* /plantoes-avulsos — cards de plantão */
.shifts-cards .shift-row {
    animation: dashFadeUp 0.45s both ease-out;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.shifts-cards .shift-row:nth-child(1) { animation-delay: 0.1s; }
.shifts-cards .shift-row:nth-child(2) { animation-delay: 0.16s; }
.shifts-cards .shift-row:nth-child(3) { animation-delay: 0.22s; }
.shifts-cards .shift-row:nth-child(n+4) { animation-delay: 0.28s; }
.shifts-cards .shift-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* /renda-fixa — cards de renda */
.fixed-income-card,
.income-edit-card {
    animation: dashFadeUp 0.45s both ease-out;
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}
.fixed-income-card:hover,
.income-edit-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

/* Modais (criar/editar plantão na grade) entram com fade */
.modal-panel { animation: dashFadeUp 0.25s ease-out; }

/* ----- Respeita a preferência de redução de movimento ----- */
@media (prefers-reduced-motion: reduce) {
    .topbar-actions,
    .month-nav,
    .totals .total-card,
    .hospital-grid .hospital-card,
    .bottom-row,
    .payment-progress-fill,
    .avulsos-table tbody tr,
    .payment-toggle.is-paid,
    .lista-table-wrap,
    .hospital-edit-card,
    .analise-filters-grid,
    #analise-totals,
    .chart-wrapper,
    #series-table-wrapper,
    .cal-source-form,
    .cal-grid,
    .cal-event,
    .shifts-cards .shift-row,
    .fixed-income-card,
    .income-edit-card,
    .modal-panel {
        animation: none !important;
    }
    .btn { transition: none !important; }
}

/* ===== Auth (login / cadastro) ===== */
.auth-card {
    max-width: 420px;
    margin: 2rem auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 1.5rem;
}
.auth-title {
    margin: 0 0 1.5rem;
    font-size: 1.5rem;
    text-align: center;
}
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.auth-label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.auth-label input {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    color: var(--text);
    font-size: 1rem;
    font-weight: normal;
}
.auth-label input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.auth-hint {
    font-weight: normal;
    font-size: 0.75rem;
    color: var(--text-muted);
}
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.auth-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin: 0.25rem 0 0.25rem;
}
.auth-consent input[type="checkbox"] {
    margin-top: 0.15rem;
    flex-shrink: 0;
    accent-color: var(--primary);
}
.auth-consent a { color: var(--primary); font-weight: 600; text-decoration: none; }
.auth-consent a:hover { text-decoration: underline; }
.auth-submit {
    margin-top: 0.5rem;
    width: 100%;
    padding: 0.7rem;
    font-size: 1rem;
}
.auth-alt {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--text-muted);
}
.auth-alt a {
    color: var(--primary);
    font-weight: 600;
}

/* ===== Onboarding (user novo, sem hospitais nem renda fixa) ===== */
.onboarding-card {
    max-width: 720px;
    margin: 1.5rem auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 2rem 1.5rem;
}
.onboarding-title {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
}
.onboarding-intro {
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}
.onboarding-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.onboarding-step {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.onboarding-step strong {
    display: block;
    margin-bottom: 0.25rem;
}
.onboarding-step p {
    margin: 0;
    font-size: 0.85rem;
}
.onboarding-step .btn {
    flex-shrink: 0;
    white-space: nowrap;
}
.onboarding-done {
    color: var(--success, #16a34a);
    font-weight: 600;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.onboarding-tip {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
}
@media (max-width: 600px) {
    .onboarding-step {
        flex-direction: column;
        align-items: stretch;
    }
    .onboarding-step .btn {
        width: 100%;
        text-align: center;
    }
}

/* User chip + logout no topbar */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.7rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.user-chip:hover {
    background: var(--bg-card);
    color: var(--text);
}
.logout-form {
    display: inline;
    margin: 0;
}
.logout-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
}
.logout-btn:hover {
    background: var(--bg);
    color: var(--text);
}