/* =====================================================================
   Vamos de Bahêa — Painel da agência
   Identidade: azul-marinho e branco da logo, tipografia Plus Jakarta Sans.
   ===================================================================== */

@font-face { font-family: 'Jakarta'; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url('../assets/fonts/jakarta-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Jakarta'; font-style: normal; font-display: swap; font-weight: 200 800;
    src: url('../assets/fonts/jakarta-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
    /* Marca — o azul-marinho da logo e seus tons */
    --navy: #00113d;          /* cor oficial da logo */
    --navy-2: #0a2263;
    --navy-3: #173a8c;
    --brand-50: #eef2fa; --brand-100: #dfe6f5; --brand-200: #bfcceb; --brand-300: #8fa3d6;
    --brand-400: #5572b8; --brand-500: #1f3f94; --brand-600: #13307a; --brand-700: #0a2263;

    /* Neutros levemente azulados */
    --n-0: #ffffff; --n-25: #fafbfd; --n-50: #f3f5f9; --n-100: #e9edf4; --n-150: #dde2ec;
    --n-200: #c9d0de; --n-300: #a7b0c4; --n-400: #7d879f; --n-500: #5a637b; --n-600: #414960;
    --n-700: #2c3246; --n-800: #1a1f30; --n-900: #0c1122;

    /* Feedback */
    --success-50: #e8f6ef; --success-500: #12945a; --success-600: #0c7446;
    --warning-50: #fff5e0; --warning-500: #e59a0b; --warning-600: #c47d05;
    --danger-50: #fdeef1; --danger-500: #e23a57; --danger-600: #c81f3e;

    /* Semânticos */
    --bg: var(--n-50);
    --surface: var(--n-0);
    --surface-2: var(--brand-50);
    --text: var(--n-900);
    --text-muted: var(--n-500);
    --text-subtle: var(--n-400);
    --border: var(--n-150);
    --border-strong: var(--n-200);
    --primary: var(--navy);
    --primary-hover: var(--navy-2);
    --primary-ink: var(--brand-500);
    --sidebar: var(--navy);
    --ink: var(--navy);           /* títulos e textos de destaque sobre superfícies */
    --accent-ink: var(--navy);    /* ícones/textos de destaque na cor da marca */
    --barra-topo: var(--navy);    /* barra do topo no celular (emenda com o theme-color) */
    --veu-4: rgba(0, 17, 61, .04); --veu-5: rgba(0, 17, 61, .05);
    --veu-8: rgba(0, 17, 61, .08); --veu-9: rgba(0, 17, 61, .09);

    --r-xs: 6px; --r-sm: 8px; --r-md: 10px; --r-lg: 14px; --r-xl: 16px; --r-full: 999px;

    --shadow-sm: 0 1px 2px rgba(0, 17, 61, .06);
    --shadow-md: 0 2px 4px rgba(0, 17, 61, .05), 0 10px 24px rgba(0, 17, 61, .08);
    --shadow-lg: 0 20px 50px rgba(0, 17, 61, .18);

    --ease: cubic-bezier(.2, .8, .2, 1);
    --dur: 180ms;

    --font: 'Jakarta', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --sidebar-w: 248px;
    /* Inclui a área da barra de status do celular no app instalado (iPhone com recorte); 0 no resto. */
    --topbar-h: calc(68px + env(safe-area-inset-top, 0px));

    /* Camadas (z-index). Os <dialog> abertos ficam na camada do topo, acima de tudo isto. */
    --z-topbar: 30;
    --z-menu-fundo: 35;   /* fundo escuro do menu no celular */
    --z-menu: 40;         /* menu lateral */
    --z-popover: 60;      /* menus e listas flutuantes */
    --z-toast: 65;        /* avisos fixos embaixo (atualização, conexão, cookies) */
    --z-overlay: 70;      /* área de soltar arquivos */
    --z-saudacao: 9000;
    --z-confete: 9999;
    color-scheme: light;
}

/* ---------- Tema escuro ----------
   Ligado por /js/tema.js (data-tema no <html>). Os tons são invertidos: o que era fundo claro vira
   azul-marinho quase preto e o que era texto escuro vira claro. Elementos "primários" (botões, bolhas
   próprias, item ativo) usam um azul mais vivo para não sumirem no fundo. */
:root[data-tema="escuro"] {
    color-scheme: dark;
    --brand-50: #16213d; --brand-100: #1d2b50; --brand-200: #2a3c6b; --brand-300: #4a64a8;
    --brand-400: #7f98d8; --brand-500: #8eaaf0; --brand-600: #a8bef5; --brand-700: #c5d4f8;

    --n-0: #121a2e; --n-25: #151f35; --n-50: #0e1528; --n-100: #1c2741; --n-150: #26324d;
    --n-200: #33405e; --n-300: #4d5a77; --n-400: #7f8ba5; --n-500: #9aa6bf; --n-600: #b0bacf;
    --n-700: #c6cede; --n-800: #dbe1ec; --n-900: #e7ebf3;

    --success-50: #0f2b20; --success-600: #5fd19c;
    --warning-50: #2e2410; --warning-600: #f2bd55;
    --danger-50: #33161f; --danger-600: #ff8a9d;

    --bg: #0a0f1e;
    --surface: #121a2e;
    --elevado: #18223a;
    --campo: #0e1528;
    --text: #e7ebf3;
    --text-muted: #9aa6bf;
    --text-subtle: #7f8ba5;
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .14);
    --primary: #2f5bd3;
    --primary-hover: #3d6be0;
    --sidebar: #08112b;
    --ink: #eef2fb;
    --accent-ink: var(--brand-500);
    --barra-topo: #08112b;
    --veu-4: rgba(255, 255, 255, .04); --veu-5: rgba(255, 255, 255, .06);
    --veu-8: rgba(255, 255, 255, .09); --veu-9: rgba(255, 255, 255, .1);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .25), 0 10px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 20px 50px rgba(0, 0, 0, .55);
}
/* Painéis que flutuam (modais, menus, listas) ficam um tom acima do cartão */
:root[data-tema="escuro"] :is(dialog.modal, .notif-painel, .bloqueio-cartao, .presenca-lista, .menu-contexto, .acesso-seletor,
    .mencoes, .reacoes-flutuante, .reacoes-lista, .emoji-seletor, .anexar-menu, .enquete-foto-origem) { --surface: var(--elevado); --n-25: #1c2742; }
/* Fundos azul-marinho fixos (faixas, heróis): mantêm os tons claros da marca para o texto */
:root[data-tema="escuro"] :is(.sidebar, .boas-vindas, .hoje-destaque, .faixa-aniversario, .saudacao, .login-marca, .aviso-cookies, .priv-hero, .priv-como, .toast, .aviso-atualizacao) {
    --brand-50: #eef2fa; --brand-100: #dfe6f5; --brand-200: #bfcceb; --brand-300: #8fa3d6; --brand-400: #5572b8;
}
/* Troca de tema suave (só quando o usuário muda; o tema.js liga a classe por um instante) */
html.tema-trocando, html.tema-trocando *, html.tema-trocando *::before, html.tema-trocando *::after {
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, fill .2s ease !important;
}
@media (prefers-reduced-motion: reduce) {
    html.tema-trocando, html.tema-trocando *, html.tema-trocando *::before, html.tema-trocando *::after { transition: none !important; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    min-height: 100dvh;
}
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
img, video, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 6px; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
::selection { background: var(--brand-100); }
.num { font-variant-numeric: tabular-nums; }

.icon {
    width: 18px; height: 18px; flex-shrink: 0;
    fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.icon-sm { width: 15px; height: 15px; }
.icon-lg { width: 22px; height: 22px; }
.spin { animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Rótulo pequeno acima dos títulos */
.eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-400); }

/* Selo no formato do "DE" da logo */
.selo {
    display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 4px;
    background: #fff; color: var(--navy); font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- Layout ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100dvh; }

.sidebar {
    position: sticky; top: 0; height: 100dvh;
    display: flex; flex-direction: column;
    background: var(--sidebar); color: #fff;
    z-index: var(--z-menu);
}
.sidebar-marca { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 24px 22px 22px; }
.sidebar-marca img { height: 46px; width: auto; }


.nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 4px 12px; overflow-y: auto; }
.nav-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .4); padding: 18px 12px 6px; }
.nav a {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border-radius: var(--r-md);
    font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .72);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.nav a[aria-current="page"] { background: #fff; color: var(--ink); }
.nav a[aria-current="page"] .icon { color: var(--brand-500); }
.nav .contador {
    margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-full);
    display: grid; place-items: center; font-size: 11px; font-weight: 800;
    background: var(--danger-500); color: #fff;
}

