/* =====================================================================
   ui-components.css — Camada de componentes (Fase 2 da modernização)
   Usa os design tokens (var(--brand-*), --radius-*, --shadow-*).
   Tokens replicados aqui p/ o arquivo ser autossuficiente (login/guest também).
   NÃO introduz build step — carregado via <link> junto do Tailwind CDN.
   ===================================================================== */
:root {
    --brand-50:#eff6ff; --brand-100:#dbeafe; --brand-200:#bfdbfe; --brand-300:#93c5fd;
    --brand-400:#60a5fa; --brand-500:#3b82f6; --brand-600:#2563eb; --brand-700:#1d4ed8;
    --brand-800:#1e40af; --brand-900:#1e3a8a;
    --brand:#2563eb; --brand-hover:#1d4ed8;
    --radius-control:8px; --radius-card:8px;
    --shadow-card:0 1px 3px rgba(15,23,42,0.06), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-card-hover:0 8px 24px rgba(15,23,42,0.10);
}

/* =====================================================================
   PADRÃO DE ARREDONDAMENTO = 5px (pedido do usuário).
   Força 5px nos retângulos arredondados (rounded-lg/xl/2xl/3xl) do Tailwind,
   PRESERVANDO círculos/pílulas (rounded-full) — avatares, FAB, toggles, chips.
   Cards/hero/modais via tokens (--radius-* já em 5px).
   ===================================================================== */
[class*="rounded-lg"]:not([class*="rounded-full"]),
[class*="rounded-xl"]:not([class*="rounded-full"]),
[class*="rounded-2xl"]:not([class*="rounded-full"]),
[class*="rounded-3xl"]:not([class*="rounded-full"]) {
    border-radius: 8px !important;
}

/* ---------- Botões ---------- */
.btn {
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    font-weight:600; font-size:.875rem; line-height:1;
    padding:.6rem 1rem; border-radius:8px;
    border:1px solid transparent; cursor:pointer; text-decoration:none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
    white-space:nowrap;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-200); }
