/* ═══════════════════════════════════════════════════════════
   TEMA — paleta compartilhada (home, comunicado, registro)
   Claro é o padrão; escuro via data-theme="dark" no <html>,
   aplicado pelo partial broadcast_test/_tema_init.html.
   ═══════════════════════════════════════════════════════════ */

:root {
    color-scheme: light;

    --paper:        #f4f5f8;               /* fundo da página */
    --surface:      #ffffff;               /* cartões, tabela, formulários */
    --surface-2:    #f8f9fb;               /* campos, hover */
    --paper-line:   #e3e6ec;               /* divisórias */
    --ink:          #0f172a;               /* texto principal */
    --ink-soft:     #5b6475;               /* texto secundário (AA sobre --paper) */
    --accent:       #A23F5D;
    --accent-hot:   #a71555;               /* magenta da marca: ação principal */
    --accent-deep:  #7a0f3f;               /* hover/pressed do acento */
    --accent-tint:  rgba(167,21,85,0.08);
    --accent-ring:  rgba(167,21,85,0.16);
    --danger:       #dc2626;
    --danger-tint:  #fef2f2;
    --success:      #16a34a;
    --shadow-sm:    0 1px 2px rgba(15,23,42,0.05);
    --shadow-md:    0 1px 2px rgba(15,23,42,0.04), 0 8px 24px -12px rgba(15,23,42,0.14);
    --radius-lg:    16px;
    --thead-bg:     #e9edf5;
    --thead-line:   #d9dfea;
    --icon-muted:   #475569;
    --text-disabled:#a0a7b5;
    --navy:         #020817;               /* sidebar, navbar, painéis escuros */
    --focus-ring-light: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-hot);
    --font-display: "Nunito", "Poppins", sans-serif;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --paper:        #0b1120;
    --surface:      #111a2e;
    --surface-2:    #16213a;
    --paper-line:   #24314d;
    --ink:          #e6eaf2;
    --ink-soft:     #9aa5b8;
    --accent-hot:   #d6336c;               /* mais claro: contraste em fundo escuro */
    --accent-deep:  #b0245a;
    --accent-tint:  rgba(214,51,108,0.16);
    --accent-ring:  rgba(214,51,108,0.28);
    --danger:       #f87171;
    --danger-tint:  rgba(248,113,113,0.1);
    --success:      #4ade80;
    --thead-bg:     #1a2642;
    --thead-line:   #2b3a5a;
    --icon-muted:   #a8b3c7;
    --text-disabled:#5d6a82;
    --shadow-sm:    0 1px 2px rgba(0,0,0,0.3);
    --shadow-md:    0 1px 2px rgba(0,0,0,0.3), 0 12px 32px -14px rgba(0,0,0,0.6);
}

/* Botão redondo de tema (páginas sem sidebar) */
.theme-toggle {
    display: inline-grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--paper-line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--ink-soft);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: color .2s ease, border-color .2s ease, background .2s ease;
}

.theme-toggle:hover {
    color: var(--accent-hot);
    border-color: var(--accent-ring);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-light);
}

/* Mostra a lua no claro (ir para escuro) e o sol no escuro */
.theme-toggle .bx-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .bx-sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .bx-moon { display: none; }

:root.tema-trocando *,
:root.tema-trocando *::before,
:root.tema-trocando *::after {
    transition: none !important;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: .25s;
    animation-timing-function: ease;
}