.sidebar-footer { border-top: 1px solid rgba(255, 255, 255, .1); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 2px; }
.sidebar-user { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--r-md); transition: background-color var(--dur); }
.sidebar-user:hover { background: rgba(255, 255, 255, .08); }
.sidebar-user .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25); }
.sidebar-user-info { min-width: 0; line-height: 1.3; }
.sidebar-user-info strong { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user-info span { font-size: 12px; color: rgba(255, 255, 255, .55); }
.btn-sair { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); width: 100%; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .65); transition: background-color var(--dur), color var(--dur); }
.btn-sair:hover { background: rgba(226, 58, 87, .18); color: #ffc2cd; }
.btn-instalar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); width: 100%; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .65); transition: background-color var(--dur), color var(--dur); }
.btn-instalar:hover { background: rgba(255, 255, 255, .08); color: #fff; }

.main { min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: var(--z-topbar);
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 14px;
    padding: 0 32px;
    background: rgba(243, 245, 249, .9);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0px);
}
.topbar-titulo { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.02em; }
.topbar-acoes { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-icone.btn-menu { display: none; }

.conteudo { padding: 28px 32px 56px; width: 100%; max-width: 1320px; }

/* ---------- Avatares ---------- */
.avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--n-100); flex-shrink: 0; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 96px; height: 96px; }

/* ---------- Botões ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 42px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid transparent;
    font-weight: 700; font-size: 14px; white-space: nowrap; user-select: none;
    transition: background-color var(--dur) var(--ease), border-color var(--dur), color var(--dur), box-shadow var(--dur), transform .1s;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn-primario { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primario:hover:not(:disabled) { background: var(--navy-3); }
.btn-secundario { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn-secundario:hover:not(:disabled) { border-color: var(--primary); }
.btn-fantasma { background: transparent; color: var(--text-muted); border-color: var(--border-strong); }
.btn-fantasma:hover:not(:disabled) { color: var(--ink); border-color: var(--primary); }
.btn-branco { background: #fff; color: var(--navy); }
.btn-branco:hover:not(:disabled) { background: var(--brand-50); }
.btn-contorno-claro { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-contorno-claro:hover:not(:disabled) { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-perigo { background: var(--danger-600); color: #fff; }
.btn-perigo:hover:not(:disabled) { background: #a8162f; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-bloco { width: 100%; height: 48px; font-size: 15px; }

.btn-icone {
    width: 40px; height: 40px; border-radius: var(--r-md);
    display: inline-grid; place-items: center; color: var(--n-600);
    border: 1px solid var(--border); background: var(--surface);
    transition: border-color var(--dur), color var(--dur), background-color var(--dur);
    position: relative;
}
.btn-icone:hover { border-color: var(--primary); color: var(--ink); }
.btn-icone.sm { width: 32px; height: 32px; border-radius: var(--r-sm); }
.btn-icone.nu { border-color: transparent; background: transparent; color: var(--text-subtle); }
.btn-icone.nu:hover { background: var(--n-100); color: var(--ink); }
.btn-icone.perigo:hover { border-color: var(--danger-500); color: var(--danger-600); background: var(--danger-50); }
.btn-icone[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

.badge-ponto {
    position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: var(--r-full); background: var(--danger-500); color: #fff; border: 2px solid var(--bg);
    font-size: 10px; font-weight: 800; display: grid; place-items: center; line-height: 1;
}

/* ---------- Cabeçalho de página ---------- */
.cabecalho { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.cabecalho h2 { font-size: clamp(24px, 2.6vw, 30px); color: var(--ink); margin-top: 4px; }
.cabecalho p { color: var(--text-muted); margin-top: 4px; max-width: 62ch; }

/* ---------- Cartões ---------- */
.cartao { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-sm); }
.bloco { padding: 22px 24px; }
.bloco-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.bloco-topo h3 { font-size: 16px; font-weight: 800; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; color: var(--ink); }
.link { color: var(--brand-500); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Formulários ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo + .campo, .campo + .linha, .linha + .campo, .linha + .linha { margin-top: 16px; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.linha > .campo { margin-top: 0; }
.rotulo { font-size: 13px; font-weight: 700; color: var(--n-700); }
.dica { font-size: 12.5px; color: var(--text-subtle); }
.input, .select, .textarea {
    width: 100%; height: 44px; padding: 0 14px;
    background: var(--campo, var(--surface)); border: 1px solid var(--border-strong); border-radius: var(--r-md);
    font-size: 15px; color: var(--text);
    transition: border-color var(--dur), box-shadow var(--dur);
}
.input::placeholder, .textarea::placeholder { color: var(--n-300); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--n-300); }
.textarea { height: auto; min-height: 140px; padding: 12px 14px; resize: vertical; line-height: 1.6; }
.select {
    appearance: none; padding-right: 38px; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%237d879f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
}
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: 0 0 0 3px rgba(31, 63, 148, .15); }
.input:disabled { background: var(--n-50); color: var(--text-subtle); }
.input-icone { position: relative; }
.input-icone > .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.input-icone .input { padding-left: 42px; }
.input-icone .btn-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.input-icone:has(.btn-olho) .input { padding-right: 46px; }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; user-select: none; }
.check input { width: 18px; height: 18px; accent-color: var(--primary); cursor: pointer; }
.checks-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--n-25); }

.busca { position: relative; min-width: 260px; }
.busca .icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }
.busca .input { padding-left: 40px; height: 42px; }
.barra-filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.barra-filtros .select { height: 42px; min-width: 200px; }

/* Filtros */
.segmentado {
    display: inline-flex; max-width: 100%; padding: 4px; gap: 2px; background: var(--n-100); border-radius: var(--r-md);
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; /* no celular rola de lado em vez de quebrar linha */
}
.segmentado::-webkit-scrollbar { display: none; }
.segmentado button {
    display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; white-space: nowrap;
    height: 34px; padding: 0 14px; border-radius: var(--r-sm);
    font-size: 13.5px; font-weight: 700; color: var(--text-muted);
    transition: background-color var(--dur), color var(--dur), box-shadow var(--dur);
}
.segmentado button:hover { color: var(--ink); }
.segmentado button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.segmentado .qtd { font-size: 12px; font-weight: 700; color: var(--text-subtle); }
.segmentado .qtd:empty { display: none; }