.btn:disabled, .btn[disabled] { opacity:.55; cursor:not-allowed; }
.btn-primary   { background:var(--brand); color:#fff; box-shadow:0 1px 2px rgba(37,99,235,.25); }
.btn-primary:hover   { background:var(--brand-hover); }
.btn-secondary { background:#fff; color:#334155; border-color:#e2e8f0; }
.btn-secondary:hover { background:#f8fafc; border-color:#cbd5e1; }
.btn-ghost     { background:transparent; color:#475569; }
.btn-ghost:hover     { background:#f1f5f9; color:#0f172a; }
.btn-danger    { background:#dc2626; color:#fff; }
.btn-danger:hover    { background:#b91c1c; }
.btn-success   { background:#16a34a; color:#fff; }
.btn-success:hover   { background:#15803d; }
.btn-sm { padding:.4rem .75rem; font-size:.8rem; border-radius:8px; }
.btn-lg { padding:.75rem 1.35rem; font-size:.95rem; }
.btn-block { width:100%; }
.dark .btn-secondary { background:#0f172a; color:#e2e8f0; border-color:#334155; }
.dark .btn-secondary:hover { background:#1e293b; }
.dark .btn-ghost { color:#cbd5e1; }
.dark .btn-ghost:hover { background:#1e293b; color:#fff; }

/* ---------- Campos de formulário ---------- */
.field {
    width:100%; padding:.6rem .8rem;
    border:1px solid #d8e0ee; border-radius:var(--radius-control);
    background:#fff; font-size:.9rem; color:#0f172a;
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.field::placeholder { color:#94a3b8; }
.field:focus { outline:none; border-color:var(--brand-400); box-shadow:0 0 0 3px var(--brand-100); }
.field:disabled { background:#f1f5f9; color:#64748b; cursor:not-allowed; }
.field-label { display:block; font-size:.8rem; font-weight:600; color:#475569; margin-bottom:.3rem; }
.dark .field { background:#0f172a; border-color:#334155; color:#e2e8f0; }
.dark .field:focus { border-color:var(--brand-500); box-shadow:0 0 0 3px rgba(37,99,235,.25); }
.dark .field-label { color:#cbd5e1; }

/* ---------- Cards ---------- */
.ui-card {
    background:#fff; border:1px solid #eef2f7;
    border-radius:var(--radius-card); box-shadow:var(--shadow-card);
}
.ui-card-pad { padding:1.25rem; }
.ui-card-hover { transition: box-shadow .2s ease, transform .2s ease; }
.ui-card-hover:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-2px); }
.dark .ui-card { background:#0f172a; border-color:#1e293b; }

/* ---------- Badges / pills ---------- */
.badge {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.72rem; font-weight:600; line-height:1.4;
    padding:.2rem .6rem; border-radius:9999px; white-space:nowrap;
}
.badge-neutral { background:#f1f5f9; color:#475569; }
.badge-info    { background:var(--brand-100); color:var(--brand-700); }
.badge-success { background:#dcfce7; color:#15803d; }
.badge-warning { background:#fef9c3; color:#a16207; }
.badge-danger  { background:#fee2e2; color:#b91c1c; }
.dark .badge-neutral { background:#1e293b; color:#cbd5e1; }
.dark .badge-info    { background:rgba(37,99,235,.2); color:#93c5fd; }
.dark .badge-success { background:rgba(22,163,74,.2); color:#86efac; }
.dark .badge-warning { background:rgba(161,98,7,.25); color:#fde047; }
.dark .badge-danger  { background:rgba(185,28,28,.25); color:#fca5a5; }

/* ---------- Tabela ---------- */
.ui-table { width:100%; border-collapse:separate; border-spacing:0; font-size:.875rem; }
.ui-table thead th {
    text-align:left; font-size:.7rem; letter-spacing:.04em; text-transform:uppercase;
    color:#94a3b8; font-weight:700; padding:.7rem .8rem;
    background:#f8fafc; border-bottom:1px solid #eef2f7; white-space:nowrap;
}
.ui-table tbody td { padding:.7rem .8rem; border-bottom:1px solid #f1f5f9; color:#334155; }
.ui-table tbody tr:last-child td { border-bottom:0; }
.ui-table tbody tr:hover { background:#f8fbff; }
.ui-table-wrap { border:1px solid #eef2f7; border-radius:var(--radius-card); overflow:hidden; background:#fff; }
.dark .ui-table thead th { background:#0b1220; color:#64748b; border-color:#1e293b; }
.dark .ui-table tbody td { color:#cbd5e1; border-color:#1e293b; }
.dark .ui-table tbody tr:hover { background:#111c33; }
.dark .ui-table-wrap { background:#0f172a; border-color:#1e293b; }

/* ---------- Polish global (SÓ área de conteúdo, não toca a sidebar) ----------
   Anel de foco azul consistente em todas as telas de uma vez.
   Usa !important só no :focus (seguro — afeta apenas o estado de foco) para
   vencer utilitários Tailwind (focus:ring-*) e regras legadas. O raio é deixado
   por conta de cada tela / da classe .field (evita brigar com pills/search). */
.layout-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
.layout-main select,
.layout-main textarea {
    transition: border-color .15s ease, box-shadow .15s ease;
}
.layout-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,
.layout-main select:focus,
.layout-main textarea:focus {
    outline: none !important;
    border-color: var(--brand-400) !important;
    box-shadow: 0 0 0 3px var(--brand-100) !important;
}
.dark .layout-main input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):focus,
.dark .layout-main select:focus,
.dark .layout-main textarea:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px rgba(37,99,235,.25) !important;
}

/* =====================================================================
   Dashboard kit (Fase 3) — hero, stat cards, seções, rankings
   ===================================================================== */
.dash-hero {
    position: relative; overflow: hidden;
    border-radius: var(--radius-card);
    background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-800) 100%);
    color: #fff; padding: 1.5rem 1.75rem;
    box-shadow: 0 10px 30px -12px rgba(37,99,235,.55);
}
.dash-hero > * { position: relative; z-index: 1; }
.dash-hero::after { content:''; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:9999px; background:rgba(255,255,255,.10); }
.dash-hero::before { content:''; position:absolute; right:90px; bottom:-70px; width:150px; height:150px; border-radius:9999px; background:rgba(255,255,255,.07); }
.dash-hero .eyebrow { font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; opacity:.85; }
.dash-hero h1 { font-size:1.65rem; font-weight:700; margin-top:.15rem; line-height:1.1; }
.dash-hero p.sub { font-size:.9rem; opacity:.85; margin-top:.3rem; }

.dash-section-title { display:flex; align-items:center; gap:.55rem; margin-bottom:.85rem; }
.dash-section-title .di { width:1.9rem; height:1.9rem; border-radius:.6rem; display:inline-flex; align-items:center; justify-content:center; background:var(--brand-100); color:var(--brand-600); font-size:.8rem; }
.dash-section-title .dt { font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:#64748b; font-weight:700; }
.dark .dash-section-title .dt { color:#94a3b8; }
.dark .dash-section-title .di { background:rgba(37,99,235,.2); color:#93c5fd; }

/* Stat card */
.stat-card {
    position:relative; display:flex; gap:.85rem; align-items:flex-start;
    background:#fff; border:1px solid #eef2f7; border-radius:var(--radius-card);
    padding:1rem 1.05rem; box-shadow:var(--shadow-card);
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    text-decoration:none; color:inherit;
}
.stat-card:hover { box-shadow:var(--shadow-card-hover); transform:translateY(-3px); border-color:var(--brand-200); }
.stat-icon { flex-shrink:0; width:2.6rem; height:2.6rem; border-radius:.8rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem; }
.stat-body { min-width:0; flex:1; }
.stat-label { display:block; font-size:.68rem; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:600; }
.stat-value { display:block; font-size:1.4rem; font-weight:700; color:#0f172a; line-height:1.15; margin-top:.15rem; }
.stat-sub { display:block; font-size:.72rem; color:#94a3b8; margin-top:.25rem; }
.dark .stat-card { background:#0f172a; border-color:#1e293b; }
.dark .stat-value { color:#f1f5f9; }

/* Chips de acento p/ ícones */
.accent-emerald{background:#dcfce7;color:#059669;} .accent-rose{background:#ffe4e6;color:#e11d48;}
.accent-brand{background:var(--brand-100);color:var(--brand-600);} .accent-amber{background:#fef3c7;color:#d97706;}
.accent-sky{background:#e0f2fe;color:#0284c7;} .accent-violet{background:#ede9fe;color:#7c3aed;}
.accent-indigo{background:#e0e7ff;color:#4f46e5;} .accent-slate{background:#f1f5f9;color:#475569;}
.accent-orange{background:#ffedd5;color:#ea580c;} .accent-teal{background:#ccfbf1;color:#0d9488;}
.dark .accent-emerald{background:rgba(5,150,105,.18);color:#6ee7b7;} .dark .accent-rose{background:rgba(225,29,72,.18);color:#fda4af;}
.dark .accent-brand{background:rgba(37,99,235,.2);color:#93c5fd;} .dark .accent-amber{background:rgba(217,119,6,.2);color:#fcd34d;}
.dark .accent-sky{background:rgba(2,132,199,.2);color:#7dd3fc;} .dark .accent-violet{background:rgba(124,58,237,.2);color:#c4b5fd;}
.dark .accent-indigo{background:rgba(79,70,229,.2);color:#a5b4fc;} .dark .accent-slate{background:#1e293b;color:#cbd5e1;}
.dark .accent-orange{background:rgba(234,88,12,.2);color:#fdba74;} .dark .accent-teal{background:rgba(13,148,136,.2);color:#5eead4;}

/* Medalha de ranking */
.rank-badge{width:1.65rem;height:1.65rem;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;background:#f1f5f9;color:#475569;}
.rank-1{background:#fde68a;color:#92400e;} .rank-2{background:#e2e8f0;color:#475569;} .rank-3{background:#fed7aa;color:#9a3412;}

/* Scroll interno fino e visível (para listas/tabelas com muitos dados) */
.ui-scroll { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
.ui-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.ui-scroll::-webkit-scrollbar-track { background: transparent; }
.ui-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 9999px; }
.ui-scroll::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
.dark .ui-scroll { scrollbar-color: #334155 transparent; }
.dark .ui-scroll::-webkit-scrollbar-thumb { background: #334155; }
.dark .ui-scroll::-webkit-scrollbar-thumb:hover { background: #475569; }
/* Cabeçalho de tabela fixo ao rolar internamente */
.ui-scroll .ui-table thead th { position: sticky; top: 0; z-index: 1; }

/* Rodapé de instrução dos cards (dica com lâmpada, colado na base) */
.dash-hint {
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px solid #f1f5f9;
    font-size: 11px;
    line-height: 1.4;
    color: #94a3b8;
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}
.dash-hint i { color: #f59e0b; margin-top: 1px; flex-shrink: 0; }
.dark .dash-hint { border-top-color: #1e293b; color: #64748b; }

/* =====================================================================
   Treinamento — realce de conteúdo dos artigos (training-content.js)
   Aplica ícones/contexto ao HTML já salvo, sem alterar o banco.
   ===================================================================== */
.training-article { color:#334155; }
.dark .training-article { color:#cbd5e1; }

/* Índice "Neste artigo" */
.th-toc { margin:0 0 1.5rem; padding:1rem 1.1rem; border:1px solid #e2e8f0; border-radius:12px; background:#f8fafc; }
.dark .th-toc { background:#0f172a; border-color:#1e293b; }
.th-toc-title { font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#64748b; margin:0 0 .6rem; display:flex; align-items:center; gap:.4rem; }
.th-toc-list { display:flex; flex-wrap:wrap; gap:.4rem; }
.th-toc-item { display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .6rem; border-radius:5px; font-size:.78rem; font-weight:600; text-decoration:none; background:#fff; border:1px solid #e2e8f0; color:#475569; transition:all .15s ease; }
.th-toc-item:hover { transform:translateY(-1px); border-color:var(--brand-400); color:var(--brand-700); }
.dark .th-toc-item { background:#1e293b; border-color:#334155; color:#cbd5e1; }
.th-toc-item i { font-size:.72rem; }

/* Títulos de seção com ícone e tom */
.training-article .th-head { display:flex; align-items:center; gap:.6rem; scroll-margin-top:1rem; margin-top:1.6rem; margin-bottom:.7rem; font-weight:700; line-height:1.25; }
.training-article .th-head .th-ic { width:1.85rem; height:1.85rem; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; flex-shrink:0; }
.training-article .th-head .th-tx { min-width:0; }
.th-tone-brand .th-ic { background:var(--brand-100); color:var(--brand-600); }
.th-tone-ok    .th-ic { background:#dcfce7; color:#059669; }
.th-tone-warn  .th-ic { background:#fef3c7; color:#d97706; }
.th-tone-danger .th-ic { background:#ffe4e6; color:#e11d48; }
.dark .th-tone-brand .th-ic { background:rgba(37,99,235,.2); color:#93c5fd; }
.dark .th-tone-ok .th-ic { background:rgba(5,150,105,.2); color:#6ee7b7; }
.dark .th-tone-warn .th-ic { background:rgba(217,119,6,.2); color:#fcd34d; }
.dark .th-tone-danger .th-ic { background:rgba(225,29,72,.2); color:#fda4af; }

/* Checklists [ ] / [x] */
.training-article ul { list-style:none; padding-left:0; }
.training-article li.th-check { list-style:none; display:flex; align-items:flex-start; gap:.55rem; padding:.35rem .6rem; border-radius:8px; margin:.2rem 0; }
.training-article li.th-check:hover { background:#f8fafc; }
.dark .training-article li.th-check:hover { background:#1e293b; }
.training-article li.th-check .th-check-box { margin-top:.18rem; color:#94a3b8; font-size:.95rem; flex-shrink:0; }
.training-article li.th-check.is-done { color:#94a3b8; }
.training-article li.th-check.is-done .th-check-box { color:#16a34a; }
/* volta o marcador padrão para listas comuns (não-checklist) */
.training-article ul li:not(.th-check) { list-style:disc; margin-left:1.25rem; }

/* Callout de atenção/erro/restrito */
.th-callout { border-radius:12px; padding:.35rem 1rem 1rem; margin:1.2rem 0; border:1px solid; }
.th-callout .th-head { margin-top:.9rem; }
.th-callout-warn { background:#fffbeb; border-color:#fde68a; }
.th-callout-danger { background:#fef2f2; border-color:#fecaca; }
.dark .th-callout-warn { background:rgba(217,119,6,.08); border-color:rgba(217,119,6,.3); }
.dark .th-callout-danger { background:rgba(225,29,72,.08); border-color:rgba(225,29,72,.3); }

/* Ritmo/legibilidade geral do conteúdo */
.training-article p { line-height:1.7; }
.training-article ol { padding-left:1.3rem; }
.training-article ol li { margin:.3rem 0; line-height:1.6; }
.training-article table { width:100%; border-collapse:collapse; font-size:.85rem; }
.training-article th, .training-article td { border:1px solid #e2e8f0; padding:.5rem .7rem; text-align:left; }
.training-article thead th { background:#f8fafc; font-weight:700; }
.dark .training-article th, .dark .training-article td { border-color:#334155; }
.dark .training-article thead th { background:#1e293b; }

/* Contexto na modal: esconde o título grande (já está no cabeçalho da modal) e ajusta o padding */
#training-modal .tr-standalone-only { display:none; }
#training-modal .tr-article-wrap { max-width:none; margin:0; padding:1.25rem 1.5rem 0.5rem; }

/* =====================================================================
   Cabeçalho padrão das páginas (partial page_header.php)
   ===================================================================== */
.page-header__icon {
    width: 2.75rem; height: 2.75rem; border-radius: 0.9rem; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand-100); color: var(--brand-600); font-size: 1.1rem;
}
.dark .page-header__icon { background: rgba(37,99,235,.2); color: #93c5fd; }
.page-header__eyebrow {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase;
    color: #94a3b8; line-height: 1;
}
.page-header__title {
    font-size: 1.5rem; font-weight: 700; line-height: 1.15; margin-top: 0.15rem;
    color: #0f172a;
}
.dark .page-header__title { color: #f1f5f9; }
.page-header__subtitle { font-size: 0.875rem; color: #64748b; margin-top: 0.2rem; }
.dark .page-header__subtitle { color: #94a3b8; }
@media (max-width: 640px) {
    .page-header__title { font-size: 1.25rem; }
    .page-header__icon { width: 2.4rem; height: 2.4rem; font-size: 1rem; }
}
/* Chip de contagem de registros (padrão das listagens) */
.ui-count-badge {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0 0.9rem; border-radius: 8px;
    border: 1px solid #e2e8f0; background: #fff; box-shadow: var(--shadow-card);
}
.dark .ui-count-badge { background: #0f172a; border-color: #1e293b; }
.ui-count-badge .lbl { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #94a3b8; }
.ui-count-badge .val { font-size: 1rem; font-weight: 800; color: #0f172a; line-height: 1; }
.dark .ui-count-badge .val { color: #f1f5f9; }

/* TOC do usuário: controles vizinhos na linha de ações têm a MESMA altura e alinhamento */
.page-header__actions { align-items: center; }
.page-header__actions > .btn,
.page-header__actions > .ui-count-badge,
.page-header__actions > a.btn,
.page-header__actions > button.btn {
    height: 2.5rem;
    line-height: 1;
}

/* =========================================================================
 * PWA Install Banner — instalação do app (Android botão / iOS instrução)
 * =======================================================================*/
.pwa-install-banner {
    position: fixed;
    left: 50%;
    bottom: max(1rem, env(safe-area-inset-bottom));
    transform: translateX(-50%) translateY(140%);
    z-index: 11000;
    width: calc(100% - 2rem);
    max-width: 440px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.85rem;
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 14px;
    box-shadow: 0 16px 40px -8px rgba(15, 23, 42, 0.28), 0 4px 10px rgba(15, 23, 42, 0.08);
    opacity: 0;
    transition: transform .32s cubic-bezier(.22, 1.2, .36, 1), opacity .2s ease;
}
.pwa-install-banner.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}
html.dark .pwa-install-banner {
    background: #0f172a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.5);
}
.pwa-install-logo {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    flex: 0 0 auto;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.15);
}
.pwa-install-text { flex: 1 1 auto; min-width: 0; }
.pwa-install-title {
    margin: 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}
html.dark .pwa-install-title { color: #f1f5f9; }
.pwa-install-hint {
    margin: 0.15rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    color: #64748b;
}
html.dark .pwa-install-hint { color: #94a3b8; }
.pwa-install-hint i { color: var(--brand, #2563eb); }
.pwa-install-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex: 0 0 auto;
}
.pwa-install-btn {
    appearance: none;
    border: none;
    background: var(--brand, #2563eb);
    color: #fff;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s, transform .1s;
}
.pwa-install-btn:hover { filter: brightness(0.95); }
.pwa-install-btn:active { transform: scale(0.97); }
.pwa-install-close {
    appearance: none;
    border: none;
    background: transparent;
    color: #94a3b8;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: color .15s, background .15s;
}
.pwa-install-close:hover { color: #0f172a; background: rgba(15, 23, 42, 0.06); }
html.dark .pwa-install-close:hover { color: #f1f5f9; background: rgba(255, 255, 255, 0.08); }

/* =========================================================================
 * Bottom Navigation (mobile) — inspirado no pbdesk
 * =======================================================================*/
.app-bottom-nav {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 40;
    height: calc(4rem + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    align-items: stretch;
    background: #ffffff;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 16px -8px rgba(15, 23, 42, 0.15);
}
html.dark .app-bottom-nav {
    background: #0f172a;
    border-top-color: #1e293b;
}
.app-bottom-nav__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: #94a3b8;
    border: none;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
    transition: color .15s;
    -webkit-tap-highlight-color: transparent;
}
.app-bottom-nav__item i { font-size: 1.15rem; line-height: 1; }
.app-bottom-nav__item.is-active { color: var(--brand, #2563eb); }
html.dark .app-bottom-nav__item { color: #64748b; }
html.dark .app-bottom-nav__item.is-active { color: #60a5fa; }
.app-bottom-nav__item:active { transform: scale(0.94); }

/* Slot central (FAB) */
.app-bottom-nav__fab-slot {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
.app-bottom-nav__fab {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    margin-top: -1.4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.25rem;
    background: linear-gradient(135deg, var(--brand-500, #3b82f6), var(--brand-700, #1d4ed8));
    box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.55);
    border: 3px solid #ffffff;
}
html.dark .app-bottom-nav__fab { border-color: #0f172a; }
.app-bottom-nav__fab:active { transform: scale(0.95); }
.app-bottom-nav__badge {
    position: absolute;
    top: -0.35rem; right: -0.35rem;
    min-width: 1.15rem; height: 1.15rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #f43f5e;
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}
html.dark .app-bottom-nav__badge { border-color: #0f172a; }

/* =========================================================================
 * Responsivo — evita overflow horizontal de tabelas largas no mobile.
 * Itens de grid/flex têm min-width:auto por padrão e "esticam" com conteúdo
 * largo (tabelas). Deixá-los encolher ativa o overflow-auto interno (scroll
 * só na tabela, não na página inteira).
 * =======================================================================*/
main .grid > *,
main .flex > * { min-width: 0; }

/* No mobile, o banner de instalação sobe acima do bottom nav (não sobrepõe) */
@media (max-width: 1023px) {
    .pwa-install-banner {
        bottom: calc(4rem + env(safe-area-inset-bottom) + 0.75rem);
    }
}

/* =========================================================================
 * Dashboard — filtro de período recolhível no mobile + hero compacto
 * =======================================================================*/
.dash-filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
    font-size: 0.82rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dash-filter-toggle .dash-filter-period {
    margin-left: auto;
    font-size: 0.72rem;
    opacity: 0.85;
    white-space: nowrap;
}
.dash-filter-toggle .dash-filter-caret { transition: transform .2s; opacity: 0.9; }
.dash-filter-toggle.is-open .dash-filter-caret { transform: rotate(180deg); }
.dash-filter-form.dash-filter-form { margin-top: 0.6rem; }
@media (min-width: 1024px) {
    .dash-filter-form.dash-filter-form { margin-top: 0; }
}

/* Hero mais enxuto no celular — não ocupa meia tela */
@media (max-width: 1023px) {
    .dash-hero { padding: 1.05rem 1.15rem; }
    .dash-hero h1 { font-size: 1.3rem; }
    .dash-hero p.sub { font-size: 0.78rem; margin-top: 0.2rem; }
    .dash-hero .eyebrow { font-size: 0.6rem; letter-spacing: 0.25em; }
    .dash-hero { gap: 0.75rem; }
}

/* Hero mais enxuto em notebook de tela baixa (ex.: 1280x672, Dell Latitude 5430) —
   mesma ideia do ajuste mobile acima, só que disparado por ALTURA em vez de largura,
   porque em 1280 a largura já é "desktop" (form de período lado a lado). */
@media (max-height: 750px) {
    .dash-hero { padding: 0.9rem 1.25rem; gap: 0.6rem; }
    .dash-hero h1 { font-size: 1.4rem; margin-top: 0.1rem; }
    .dash-hero p.sub { font-size: 0.8rem; margin-top: 0.15rem; }
    .dash-hero .eyebrow { font-size: 0.62rem; }
    .dash-filter-form.dash-filter-form { padding-top: 0.5rem; padding-bottom: 0.5rem; }
    .dash-filter-label { display: none !important; }
    .dash-filter-input.dash-filter-input { height: 2.15rem; }

    /* Cards (Acessos Rápidos + KPIs de Financeiro/Operacional/Pessoas usam as mesmas
       classes .ui-card-pad/.stat-card/.stat-icon) — compactar aqui ganha em toda a página. */
    .ui-card-pad { padding: 0.85rem; }
    .dash-section-title { margin-bottom: 0.5rem; }
    .dash-section-title .di { width: 1.5rem; height: 1.5rem; font-size: 0.68rem; }
    .dash-section-title .dt { font-size: 0.64rem; }
    .stat-card { padding: 0.65rem 0.7rem; gap: 0.55rem; }
    .stat-icon { width: 1.85rem; height: 1.85rem; font-size: 0.78rem; }
    .stat-label { font-size: 0.6rem; line-height: 1.25; }
    .stat-value { font-size: 1.1rem; margin-top: 0.2rem; }
    .stat-sub { font-size: 0.62rem; margin-top: 0.2rem; line-height: 1.3; }
    /* Badge de variação (seta + %) dentro do stat-sub — menor pra sobrar espaço pro texto */
    .stat-sub .inline-flex { padding: 0.05rem 0.35rem !important; font-size: 0.58rem !important; }
    /* Rótulo dos cards de Acessos Rápidos (era text-sm/14px direto no PHP) */
    .qa-label { font-size: 0.8rem !important; }

    /* Espaço entre as seções do dashboard (Acessos Rápidos → Financeiro → Operacional...) */
    [data-module="dashboard-executive"] > :not([hidden]) ~ :not([hidden]) {
        margin-top: 1rem !important;
    }

    /* Recolhível genérico por ALTURA (equivalente ao data-collapse-toggle/lg:hidden que já
       existe pra mobile por LARGURA) — reutilizável em qualquer página: um botão
       [data-vp-collapse-toggle="x"] mostra/esconde o alvo [data-vp-collapse="x"].
       Handler genérico em public/js/app.js. */
    .vp-collapse-toggle { display: flex !important; }
    [data-vp-collapse] { display: none; }
    [data-vp-collapse].is-open { display: block; }

    /* Cabeçalho padrão de página (partials/page_header.php) — usado na maioria das telas
       admin (Financeiro, Pacientes, Profissionais, Relatórios...). Compactar aqui ganha
       em toda a página que o utiliza, não só na tela sendo ajustada no momento. */
    .page-header__icon { width: 2.15rem; height: 2.15rem; font-size: 0.9rem; }
    .page-header__eyebrow { font-size: 0.62rem; }
    .page-header__title { font-size: 1.2rem; margin-top: 0.1rem; }
    .page-header__subtitle { font-size: 0.78rem; margin-top: 0.1rem; }

    /* Modais de cadastro (partials/form_modern_styles.php) — usado em Pacientes,
       Profissionais e outros. Paciente tem 9 abas que quebravam em 2 linhas
       (.fm-tabs tem flex-wrap); compactando cabe tudo numa linha só, sobrando mais
       altura pra área rolável do formulário. */
    /* !important necessário: form_modern_styles.php é injetado dentro do HTML do modal
       (depois do <head> no documento), então a regra base dele vence por ordem de
       cascata mesmo com a media query batendo, se não forçarmos aqui. */
    .fm-tab { min-width: 92px !important; padding: 6px 8px !important; font-size: 11.5px !important; }
    .fm-tab i { font-size: 9.5px !important; }
    .fm-tabs { gap: 4px !important; padding: 3px !important; }
    .fm-header { padding: 10px 20px !important; }
    .fm-header-icon { width: 36px !important; height: 36px !important; font-size: 15px !important; }
    .fm-header-name { font-size: 16px !important; }
    .fm-footer { padding: 10px 20px !important; }
    .fm-section { padding-bottom: 8px !important; margin-bottom: 10px !important; }
}
.vp-collapse-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 1rem;
    border-radius: 12px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.vp-collapse-toggle .vp-collapse-caret { transition: transform .2s; }
.vp-collapse-toggle.is-open .vp-collapse-caret { transform: rotate(180deg); }

/* =========================================================================
 * Agenda / Agendamentos — filtro recolhível + status cards compactos (mobile)
 * =======================================================================*/
.appt-filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #334155;
    font-size: 0.85rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dark .appt-filter-toggle { background: #0b1220; border-color: #1e293b; color: #cbd5e1; }
.appt-filter-toggle .appt-filter-caret { transition: transform .2s; color: #94a3b8; }
.appt-filter-toggle.is-open .appt-filter-caret { transform: rotate(180deg); }

/* No mobile os cards de status ficam menores e lado a lado */
@media (max-width: 1023px) {
    .appt-status-card { padding: 0.55rem 0.7rem !important; }
    .appt-status-card .text-2xl { font-size: 1.15rem; }
    .appt-status-card .w-10 { width: 2rem; height: 2rem; font-size: 0.95rem; }
    .appt-status-card [data-status-label] { font-size: 0.6rem; }
}

/* =========================================================================
 * Cards de função (Profissionais) — filtro dinâmico visual
 * =======================================================================*/
.func-card {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.85rem 0.55rem 0.6rem;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
    -webkit-tap-highlight-color: transparent;
    min-width: 7.5rem;
}
.dark .func-card { background: #0f172a; border-color: #1e293b; }
.func-card:hover { border-color: #cbd5e1; }
.func-card:active { transform: scale(0.97); }
.func-card.is-active {
    border-color: var(--fc, #2563eb);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--fc, #2563eb) 22%, transparent);
}
.func-card__icon {
    width: 2.1rem; height: 2.1rem;
    border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fc, #2563eb);
    background: color-mix(in srgb, var(--fc, #2563eb) 12%, transparent);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.func-card__body { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.func-card__count { font-size: 1.15rem; font-weight: 800; color: #0f172a; }
.dark .func-card__count { color: #f1f5f9; }
.func-card__label {
    font-size: 0.68rem; font-weight: 600; color: #64748b;
    white-space: nowrap; max-width: 9rem; overflow: hidden; text-overflow: ellipsis;
}
.dark .func-card__label { color: #94a3b8; }

/* Conflitos expansíveis na prévia de geração de agendas */
.agenda-conflicts summary { list-style: none; }
.agenda-conflicts summary::-webkit-details-marker { display: none; }
.agenda-conflicts[open] summary .fa-chevron-right { transform: rotate(90deg); }

/* Chips de dia na prévia de geração de agenda */
.agenda-day-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-width: 2.25rem;
    height: 1.5rem;
    padding: 0 0.4rem;
    border-radius: 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    transition: transform .1s;
}
.agenda-day-chip:hover { transform: translateY(-1px); }
.agenda-day-chip.is-ok {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.agenda-day-chip.is-blocked {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}
/* Chip bloqueado é clicável — abre a modal de ação (editar agenda do outro
   paciente / ir até o agendamento dele). O "help" cursor do chip OK permanece
   (só tooltip, sem ação). */
.agenda-day-chip.is-blocked { cursor: pointer; }
.agenda-day-chip.is-blocked:hover { box-shadow: 0 0 0 2px rgba(220,38,38,.3); }
.dark .agenda-day-chip.is-ok { background: rgba(16,185,129,.15); color: #6ee7b7; border-color: rgba(16,185,129,.3); }
.dark .agenda-day-chip.is-blocked { background: rgba(239,68,68,.15); color: #fca5a5; border-color: rgba(239,68,68,.3); }

/* Stat cards da prévia (clicáveis como filtro) */
.agenda-stat-card {
    display: block;
    width: 100%;
    cursor: pointer;
    transition: transform .1s, box-shadow .15s, filter .15s;
}
.agenda-stat-card:hover { transform: translateY(-1px); filter: brightness(0.97); }
.agenda-stat-card:active { transform: translateY(0); }
.agenda-stat-card.is-active-filter {
    box-shadow: 0 0 0 2px currentColor;
    filter: brightness(0.95);
}

/* Tooltip customizado (data-tooltip) */
.agenda-tooltip {
    position: fixed;
    top: 0; left: 0;
    z-index: 15000;
    max-width: 280px;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    background: #0f172a;
    color: #f1f5f9;
    font-size: 0.72rem;
    line-height: 1.4;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s;
}
.agenda-tooltip.is-visible { opacity: 1; }
.agenda-tooltip strong { color: #fff; font-weight: 700; }

/* Estrutura interna do tooltip (agenda-tooltip) */
.agenda-tooltip .tt-when { font-weight: 700; color: #fff; margin-bottom: 2px; }
.agenda-tooltip .tt-line { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
.agenda-tooltip .tt-msg { margin-top: 3px; color: #94a3b8; font-size: 11px; line-height: 1.35; }
.agenda-tooltip .tt-occupant { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(148,163,184,.25); color: #e2e8f0; font-size: 11px; line-height: 1.35; display: flex; align-items: center; gap: 0.35rem; }
.agenda-tooltip .tt-occupant strong { color: #fbbf24; }