/* ---------- Etiquetas ---------- */
.tag {
    display: inline-flex; align-items: center; gap: 5px;
    height: 24px; padding: 0 9px; border-radius: var(--r-xs);
    font-size: 12px; font-weight: 700; white-space: nowrap; letter-spacing: 0;
    background: var(--brand-50); color: var(--brand-500);
}
.tag-escura { background: var(--primary); color: #fff; }
.tag-perigo { background: var(--danger-50); color: var(--danger-600); }
.tag-neutra { background: var(--n-100); color: var(--n-600); }

/* ---------- Estados vazios ---------- */
.vazio { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 48px 20px; color: var(--text-muted); }
.vazio .icon { width: 28px; height: 28px; color: var(--n-300); margin-bottom: 4px; }
.vazio strong { color: var(--ink); font-weight: 700; font-size: 15px; }
.vazio-mini { padding: 28px 10px; font-size: 14px; }
.vazio-mini .icon { width: 22px; height: 22px; }

/* ---------- Modais ---------- */
dialog.modal {
    width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
    margin: auto; padding: 0; border: 0; border-radius: var(--r-xl);
    background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
    overflow: hidden;
}
dialog.modal[open] { display: flex; flex-direction: column; animation: modalEntra .22s var(--ease); }
dialog.modal::backdrop { background: rgba(0, 17, 61, .45); animation: fundoEntra .2s ease-out; }
dialog.modal.largo { width: min(760px, calc(100vw - 32px)); }
dialog.modal.estreito { width: min(440px, calc(100vw - 32px)); }
@keyframes modalEntra { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes fundoEntra { from { opacity: 0; } }
.modal-topo { display: flex; align-items: center; gap: 12px; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-topo h3 { font-size: 18px; color: var(--ink); }
.modal-topo .btn-icone { margin-left: auto; }
.modal-corpo { padding: 20px 22px; overflow-y: auto; }
.modal-rodape { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--n-25); }
.modal form { display: contents; }

.confirmar-icone { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--danger-50); color: var(--danger-600); margin-bottom: 14px; }
.confirmar-icone.neutro { background: var(--brand-50); color: var(--brand-500); }
.confirmar-icone .icon { width: 22px; height: 22px; }
.confirmar-texto { padding-top: 24px; }
.confirmar-texto h3 { font-size: 19px; color: var(--ink); margin-bottom: 6px; }
.confirmar-texto p { color: var(--text-muted); }

/* ---------- Toasts (camada do topo: ficam acima de modais) ---------- */
.toasts {
    position: fixed; inset: auto 20px calc(20px + env(safe-area-inset-bottom)) auto; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible;
    display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.toasts:popover-open { display: flex; }
.toast {
    display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 400px;
    padding: 12px 16px; border-radius: var(--r-lg);
    background: var(--navy); color: #fff;
    box-shadow: var(--shadow-lg); font-size: 14px; font-weight: 600; pointer-events: auto;
    animation: toastEntra .28s var(--ease);
}
.toast-icone { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .15); color: #fff; flex-shrink: 0; }
.toast-icone .icon { width: 14px; height: 14px; stroke-width: 2.6; }
.toast.ok .toast-icone { background: var(--success-500); }
.toast.erro .toast-icone { background: var(--danger-500); }
.toast.sai { animation: toastSai .2s ease-in forwards; }
/* Aviso com ação (ex.: "Desfazer") */
.toast-texto { flex: 1; min-width: 0; }
.toast.com-acao { padding-right: 8px; }
.toast-acao {
    flex: none; height: 32px; padding: 0 12px; margin: -4px 0; border-radius: var(--r-sm);
    font: inherit; font-size: 13.5px; font-weight: 800; color: #fff; background: rgba(255, 255, 255, .14);
    transition: background .15s var(--ease);
}
.toast-acao:hover { background: rgba(255, 255, 255, .24); }
.toast-acao:active { background: rgba(255, 255, 255, .3); }
.toast-acao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@keyframes toastEntra { from { opacity: 0; transform: translateY(10px); } }
@keyframes toastSai { to { opacity: 0; transform: translateY(6px); } }

/* ---------- Notificações ---------- */
.notif { position: relative; }
.notif-painel {
    position: absolute; right: 0; top: calc(100% + 10px); width: 360px; max-width: calc(100vw - 24px);
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
    overflow: hidden; transform-origin: top right; animation: popEntra .16s var(--ease);
}
@keyframes popEntra { from { opacity: 0; transform: scale(.97) translateY(-4px); } }
.notif-topo { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.notif-topo strong { font-size: 15px; font-weight: 800; color: var(--ink); }
.notif-lista { max-height: 380px; overflow-y: auto; }
/* Celular: o painel ocupa a largura da tela (com margem) e cabe na altura, em vez de sair pela lateral. */
@media (max-width: 600px) {
    .notif-painel { position: fixed; left: 12px; right: 12px; top: calc(var(--topbar-h, 64px) + 8px); width: auto; max-width: none; }
    .notif-lista { max-height: calc(100dvh - var(--topbar-h, 64px) - 140px); }
}
.notif-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background-color var(--dur); }
.notif-item:last-child { border-bottom: 0; }
.notif-item:hover { background: var(--n-25); }
.notif-item .bolinha { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-500); flex-shrink: 0; }
.notif-item.importante .bolinha { background: var(--danger-50); color: var(--danger-600); }
.notif-item strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.35; }
.notif-item.nao-lido strong::after { content: ''; display: inline-block; width: 7px; height: 7px; margin-left: 6px; border-radius: 50%; background: var(--danger-500); vertical-align: middle; }
.notif-item span { font-size: 12px; color: var(--text-subtle); }

.usuario-topo { display: flex; align-items: center; gap: 10px; padding: 4px 4px 4px 12px; border-radius: var(--r-full); transition: background-color var(--dur); }
.usuario-topo:hover { background: var(--n-100); }
.usuario-topo-info { line-height: 1.25; text-align: right; }
.usuario-topo-info strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.usuario-topo-info span { font-size: 11.5px; color: var(--text-subtle); }


/* ---------- Cores dos cargos (etiquetas, capas e amostras) ---------- */
.tag-cor-marinho  { background: #e3e8f4; color: #00113d; }
.tag-cor-azul     { background: #e4ecfd; color: #1f3f94; }
.tag-cor-roxo     { background: #efe9fb; color: #5a38b0; }
.tag-cor-rosa     { background: #fce8f0; color: #b02a62; }
.tag-cor-vermelho { background: #fde9e9; color: #b42323; }
.tag-cor-laranja  { background: #fdefe1; color: #b55a0c; }
.tag-cor-amarelo  { background: #fcf4d6; color: #8a6800; }
.tag-cor-verde    { background: #e3f5ec; color: #11704a; }
.tag-cor-turquesa { background: #dff4f3; color: #0d6e6e; }
.tag-cor-cinza    { background: var(--n-100); color: var(--n-600); }

.capa-cor-marinho, .cor-marinho   { --cor: #00113d; }
.capa-cor-azul, .cor-azul         { --cor: #1f3f94; }
.capa-cor-roxo, .cor-roxo         { --cor: #5a38b0; }
.capa-cor-rosa, .cor-rosa         { --cor: #c2336f; }
.capa-cor-vermelho, .cor-vermelho { --cor: #c12b2b; }
.capa-cor-laranja, .cor-laranja   { --cor: #d0680f; }
.capa-cor-amarelo, .cor-amarelo   { --cor: #c89b06; }
.capa-cor-verde, .cor-verde       { --cor: #14805a; }
.capa-cor-turquesa, .cor-turquesa { --cor: #0f7f7f; }
.capa-cor-cinza, .cor-cinza       { --cor: #5a637b; }
[class*="capa-cor-"] { background-color: var(--cor, var(--navy)); }

/* ---------- Abas ---------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.abas button {
    display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: -1px;
    font-size: 14px; font-weight: 700; color: var(--text-muted); border-bottom: 2px solid transparent;
    transition: color var(--dur), border-color var(--dur);
}
.abas button:hover { color: var(--ink); }
.abas button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--primary); }

/* ---------- Responsivo ---------- */
.overlay-menu { display: none; }

@media (max-width: 1024px) {
    .app { grid-template-columns: minmax(0, 1fr); }
    .sidebar {
        position: fixed; inset: 0 auto 0 0; width: min(280px, 84vw);
        transform: translateX(-100%); transition: transform .3s var(--ease);
        box-shadow: var(--shadow-lg);
    }
    .app.menu-aberto .sidebar { transform: none; }
    .overlay-menu { display: block; position: fixed; inset: 0; background: rgba(0, 17, 61, .5); z-index: var(--z-menu-fundo); opacity: 0; pointer-events: none; transition: opacity .25s; }
    .app.menu-aberto .overlay-menu { opacity: 1; pointer-events: auto; }
    .btn-icone.btn-menu { display: inline-grid; }
    .topbar { padding: 0 16px; }
    .conteudo { padding: 22px 16px 40px; }
    .usuario-topo-info { display: none; }
    .usuario-topo { padding: 0; }
}
@media (max-width: 600px) {
    .linha, .checks-grade { grid-template-columns: 1fr; }
    .busca { min-width: 0; flex: 1 1 100%; }
    .barra-filtros .select { flex: 1; }
    .toasts { inset: auto 16px calc(16px + env(safe-area-inset-bottom)) 16px; }
    .toast { min-width: 0; max-width: none; }
    .modal-rodape { flex-direction: column-reverse; }
    .modal-rodape .btn { width: 100%; }
    .input, .select, .textarea { font-size: 16px; } /* evita zoom automático no iPhone */
}
/* Tela de toque: campos com 16px (evita o zoom automático do iPhone) e alvos de toque maiores */
@media (pointer: coarse) {
    .input, .select, .textarea { font-size: 16px; }
    .btn-icone.sm::before { content: ''; position: absolute; inset: -4px; } /* área de toque de 40px sem mudar o visual */
}

@media (hover: none) {
    .btn-icone:hover { border-color: var(--border); color: var(--n-600); }
}

/* Celular/tablet: barra do topo em azul-marinho, emendando com a barra de status (theme-color) */
@media (max-width: 1024px) {
    .topbar {
        background: var(--barra-topo); border-bottom-color: rgba(255, 255, 255, .08);
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
    .topbar-titulo { color: #fff; }
    .topbar > .btn-icone, .topbar .notif > .btn-icone,
    .topbar > .btn-icone:hover, .topbar .notif > .btn-icone:hover {
        background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .14); color: #fff;
    }
    .topbar .notif > .btn-icone[aria-expanded="true"] { background: rgba(255, 255, 255, .2); }
    .topbar .notif > .btn-icone .badge-ponto { border-color: var(--barra-topo); }
    .topbar .usuario-topo:hover { background: rgba(255, 255, 255, .1); }
    .topbar .usuario-topo .avatar { box-shadow: 0 0 0 2px rgba(255, 255, 255, .22); }
    .topbar > .btn-icone:focus-visible, .topbar .notif > .btn-icone:focus-visible, .topbar .usuario-topo:focus-visible { outline-color: #fff; }
}
@media (max-width: 1024px) and (hover: hover) {
    .topbar > .btn-icone:hover, .topbar .notif > .btn-icone:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .3); }
}

/* Foco do teclado visível sobre fundos azul-marinho */
.sidebar :focus-visible, .boas-vindas :focus-visible, .saudacao :focus-visible, .saudacao:focus-visible,
.faixa-aniversario :focus-visible, .toast :focus-visible, .aviso-atualizacao :focus-visible,
.presenca-escura .presenca-botao:focus-visible { outline-color: #fff; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Sino: texto da notificação e rodapé */
.notif-item em { display: block; font-style: normal; font-size: 12.5px; color: var(--text-muted); line-height: 1.4; margin: 2px 0; }
.notif-item.tipo-seguranca .bolinha { background: var(--warning-50); color: var(--warning-600); }
.notif-item.tipo-aviso-importante .bolinha { background: var(--danger-50); color: var(--danger-600); }
.notif-topo .link { font-size: 12.5px; }
.notif-rodape { display: block; padding: 11px 16px; border-top: 1px solid var(--border); text-align: center; font-size: 13px; font-weight: 700; color: var(--brand-500); }
.notif-rodape:hover { background: var(--n-25); color: var(--ink); }

/* ---------- Rascunho recuperado ---------- */
.rascunho-aviso {
    display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 8px 8px 8px 12px;
    border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-600); font-size: 13px; font-weight: 600;
}
.rascunho-aviso .btn { margin-left: auto; }

/* ---------- Barras de rolagem ---------- */
/* Finas, sem setas, no tom azulado do painel (Chrome, Edge, Firefox). */
* { scrollbar-width: thin; scrollbar-color: var(--n-200) transparent; }
*:hover { scrollbar-color: var(--n-300) transparent; }
/* Safari (Mac/iPhone) ainda usa o modelo antigo */
@supports not (scrollbar-width: thin) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--n-300); }
    ::-webkit-scrollbar-button { display: none; }
}
.sidebar, .sidebar * { scrollbar-color: rgba(255, 255, 255, .22) transparent; }

/* ---------- Tela de bloqueio por inatividade ---------- */
dialog.tela-bloqueio {
    width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 16px;
    border: 0; background: transparent; display: none;
}
dialog.tela-bloqueio[open] { display: grid; place-items: center; animation: fundoEntra .25s ease-out; }
/* Fundo bem fechado: o conteúdo atrás não dá para ler */
dialog.tela-bloqueio::backdrop { background: rgba(0, 17, 61, .92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.bloqueio-cartao {
    width: min(380px, 100%); display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 32px 28px 24px; text-align: center;
    background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
}
.bloqueio-cartao .avatar { border: 3px solid var(--brand-100); }
.bloqueio-selo {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--r-full);
    background: var(--brand-50); color: var(--brand-600); font-size: 12.5px; font-weight: 700;
}
.bloqueio-cartao h2 { font-size: 22px; color: var(--ink); }
.bloqueio-cartao p { font-size: 14px; color: var(--text-muted); }
.bloqueio-cartao .input { text-align: center; }
.bloqueio-erro { color: var(--danger-600) !important; font-weight: 600; font-size: 13.5px; }
.bloqueio-cartao .link { margin-top: 4px; font-size: 13px; }

/* Tela "Você foi desconectado" (usa o mesmo fundo da tela de bloqueio) */
.desconectado-icone { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--danger-50); color: var(--danger-600); }
.desconectado-icone .icon { width: 26px; height: 26px; }

/* Aviso "o painel foi atualizado" (aba aberta durante uma atualização) */
.aviso-atualizacao {
    position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast);
    display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: var(--r-lg);
    background: var(--navy); color: #fff; font-size: 14px; font-weight: 600; box-shadow: var(--shadow-lg);
    max-width: calc(100vw - 32px);
}
.aviso-atualizacao.aviso-conexao { background: var(--danger-600); padding: 10px 16px; }

/* Arquivo do computador sendo arrastado por cima de "Arquivos"/"Mídia" no menu */
.nav a.recebe-arrasto { background: var(--brand-500); color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.nav a.recebe-arrasto .icon { color: #fff; }

/* Emojis desenhados do painel (iguais em qualquer aparelho) */
img.emoji { display: inline-block; width: 1.25em; height: 1.25em; max-width: none; vertical-align: -0.25em; object-fit: contain; }
span.emoji-texto { display: inline-block; line-height: 1; }

/* Enviar na Geralzona (a partir de Arquivos/Mídia) */
.gz-previa { position: relative; width: 100%; max-height: 260px; border-radius: 12px; overflow: hidden; background: var(--n-100); display: grid; place-items: center; }
.gz-previa img { max-width: 100%; max-height: 260px; object-fit: contain; }
.gz-previa .item-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.gz-nome { margin: 8px 0 12px; font-size: 13px; color: var(--text-muted); word-break: break-word; }
.gz-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--warning-50); color: var(--warning-600); font-size: 13px; }
.gz-aviso .icon { flex-shrink: 0; margin-top: 1px; }

/* ---------- Ícone próprio de cada tipo de arquivo (folha com a sigla) e miniaturas ---------- */
.icone-formato { position: relative; display: inline-grid; place-items: center; width: 56px; height: 64px; color: var(--cor-formato, var(--n-500)); }
.icone-formato .icon { width: 100%; height: 100%; stroke-width: 1.2; fill: var(--n-0); }
.icone-formato b {
    position: absolute; left: 50%; bottom: 22%; transform: translateX(-50%);
    padding: 1px 5px; border-radius: 4px; background: var(--cor-formato, var(--n-500)); color: #fff;
    font-size: 11px; font-weight: 800; letter-spacing: .02em; line-height: 1.3;
}
.icone-formato.pequeno { width: 22px; height: 26px; }
.icone-formato.pequeno b { font-size: 6.5px; padding: 0 2px; border-radius: 2px; }
.icone-formato.cor-azul { --cor-formato: #1f5fbf; }
.icone-formato.cor-azul-escuro { --cor-formato: #1f3f94; }
.icone-formato.cor-laranja { --cor-formato: #c4610f; }
.icone-formato.cor-vermelho { --cor-formato: #c62f3f; }
.icone-formato.cor-verde { --cor-formato: #13804f; }
.icone-formato.cor-cinza { --cor-formato: #5a637b; }
.mini-icone { display: grid; place-items: center; color: var(--n-400); }
.mini-icone .icon { width: 30px; height: 30px; stroke-width: 1.5; }
/* A miniatura fica por cima do ícone; se não existir, ela some e o ícone aparece. */
img.mini-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: var(--n-100); }
.gz-previa { min-height: 140px; }
.gz-previa img.mini-img { object-fit: contain; }

/* Aviso de privacidade (primeiro acesso) */
.aviso-privacidade { max-width: 520px; }
.aviso-privacidade .modal-corpo { padding-top: 26px; }
.aviso-privacidade-icone { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-500); margin-bottom: 12px; }
.aviso-privacidade h3 { font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.aviso-privacidade ul { margin: 10px 0 12px; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; color: var(--n-700); }
.aviso-privacidade a { color: var(--primary-ink); font-weight: 600; text-decoration: underline; }
.aviso-privacidade .modal-rodape .btn { width: 100%; justify-content: center; }

/* ---------- Aniversário (no dia, para a pessoa e para a equipe) ---------- */
@property --aniv-giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
img.avatar.aniversariante {
    padding: 2px;
    background: conic-gradient(from var(--aniv-giro), #e8b930, #fff3c4, #1f3f94, #00113d, #e8b930);
    animation: aniv-giro 5s linear infinite;
    box-shadow: 0 0 0 1px rgba(232, 185, 48, .35), 0 0 12px rgba(232, 185, 48, .35);
}
img.avatar-lg.aniversariante, img.avatar-xl.aniversariante, img.perfil-avatar.aniversariante { padding: 4px; }
@keyframes aniv-giro { to { --aniv-giro: 360deg; } }

.faixa-aniversario {
    position: relative; overflow: hidden;
    display: flex; align-items: center; gap: 12px;
    margin: 12px clamp(16px, 3vw, 32px) 0; padding: 12px 14px 12px 16px;
    border-radius: var(--r-lg);
    background: linear-gradient(110deg, var(--navy) 0%, var(--navy-2) 60%, #1b3a8a 100%);
    color: var(--brand-100); font-size: 14px;
    animation: faixa-entra .5s var(--ease) both;
}
.faixa-aniversario p { margin: 0; flex: 1; position: relative; }
.faixa-aniversario strong, .faixa-aniversario a:not(.btn) { color: #fff; }
.faixa-aniversario a:not(.btn) { font-weight: 700; text-decoration: underline; text-decoration-color: rgba(232, 185, 48, .7); text-underline-offset: 3px; }
.faixa-aniversario-icone { position: relative; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #e8b930; color: var(--navy); animation: bolo-pula 2.4s var(--ease) infinite; }
.faixa-aniversario-btn { position: relative; flex: none; background: #fff; color: var(--navy); border-color: #fff; }
.faixa-aniversario-btn:hover { background: var(--brand-50); }
.faixa-aniversario-fechar { position: relative; flex: none; color: var(--brand-200); background: transparent; border-color: transparent; }
.faixa-aniversario-fechar:hover { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); }
@media (hover: none) { .faixa-aniversario-fechar:hover { color: var(--brand-200); background: transparent; border-color: transparent; } }
.faixa-aniversario.saindo { animation: faixa-sai .25s var(--ease) forwards; }
.faixa-aniversario-confete { position: absolute; inset: 0; pointer-events: none; }
.faixa-aniversario-confete i { position: absolute; top: -10px; width: 5px; height: 9px; border-radius: 1px; opacity: .7; animation: faixa-confete 6s linear infinite; }
.faixa-aniversario-confete i:nth-child(3n) { background: #e8b930; }
.faixa-aniversario-confete i:nth-child(3n+1) { background: #5572b8; }
.faixa-aniversario-confete i:nth-child(3n+2) { background: #fff; opacity: .45; }
.faixa-aniversario-confete i:nth-child(1) { left: 6%; animation-delay: -.4s; }
.faixa-aniversario-confete i:nth-child(2) { left: 13%; animation-delay: -3.1s; animation-duration: 7s; }
.faixa-aniversario-confete i:nth-child(3) { left: 21%; animation-delay: -1.7s; }
.faixa-aniversario-confete i:nth-child(4) { left: 29%; animation-delay: -4.6s; animation-duration: 8s; }
.faixa-aniversario-confete i:nth-child(5) { left: 37%; animation-delay: -2.2s; }
.faixa-aniversario-confete i:nth-child(6) { left: 45%; animation-delay: -5.3s; animation-duration: 7s; }
.faixa-aniversario-confete i:nth-child(7) { left: 53%; animation-delay: -.9s; }
.faixa-aniversario-confete i:nth-child(8) { left: 61%; animation-delay: -3.8s; animation-duration: 8s; }
.faixa-aniversario-confete i:nth-child(9) { left: 68%; animation-delay: -1.2s; }
.faixa-aniversario-confete i:nth-child(10) { left: 75%; animation-delay: -4.1s; animation-duration: 7s; }
.faixa-aniversario-confete i:nth-child(11) { left: 82%; animation-delay: -2.6s; }
.faixa-aniversario-confete i:nth-child(12) { left: 88%; animation-delay: -5.8s; animation-duration: 8s; }
.faixa-aniversario-confete i:nth-child(13) { left: 93%; animation-delay: -.2s; }
.faixa-aniversario-confete i:nth-child(14) { left: 97%; animation-delay: -3.4s; animation-duration: 7s; }
@keyframes faixa-confete { from { transform: translateY(0) rotate(0deg); } to { transform: translateY(90px) rotate(540deg); } }
@keyframes faixa-entra { from { opacity: 0; transform: translateY(-8px); } }
@keyframes faixa-sai { to { opacity: 0; transform: translateY(-8px); } }
@keyframes bolo-pula { 0%, 70%, 100% { transform: none; } 78% { transform: translateY(-3px) rotate(-6deg); } 86% { transform: translateY(0) rotate(4deg); } }

.confete-camada { position: fixed; inset: 0; pointer-events: none; z-index: var(--z-confete); overflow: hidden; }
.confete { position: absolute; top: 0; width: 8px; height: 12px; border-radius: 2px; box-shadow: 0 0 0 .5px rgba(0, 17, 61, .08); }
.confete-fita { width: 5px; height: 16px; border-radius: 3px; }

.tag-aniversario { display: inline-flex; align-items: center; gap: 5px; background: #fdf3d4; color: #8a6400; }

@media (max-width: 600px) {
    .faixa-aniversario { flex-wrap: wrap; margin: 10px 12px 0; }
    .faixa-aniversario p { flex-basis: calc(100% - 90px); }
    .faixa-aniversario-btn { order: 3; margin-left: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    img.avatar.aniversariante, .faixa-aniversario-icone, .faixa-aniversario-confete i { animation: none; }
}

/* ---------- Quem está aqui agora ---------- */
.presenca { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 4px; border-radius: var(--r-full); background: var(--success-50); color: var(--success-600); font-size: 12.5px; font-weight: 600; white-space: nowrap; animation: presenca-entra .3s var(--ease); }
.presenca[hidden] { display: none; }
.presenca-fotos { position: relative; display: inline-flex; }
.presenca-fotos .avatar { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--success-50); }
.presenca-fotos .avatar + .avatar { margin-left: -7px; }
.presenca-fotos .avatar.chegando { animation: presenca-chega .45s cubic-bezier(.3, 1.6, .5, 1); }
.presenca-ponto { position: absolute; right: -2px; bottom: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--success-500); box-shadow: 0 0 0 2px var(--success-50); }
.presenca-ponto::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--success-500); animation: presenca-pulso 2s ease-out infinite; }
.presenca-escura { background: rgba(255, 255, 255, .12); color: #fff; }
.presenca-escura .avatar { box-shadow: 0 0 0 2px #1a1f30; }
.presenca-escura .presenca-ponto { box-shadow: 0 0 0 2px #1a1f30; }
@keyframes presenca-entra { from { opacity: 0; transform: scale(.9); } }
@keyframes presenca-chega { from { opacity: 0; transform: translateY(6px) scale(.4); } }
@keyframes presenca-pulso { from { transform: scale(1); opacity: .7; } to { transform: scale(2.6); opacity: 0; } }
@media (max-width: 600px) { .presenca-texto { display: none; } .presenca { padding-right: 4px; } }
@media (prefers-reduced-motion: reduce) { .presenca, .presenca-fotos .avatar.chegando, .presenca-ponto::after { animation: none; } }
.vis-acoes .presenca { align-self: center; margin-right: 4px; }

/* ---------- Saudação ao entrar ---------- */
.saudacao {
    position: fixed; inset: 0; z-index: var(--z-saudacao); display: grid; place-items: center; padding: 24px;
    background: radial-gradient(120% 90% at 50% 40%, #0a2263 0%, var(--navy) 55%, #000a26 100%);
    color: #fff; cursor: pointer; animation: saudacao-entra .35s ease both;
}
.saudacao.saindo { animation: saudacao-sai .6s cubic-bezier(.7, 0, .3, 1) forwards; pointer-events: none; }
.saudacao-centro { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; max-width: 640px; }
.saudacao-logo { position: relative; display: block; overflow: hidden; }
.saudacao-logo img { display: block; width: 150px; height: auto; animation: logo-revela .8s cubic-bezier(.6, 0, .2, 1) .1s both; }
.saudacao-logo::after {
    content: ''; position: absolute; top: -20%; bottom: -20%; width: 40%; left: -50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: logo-brilho .9s ease-in-out .55s both;
}
.saudacao-titulo { margin: 6px 0 0; font-size: clamp(28px, 5vw, 44px); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; }
.saudacao-titulo span { display: inline-block; white-space: pre; animation: palavra-sobe .55s cubic-bezier(.2, 1, .3, 1) both; }
.saudacao-resumo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 36px; }
.saudacao-item {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: var(--r-full);
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); color: var(--brand-100);
    font-size: 14px; font-weight: 600; text-decoration: none; animation: palavra-sobe .5s cubic-bezier(.2, 1, .3, 1) both;
    transition: background var(--dur) var(--ease);
}
a.saudacao-item:hover { background: rgba(255, 255, 255, .2); color: #fff; }
.saudacao-item .icon { color: #e8b930; }
.saudacao-item.alerta .icon { color: #ff8a9d; }
.saudacao-item.calmo .icon { color: #6fdca5; }
.saudacao-dica { position: absolute; bottom: calc(28px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; font-size: 12.5px; color: rgba(255, 255, 255, .45); animation: saudacao-entra .5s ease 1.8s both; }
@keyframes saudacao-entra { from { opacity: 0; } }
@keyframes saudacao-sai { to { opacity: 0; transform: translateY(-4%); filter: blur(4px); } }
@keyframes logo-revela { from { clip-path: inset(0 100% 0 0); transform: scale(.92); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes logo-brilho { from { left: -50%; } to { left: 120%; } }
@keyframes palavra-sobe { from { opacity: 0; transform: translateY(14px); filter: blur(3px); } }
@media (prefers-reduced-motion: reduce) {
    .saudacao *, .saudacao::after, .saudacao-logo::after { animation-duration: 1ms !important; animation-delay: 0ms !important; }
}
.presenca { position: relative; }
.presenca-botao { all: unset; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border-radius: var(--r-full); }
.presenca-botao:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 4px; }
.presenca:has(.presenca-botao:hover) { background: #d8f0e3; }
.presenca-escura:has(.presenca-botao:hover) { background: rgba(255, 255, 255, .2); }
.presenca-texto strong { font-weight: 800; }
.presenca-lista {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-popover); min-width: 240px; max-width: 300px; max-height: 320px; overflow-y: auto;
    padding: 8px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg);
    color: var(--text); white-space: normal; animation: presenca-abre .18s var(--ease);
}
.presenca-escura .presenca-lista { left: auto; right: 0; }
.presenca-lista-titulo { margin: 2px 6px 6px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.presenca-pessoa { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--r-md); color: var(--text); text-decoration: none; }
.presenca-pessoa:hover { background: var(--brand-50); }
.presenca-pessoa strong { display: block; font-size: 13.5px; color: var(--ink); }
.presenca-pessoa small { display: block; font-size: 12px; color: var(--text-muted); font-weight: 500; }
.presenca-pessoa-foto { position: relative; flex: none; }
.presenca-pessoa-foto .avatar { width: 32px; height: 32px; }
.presenca-pessoa-foto .presenca-ponto { box-shadow: 0 0 0 2px var(--surface); }
@keyframes presenca-abre { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

.faixa-aniversario .faixa-aniversario-fechar { color: var(--brand-200); }
.faixa-aniversario .faixa-aniversario-fechar:hover { color: #fff; }

/* "Enviar no chat": escolher a Geralzona ou um grupo */
.gz-destinos { margin: 0 0 12px; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gz-destinos legend { margin-bottom: 6px; }
.gz-destino { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--border); border-radius: var(--r-full); background: var(--surface); font-size: 13.5px; font-weight: 600; color: var(--n-700); cursor: pointer; }
.gz-destino input { position: absolute; opacity: 0; pointer-events: none; }
.gz-destino:has(input:checked) { border-color: var(--primary); background: var(--brand-50); color: var(--ink); box-shadow: 0 0 0 1px var(--primary); }
.gz-destino:has(input:focus-visible) { outline: 2px solid var(--brand-400); outline-offset: 2px; }
.gz-destino-cor { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.gz-destino-cor.gz-geral { color: var(--ink); }
@media (pointer: coarse) { .gz-destino { padding: 9px 14px; } }

/* ---------- "Quem pode ver" (Todos | Só eu | Escolher funções e pessoas) ---------- */
.campo.acesso { margin-top: 16px; }
.qpv-item + .campo.acesso { margin-top: 0; }
.acesso-opcoes { display: flex; width: 100%; }
.acesso-opcoes button { flex: 1 1 0; justify-content: center; height: 38px; }
.acesso-opcoes button[aria-checked="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.acesso-dica { margin: 0; }
.acesso-dica:empty { display: none; }
.acesso-escolha { display: flex; flex-direction: column; gap: 10px; }
.acesso-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.acesso-chip {
    display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
    min-height: 36px; padding: 0 2px 0 12px; border-radius: var(--r-full);
    font-size: 13px; font-weight: 700;
}
.acesso-chip-pessoa { padding-left: 4px; background: var(--n-50); color: var(--n-700); border: 1px solid var(--border); }
.acesso-chip .avatar { width: 26px; height: 26px; }
.acesso-chip-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acesso-tirar {
    display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
    color: inherit; opacity: .7; transition: background-color var(--dur), opacity var(--dur);
}
.acesso-tirar:hover { opacity: 1; background: var(--veu-8); }
.acesso-adicionar {
    display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--r-full);
    border: 1px dashed var(--border-strong); color: var(--ink); font-size: 13px; font-weight: 700;
    transition: border-color var(--dur), background-color var(--dur);
}
.acesso-adicionar:hover, .acesso-adicionar[aria-expanded="true"] { border-style: solid; border-color: var(--primary); background: var(--brand-50); }
.acesso-seletor { border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden; }
.acesso-busca { position: relative; padding: 8px; border-bottom: 1px solid var(--border); }
.acesso-busca .icon { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; }
.acesso-busca .input { padding-left: 36px; height: 40px; }
.acesso-lista { max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 4px 0; }
.acesso-secao-titulo { display: block; padding: 10px 14px 4px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--text-subtle); }
.acesso-opcao {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 6px 14px;
    text-align: left; font-size: 14px; font-weight: 600; color: var(--n-700);
}
.acesso-opcao:hover, .acesso-opcao:focus-visible { background: var(--brand-50); outline: none; }
.acesso-opcao:focus-visible { box-shadow: inset 2px 0 0 var(--primary); }
.acesso-opcao .avatar { width: 28px; height: 28px; }
.acesso-ponto { width: 12px; height: 12px; margin: 0 8px; border-radius: 50%; background: currentColor; flex: none; }
.acesso-opcao-nome { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.acesso-opcao-nome small { font-size: 12px; font-weight: 500; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acesso-marca {
    display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: var(--r-xs);
    border: 1.5px solid var(--border-strong); color: transparent; transition: background-color var(--dur), border-color var(--dur);
}
.acesso-opcao[aria-selected="true"] { color: var(--ink); }
.acesso-opcao[aria-selected="true"] .acesso-marca { background: var(--primary); border-color: var(--primary); color: #fff; }
.acesso-vazio { padding: 16px 14px; margin: 0; font-size: 13.5px; color: var(--text-muted); }
.acesso-seletor-rodape { display: flex; justify-content: flex-end; padding: 8px; border-top: 1px solid var(--border); }
.acesso-seletor-rodape .btn { min-height: 36px; }
.qpv-item { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; overflow: hidden; }
.qpv-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-acesso { max-width: 220px; }
.tag-acesso > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- App instalado (PWA) ---------- */
/* Celular deitado com recorte: nada fica embaixo do recorte nas laterais. */
.sidebar-marca { padding-top: calc(24px + env(safe-area-inset-top, 0px)); }
@media (max-width: 1024px) {
    .topbar { padding-top: env(safe-area-inset-top, 0px); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
}
.instalar-passos { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.instalar-passos li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.5; }
.instalar-passos .icon { vertical-align: -2px; color: var(--brand-500); }
.instalar-numero { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--ink); font-size: 12.5px; font-weight: 800; }
@media (display-mode: standalone) {
    /* No app, tocar e segurar texto de botões e menus não seleciona (como num app do celular). */
    .sidebar, .topbar, .btn, .btn-icone { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
}
/* Senha provisória: o menu fica vazio até criar a senha; mostra o porquê */
.nav-aviso-senha { display: flex; gap: 8px; align-items: flex-start; margin: 8px 12px; padding: 12px; border-radius: var(--r-md); background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .85); font-size: 13.5px; line-height: 1.45; }
.nav-aviso-senha .icon { flex: none; margin-top: 2px; color: #e8b930; }
.btn-instalar[hidden] { display: none; }

/* ---------- Tema escuro: ajustes do que não sai só pelos tokens ---------- */
[data-tema="escuro"] .topbar { background: rgba(10, 15, 30, .86); }
[data-tema="escuro"] .nav a[aria-current="page"] { background: var(--primary); color: #fff; }
[data-tema="escuro"] .nav a[aria-current="page"] .icon { color: #fff; }
[data-tema="escuro"] .nav a.recebe-arrasto { background: var(--primary); }
[data-tema="escuro"] .btn-primario:hover:not(:disabled) { background: var(--primary-hover); }
[data-tema="escuro"] .btn-perigo { background: #c81f3e; }
[data-tema="escuro"] .btn-branco:hover:not(:disabled) { background: #dfe6f5; }
[data-tema="escuro"] .input:focus, [data-tema="escuro"] .select:focus, [data-tema="escuro"] .textarea:focus { box-shadow: 0 0 0 3px rgba(110, 150, 255, .28); }
[data-tema="escuro"] .input:-webkit-autofill, [data-tema="escuro"] .input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text); caret-color: var(--text);
    -webkit-box-shadow: 0 0 0 100px #16213d inset; box-shadow: 0 0 0 100px #16213d inset;
}
[data-tema="escuro"] dialog.modal::backdrop { background: rgba(2, 5, 14, .66); }
[data-tema="escuro"] .toast, [data-tema="escuro"] .aviso-atualizacao { background: #1d2b50; box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255, 255, 255, .08); }
[data-tema="escuro"] .tag-cor-marinho  { background: #1d2b50; color: #c5d4f8; }
[data-tema="escuro"] .tag-cor-azul     { background: #182d5e; color: #9dbaff; }
[data-tema="escuro"] .tag-cor-roxo     { background: #2c2150; color: #c4b2f5; }
[data-tema="escuro"] .tag-cor-rosa     { background: #3d1a2c; color: #f4a3c4; }
[data-tema="escuro"] .tag-cor-vermelho { background: #3d1a1d; color: #f5a3a3; }
[data-tema="escuro"] .tag-cor-laranja  { background: #3a2412; color: #f6b680; }
[data-tema="escuro"] .tag-cor-amarelo  { background: #352b0c; color: #ecd07a; }
[data-tema="escuro"] .tag-cor-verde    { background: #12301f; color: #84dbb0; }
[data-tema="escuro"] .tag-cor-turquesa { background: #0f2f31; color: #82d8d6; }
[data-tema="escuro"] .capa-cor-marinho, [data-tema="escuro"] .cor-marinho { --cor: #1d3b8f; }
[data-tema="escuro"] .tag-aniversario { background: rgba(232, 185, 48, .16); color: #f0c75a; }
[data-tema="escuro"] .presenca:has(.presenca-botao:hover) { background: #14382a; }
[data-tema="escuro"] .acesso-tirar:hover { background: var(--veu-8); }
[data-tema="escuro"] .input::placeholder, [data-tema="escuro"] .textarea::placeholder { color: #6b7793; }

/* Celular: os botões de filtro (Todos / Não lidos / ...) dividem a largura da tela por igual */
@media (max-width: 600px) {
    .barra-filtros .segmentado { flex: 1 1 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
    .barra-filtros .segmentado button { justify-content: center; padding-left: 6px; padding-right: 6px; }
}

/* Avisos de conexão / atualização: o texto fica numa linha (antes quebrava palavra por palavra, porque a
   caixa presa no meio da tela só usava metade da largura). No celular, ocupa a largura e fica acima do
   botão flutuante, sem cobrir nem ser coberto. */
.aviso-atualizacao { width: max-content; }
.aviso-atualizacao > span { min-width: 0; }
.aviso-atualizacao > .icon, .aviso-atualizacao > .btn { flex: none; }
@media (max-width: 600px) {
    .aviso-atualizacao {
        /* do tamanho do texto, no meio, numa linha só (sem sobra dos lados) */
        max-width: calc(100vw - 24px); bottom: calc(84px + env(safe-area-inset-bottom, 0px));
        font-size: 13.5px; white-space: nowrap; gap: 8px;
    }
    .aviso-atualizacao.aviso-conexao { padding: 9px 14px; }
    .aviso-atualizacao > span { overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- Abertura do app (tema.js): fundo azul em degradê e a logo no centro ---------- */
html.abrindo::before {
    content: ''; position: fixed; inset: 0; z-index: 99998;
    background: radial-gradient(120% 90% at 50% 40%, #0a2263 0%, #00113d 55%, #000a26 100%);
    transition: opacity .42s ease;
}
html.abrindo::after {
    content: ''; position: fixed; left: 50%; top: 50%; z-index: 99999;
    width: 168px; height: 92px; margin: -46px 0 0 -84px;
    background: url(/assets/img/logo-branca.png) center / contain no-repeat;
    animation: abrindo-logo .7s cubic-bezier(.2, .8, .2, 1) both;
    transition: opacity .3s ease, transform .42s ease;
}
html.abrindo-sai::before { opacity: 0; }
html.abrindo-sai::after { opacity: 0; transform: scale(1.06); }
@keyframes abrindo-logo { from { opacity: 0; transform: scale(.92); } }
@media (prefers-reduced-motion: reduce) { html.abrindo::after { animation: none; } html.abrindo::before, html.abrindo::after { transition: none; } }

/* ---------- Sino no celular: folha que sobe de baixo (igual às outras janelas do app) ---------- */
@media (max-width: 600px) {
    .notif-painel {
        position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none;
        display: flex; flex-direction: column; max-height: 82dvh;
        border-radius: 20px 20px 0 0; border-bottom: 0;
        box-shadow: 0 0 0 100vmax rgba(0, 8, 30, .55), 0 -10px 30px rgba(0, 8, 30, .3); /* escurece o fundo atrás da folha */
        animation: sinoSobe .26s var(--ease);
    }
    .notif-painel[hidden] { display: none; }
    .notif-topo { flex: none; position: relative; padding: 22px 16px 12px; }
    .notif-topo::before { /* a "alça" da folha */
        content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; margin-left: -19px;
        border-radius: 4px; background: var(--border-strong, var(--n-300));
    }
    .notif-topo strong { font-size: 17px; }
    .notif-topo .link { font-size: 13.5px; }
    .notif-lista { flex: 1; min-height: 0; max-height: none; overscroll-behavior: contain; }
    .notif-item { padding: 13px 16px; gap: 12px; }
    .notif-item .bolinha { width: 38px; height: 38px; }
    .notif-item strong { font-size: 15px; }
    .notif-item em { font-size: 13.5px; }
    .notif-item span { font-size: 12.5px; }
    .notif-rodape { flex: none; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 14.5px; }
}
@keyframes sinoSobe { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .notif-painel { animation: none; } }

/* Tela de bloqueio: olhinho para ver a senha digitada */
.bloqueio-campo { position: relative; width: 100%; }
.bloqueio-campo .input { width: 100%; padding-left: 44px; padding-right: 44px; }
.bloqueio-olho { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--text-subtle); }

/* ---------- Tela de bloqueio no celular: tela cheia, sem a caixa, como o bloqueio do próprio celular ----------
   O fundo é o de sempre (azul fechado, com o painel desfocado atrás); foto, nome e a senha no meio, um pouco para cima. */
@media (max-width: 600px) {
    dialog.tela-bloqueio { padding: 0; }
    dialog.tela-bloqueio[open] { place-items: stretch; }
    .bloqueio-cartao {
        width: 100%; justify-content: center; gap: 12px;
        padding: calc(24px + env(safe-area-inset-top, 0px)) 28px calc(16dvh + env(safe-area-inset-bottom, 0px));
        background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff;
    }
    .bloqueio-cartao .avatar { width: 104px; height: 104px; border: 3px solid rgba(255, 255, 255, .28); margin-bottom: 4px; }
    .bloqueio-selo { background: rgba(255, 255, 255, .12); color: #cfdcff; }
    .bloqueio-cartao h2 { font-size: 24px; color: #fff; }
    .bloqueio-cartao p { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .7); max-width: 30ch; }
    .bloqueio-campo { margin-top: 8px; }
    .bloqueio-cartao .input {
        height: 52px; font-size: 16px; background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .22); color: #fff;
    }
    .bloqueio-cartao .input::placeholder { color: rgba(255, 255, 255, .55); }
    .bloqueio-cartao .input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .18); }
    .bloqueio-olho { color: rgba(255, 255, 255, .7); }
    .bloqueio-cartao .btn-bloco { height: 52px; font-size: 16px; background: #fff; border-color: #fff; color: #00113d; }
    /* "Usar a digital ou o rosto": botão de contorno (o branco cheio é o Desbloquear) */
    .bloqueio-cartao .btn-bloco.bloqueio-bio { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
    .bloqueio-cartao .btn-bloco.bloqueio-bio:active { background: rgba(255, 255, 255, .12); }
    .bloqueio-erro { color: #ffb4b4 !important; }
    .bloqueio-cartao .link { margin-top: 8px; font-size: 14px; color: #cfdcff; }
    .bloqueio-cartao .desconectado-icone { background: rgba(255, 255, 255, .12); color: #fff; }
}

/* Painel bloqueado (ou "Você foi desconectado"): a página de trás fica travada — não rola nem responde ao dedo */
html:has(dialog.tela-bloqueio[open]), html:has(dialog.tela-bloqueio[open]) body { overflow: hidden !important; overscroll-behavior: none; }
html:has(dialog.tela-bloqueio[open]) body { touch-action: none; }
dialog.tela-bloqueio { position: fixed; inset: 0; touch-action: none; overscroll-behavior: contain; overflow: hidden; }
dialog.tela-bloqueio .bloqueio-cartao { touch-action: manipulation; }

/* ---------- "Tem certeza?" no celular: folha que sobe de baixo, com os dois botões lado a lado ---------- */
@media (max-width: 600px) {
    dialog.modal.modal-confirmar {
        width: 100vw; max-width: none; margin: auto 0 0; top: auto; bottom: 0; border-radius: 20px 20px 0 0;
        animation: sinoSobe .24s var(--ease);
    }
    dialog.modal.modal-confirmar::backdrop { background: rgba(0, 8, 30, .6); }
    .modal-confirmar .confirmar-texto { padding: 22px 18px 16px; }
    .modal-confirmar .confirmar-icone { width: 42px; height: 42px; margin-bottom: 12px; }
    .modal-confirmar .confirmar-texto h3 { font-size: 18px; }
    .modal-confirmar .confirmar-texto p { font-size: 14.5px; line-height: 1.5; }
    .modal-confirmar .modal-rodape { flex-direction: row; gap: 8px; padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .modal-confirmar .modal-rodape .btn { width: auto; flex: 1; height: 48px; justify-content: center; }
    .modal-confirmar .modal-rodape .btn[data-ok] { flex: 1.4; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) { dialog.modal.modal-confirmar { animation: none; } }

/* ---------- Menu lateral no celular: no mesmo lugar, só mais confortável ----------
   Um pouco mais largo, linhas mais altas (toque fácil), o "X" para fechar, o fundo travado enquanto está
   aberto e fechar arrastando para o lado. No computador nada muda. */
.sidebar-fechar { display: none; }
@media (max-width: 1024px) {
    .sidebar {
        width: min(312px, 86vw); border-radius: 0 22px 22px 0;
        padding-top: env(safe-area-inset-top, 0px);
        transition: transform .28s cubic-bezier(.2, .8, .2, 1);
        will-change: transform;
    }
    .sidebar.arrastando { transition: none; }
    .sidebar-marca { justify-content: flex-start; padding: 20px 60px 16px 22px; }
    .sidebar-marca img { height: 42px; }
    .sidebar-fechar {
        display: grid; place-items: center; position: absolute; top: calc(18px + env(safe-area-inset-top, 0px)); right: 12px;
        width: 40px; height: 40px; border-radius: 12px; color: rgba(255, 255, 255, .75); background: rgba(255, 255, 255, .08);
    }
    .sidebar-fechar:active { background: rgba(255, 255, 255, .16); }
    .nav { gap: 3px; padding: 6px 12px; overscroll-behavior: contain; }
    .nav a { min-height: 48px; padding: 11px 14px; gap: 14px; font-size: 15.5px; border-radius: 14px; }
    .nav a .icon { width: 21px; height: 21px; }
    .nav a:active { background: rgba(255, 255, 255, .12); }
    .nav .contador { min-width: 22px; height: 22px; font-size: 12px; }
    .nav-label { padding: 16px 14px 6px; }
    .sidebar-footer { padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); gap: 3px; }
    .sidebar-user { padding: 10px 12px; gap: 12px; border-radius: 14px; }
    .sidebar-user .avatar { width: 42px; height: 42px; }
    .sidebar-user-info strong { font-size: 15px; }
    .sidebar-user-info span { font-size: 12.5px; }
    .btn-sair, .btn-instalar { min-height: 46px; padding: 10px 14px; gap: 14px; font-size: 15px; border-radius: 14px; }
    .overlay-menu { background: rgba(0, 8, 30, .55); }
    /* Menu aberto: a página de trás não rola */
    html:has(.app.menu-aberto) { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none; } }

/* ---------- Celular: puxar para atualizar (a rodinha que desce do topo) ---------- */
html.com-puxar { overscroll-behavior-y: contain; } /* sem o "recarregar a página inteira" do navegador: vale o nosso */
.puxar-atualizar {
    position: fixed; top: calc(var(--topbar-h, 64px) - 44px); left: 50%; z-index: var(--z-toast, 60);
    width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
    background: var(--surface); color: var(--accent-ink); border: 1px solid var(--border); box-shadow: var(--shadow-md);
    transform: translate(-50%, 0); opacity: 0; pointer-events: none;
    transition: transform .22s var(--ease), opacity .18s ease;
}
.puxar-atualizar.puxando { transition: none; }
.puxar-atualizar.pronto { background: var(--primary); border-color: var(--primary); color: #fff; }
.puxar-atualizar.girando { opacity: 1 !important; }
.puxar-atualizar.girando .icon { animation: puxar-gira .7s linear infinite; }
@keyframes puxar-gira { to { transform: rotate(360deg); } }

/* Celular: nada de "prévia" nem menu do navegador ao segurar links, botões, fotos e ícones (o resto está no tema.js).
   Textos comuns continuam selecionáveis. */
@media (pointer: coarse) {
    a, button, img, svg, .avatar, .btn, .nav a, label, summary, [role="button"], [role="tab"] {
        -webkit-touch-callout: none;
    }
    a, button, .btn, .nav a, .avatar, img, svg, .tag, .cfg-item, .chat-item, .estat, .atalho-inicio, .equipe-pessoa, .segmentado button {
        -webkit-user-select: none; user-select: none;
    }
    img { -webkit-user-drag: none; }
}

/* ---------- Foto de perfil ampliada (tocar na foto: ela cresce para ver melhor) ---------- */
.foto-ampliada {
    position: fixed; inset: 0; z-index: 8000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
    padding: 24px; background: rgba(0, 8, 30, 0); cursor: zoom-out;
    transition: background-color .24s ease, backdrop-filter .24s ease;
    -webkit-tap-highlight-color: transparent;
}
.foto-ampliada.aberta { background: rgba(0, 8, 30, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.foto-ampliada.saindo { background: rgba(0, 8, 30, 0); backdrop-filter: none; -webkit-backdrop-filter: none; }
.foto-ampliada-img {
    width: min(86vw, 62dvh, 440px); aspect-ratio: 1 / 1; object-fit: cover; border-radius: 28px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .5); background: var(--n-100);
    transition: transform .26s cubic-bezier(.2, .9, .25, 1), border-radius .26s ease, opacity .2s ease;
    will-change: transform; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.foto-ampliada-nome { color: #fff; font-size: 17px; font-weight: 700; opacity: 0; transition: opacity .2s ease .08s; text-align: center; }
.foto-ampliada.aberta .foto-ampliada-nome { opacity: 1; }
.foto-ampliada.saindo .foto-ampliada-nome { opacity: 0; transition-delay: 0s; }
/* As fotos de pessoas mostram que dá para tocar (menos as do topo, do menu e as que são botão) */
img.avatar { cursor: zoom-in; }
.topbar img.avatar, .sidebar img.avatar, button img.avatar, label img.avatar, .cfg-eu img.avatar, .foto-editor img.avatar { cursor: inherit; }

/* Tela de bloqueio: a foto é só enfeite — não responde ao toque (segurar o dedo não abre "baixar/compartilhar imagem") */
.bloqueio-cartao .avatar, .bloqueio-cartao img { pointer-events: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
dialog.tela-bloqueio { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
dialog.tela-bloqueio input { -webkit-user-select: text; user-select: text; }

/* ---------- Novidades do painel ("O que mudou") ---------- */
/* No notebook a janela é mais larga: as frases quebram menos e os 6 itens cabem sem barra de rolagem */
dialog.modal.modal-novidades { width: min(620px, calc(100vw - 32px)); }
.modal-novidades .modal-topo > div { display: flex; flex-direction: column; min-width: 0; }
.novidades-data { font-size: 12.5px; color: var(--text-subtle); margin-top: 1px; }
.novidades-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.novidades-lista li { display: flex; align-items: flex-start; gap: 12px; }
.novidades-icone { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand-500); }
.novidades-texto { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.novidades-texto strong { font-size: 14.5px; color: var(--ink); }
.novidades-texto span { font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.novidades-antigas { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.novidades-antigas summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 13.5px; font-weight: 600; color: var(--brand-500); border-radius: var(--r-md); }
.novidades-antigas summary::-webkit-details-marker { display: none; }
.novidades-antigas summary .icon { transition: transform var(--dur); }
.novidades-antigas[open] summary .icon { transform: rotate(90deg); }
.novidades-versao { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 12px; font-size: 14px; color: var(--ink); }
.novidades-versao span { font-size: 12.5px; font-weight: 400; color: var(--text-subtle); }
.sidebar-versao { align-self: flex-start; margin: 4px 0 0; padding: 4px 12px; border-radius: var(--r-md); font-size: 12px; color: rgba(255, 255, 255, .45); transition: color var(--dur); }
.sidebar-versao:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.faixa-novidades {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px; padding: 10px 10px 10px 14px;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
    animation: faixa-entra .4s var(--ease) both;
}
.faixa-novidades p { margin: 0; flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.faixa-novidades p strong { font-size: 14.5px; color: var(--ink); }
.faixa-novidades p span { font-size: 13px; color: var(--text-subtle); }
.faixa-novidades.saindo { animation: faixa-sai .25s var(--ease) forwards; }
@media (max-width: 600px) {
    dialog.modal.modal-novidades {
        width: 100vw; max-width: none; max-height: 90dvh; margin: auto 0 0; top: auto; bottom: 0; border-radius: 20px 20px 0 0;
        animation: sinoSobe .26s var(--ease);
    }
    dialog.modal.modal-novidades::backdrop { background: rgba(0, 8, 30, .6); }
    .modal-novidades .modal-topo { padding: 14px 16px; }
    .modal-novidades .modal-corpo { padding: 16px; }
    .modal-novidades .modal-rodape { padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); }
    .modal-novidades .modal-rodape .btn { width: 100%; height: 48px; justify-content: center; }
}