/* Siplan Chat — app do gestor.
   Mesmo princípio do app do Easy: tudo é alvo de dedo (mínimo 46px), uma
   coluna, e tema claro/escuro pelo sistema. A cor da marca é a do gestão
   (--siplan-primary em siplan-chat-relatorios/public/css/app.css). */

:root {
    --fundo: #f5f3f3;
    --superficie: #ffffff;
    --superficie-2: #efeaea;
    --tinta: #1c1718;
    --tinta-fraca: #5f5658;
    --tinta-tenue: #8a8183;
    --linha: #e2dcdc;
    /* Bordô da marca. Leva texto branco em cima (8,9:1) e também É texto. */
    --marca: #8a2f32;
    --marca-texto: #ffffff;
    --marca-fundo: #f6e9e9;
    /* Cabeçalho: bordô cheio no claro; no escuro, superfície com a marca só no
       detalhe — uma faixa rosa no topo de uma tela escura grita. */
    --barra-fundo: #8a2f32;
    --barra-texto: #ffffff;
    --barra-botao: rgba(255, 255, 255, .14);
    /* Atenção (fila atrasada, módulo descoberto, nota baixa). Âmbar, e não
       vermelho: a marca já é vermelha, e alerta com a cor da marca deixaria de
       se distinguir dela. Sempre acompanhado de ícone e texto. */
    --atencao: #8a5300;
    --atencao-fundo: #fcf1dc;
    --sombra: 0 1px 2px rgba(28, 23, 24, .06), 0 8px 24px -18px rgba(28, 23, 24, .35);
    --alvo: 46px;
    /* Cor de gráfico, validada contra a superfície (lightness band e contraste,
       validate_palette.js do skill de dataviz). */
    --grafico: #8a2f32;
    --grafico-trilho: #f1e9e9;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fundo: #121011;
        --superficie: #1c1819;
        --superficie-2: #262122;
        --tinta: #ece6e6;
        --tinta-fraca: #a99fa1;
        --tinta-tenue: #7d7375;
        --linha: #2f2829;
        /* Passo próprio do escuro: o bordô sobre fundo escuro some. */
        --marca: #e5999b;
        --marca-texto: #241012;
        --marca-fundo: #3a2224;
        --barra-fundo: #1c1819;
        --barra-texto: #ece6e6;
        --barra-botao: #2f2829;
        --atencao: #f2b64f;
        --atencao-fundo: #33270f;
        --sombra: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -18px rgba(0, 0, 0, .8);
        /* Validado contra #1c1819: faixa 0.48–0.67 do escuro, contraste ≥ 3:1. */
        --grafico: #cf6266;
        --grafico-trilho: #2a2324;
    }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
    margin: 0;
    background: var(--fundo);
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

h1, h2 { margin: 0; line-height: 1.25; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }

.ic { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }

.so-leitor {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- login ---------- */

.login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 20px calc(32px + env(safe-area-inset-bottom));
    max-width: 440px;
    margin: 0 auto;
}

.login-marca { text-align: center; margin-bottom: 28px; }
.login-marca h1 { font-size: 26px; margin-top: 14px; }
.login-marca p { margin: 6px 0 0; color: var(--tinta-fraca); }

.login-selo { display: inline-block; width: 72px; height: 72px; }

.login-form { padding: 20px; display: grid; gap: 16px; }

label { display: grid; gap: 6px; font-size: 14px; color: var(--tinta-fraca); }

input {
    font: inherit;
    min-height: var(--alvo);
    border-radius: 10px;
    border: 1px solid var(--linha);
    background: var(--superficie);
    color: var(--tinta);
    padding: 0 14px;
    width: 100%;
}

input:focus { outline: 2px solid var(--marca); outline-offset: 1px; border-color: transparent; }

.primario {
    min-height: var(--alvo);
    border-radius: 10px;
    background: var(--marca);
    color: var(--marca-texto);
    font-weight: 600;
    text-align: center;
}

.primario:disabled { opacity: .6; }

.erro-form { margin: 0; min-height: 1.2em; color: var(--atencao); font-size: 14px; }

.login-nota { text-align: center; color: var(--tinta-tenue); font-size: 13px; margin: 18px 0 0; }

/* ---------- casca ---------- */

.barra {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px;
    padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
    background: var(--barra-fundo);
    color: var(--barra-texto);
    border-bottom: 1px solid var(--linha);
}

@media (prefers-color-scheme: light) { .barra { border-bottom: 0; } }

.barra-titulo { flex: 1; min-width: 0; display: grid; }
.barra-titulo strong { font-size: 18px; }
.barra-titulo span { font-size: 13px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.barra .icone, .barra .status {
    min-height: 36px; padding: 0 12px; border-radius: 18px;
    font-size: 13px; text-align: center;
    background: var(--barra-botao);
}

.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status:empty { display: none; }
.status.buscando { opacity: .75; }
.status.desatualizado { background: var(--atencao-fundo) !important; color: var(--atencao); font-weight: 600; }

main#conteudo {
    padding: 16px 16px calc(84px + env(safe-area-inset-bottom));
    max-width: 640px;
    margin: 0 auto;
}

.abas {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 2;
    display: grid; grid-template-columns: repeat(5, 1fr);
    background: var(--superficie);
    border-top: 1px solid var(--linha);
    padding-bottom: env(safe-area-inset-bottom);
}

.abas button {
    min-height: 58px;
    text-align: center;
    font-size: 13px;
    color: var(--tinta-fraca);
    border-top: 3px solid transparent;
}

.abas button.ativa { color: var(--marca); font-weight: 700; border-top-color: var(--marca); }

/* ---------- blocos ---------- */

.cartao {
    background: var(--superficie);
    border-radius: 14px;
    box-shadow: var(--sombra);
}

.secao { margin-top: 22px; }
.secao h2 { font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.secao-nota { margin: -6px 0 10px; font-size: 13px; color: var(--tinta-tenue); }

.contagem {
    font-size: 12px; font-weight: 600;
    padding: 1px 8px; border-radius: 10px;
    background: var(--superficie-2); color: var(--tinta-fraca);
}

.lista > * + * { border-top: 1px solid var(--linha); }

.linha {
    display: flex; align-items: center; gap: 12px;
    width: 100%; min-height: 58px;
    padding: 10px 14px;
}

button.linha:active, summary.linha:active { background: var(--superficie-2); }

/* minmax(0, 1fr): sem isto a coluna implícita da grade cresce até caber o
   texto inteiro, e o nome longo de instituição empurra a página para o lado em
   vez de cortar com reticências. */
.linha-principal { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.linha-sub { font-size: 13px; color: var(--tinta-fraca); }
.linha-numero { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }

.atencao { color: var(--atencao); font-weight: 600; }

/* ---------- Agora ---------- */

.alertas { display: grid; gap: 8px; margin-bottom: 16px; }

.alerta {
    display: flex; align-items: flex-start; gap: 10px;
    min-height: var(--alvo);
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--atencao-fundo);
    color: var(--atencao);
    font-size: 15px;
}

.alerta .ic { margin-top: 2px; font-size: 18px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.tile {
    display: grid; align-content: start; gap: 2px;
    padding: 14px;
    min-height: 108px;
    border-radius: 14px;
    background: var(--superficie);
    box-shadow: var(--sombra);
}

.tile:active { background: var(--superficie-2); }
.tile-rotulo { font-size: 13px; color: var(--tinta-fraca); }
.tile-valor { font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.tile-unidade { font-size: 22px; color: var(--marca); margin-left: 4px; }
.tile-detalhe { font-size: 13px; color: var(--tinta-fraca); }
.tile-detalhe .ic { color: var(--atencao); }

.linha-hoje { margin: 12px 2px 0; font-size: 13px; color: var(--tinta-tenue); }

/* ---------- Equipe ---------- */

.avatar {
    flex: none;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 14px; font-weight: 700;
    background: var(--superficie-2); color: var(--tinta-fraca);
}

.avatar.situacao-lotado { background: var(--atencao-fundo); color: var(--atencao); }
.avatar.situacao-atendendo { background: var(--marca-fundo); color: var(--marca); }

.capacidade { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.capacidade small { font-size: 13px; font-weight: 500; color: var(--tinta-fraca); }

.conversas { list-style: none; margin: 2px 0 0; padding: 0; font-size: 13px; color: var(--tinta-fraca); }
.conversas li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversas strong { font-weight: 600; color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ---------- Fila ---------- */

details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }

details > summary::after {
    content: ''; flex: none;
    width: 8px; height: 8px;
    border-right: 2px solid var(--tinta-tenue);
    border-bottom: 2px solid var(--tinta-tenue);
    transform: rotate(45deg);
    margin: 0 4px 4px 2px;
}

details[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }

.marcas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }

.marca-atencao {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600;
    padding: 2px 8px; border-radius: 10px;
    background: var(--atencao-fundo); color: var(--atencao);
}

.clientes, .nomes { list-style: none; margin: 0; padding: 0 14px 10px 14px; }

.cliente {
    display: flex; justify-content: space-between; gap: 12px;
    padding: 8px 0;
    font-size: 14px;
    border-top: 1px dashed var(--linha);
}

.cliente-espera { font-variant-numeric: tabular-nums; white-space: nowrap; }

.nomes li { padding: 6px 0; font-size: 14px; color: var(--tinta-fraca); }

/* ---------- Notas ---------- */

.heroi { display: grid; justify-items: center; padding: 18px 0 6px; }
.heroi-numero { font-size: 56px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.heroi-estrela { font-size: 36px; color: var(--marca); margin-left: 6px; }
.heroi-rotulo { margin-top: 8px; color: var(--tinta-fraca); }

.grafico { padding: 14px; display: grid; gap: 10px; }
.grafico > div { display: grid; gap: 10px; }

/* dist-*, e não barra-*: .barra é o cabeçalho, e o nome repetido fazia o
   gráfico desmontar o cabeçalho. */
.dist-linha { display: grid; grid-template-columns: 42px 1fr 36px; align-items: center; gap: 10px; }
.dist-rotulo { font-size: 14px; color: var(--tinta-fraca); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dist-trilho { height: 14px; border-radius: 4px; background: var(--grafico-trilho); overflow: hidden; }
/* Ponta arredondada só na extremidade de dado; a base fica presa ao eixo. */
.dist-barra { display: block; height: 100%; background: var(--grafico); border-radius: 0 4px 4px 0; }
.dist-valor { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

.nota-baixa { align-items: flex-start; }

.nota-selo {
    flex: none;
    display: inline-flex; align-items: center; gap: 2px;
    min-width: 44px; height: 30px; padding: 0 8px; border-radius: 15px;
    background: var(--atencao-fundo); color: var(--atencao);
    font-weight: 700; justify-content: center;
}

.comentario { display: block; margin-top: 4px; font-size: 14px; color: var(--tinta); }

/* ---------- Avisos ---------- */

.alerta-neutro {
    margin: 0 0 6px;
    padding: 12px 14px;
    border-radius: 12px;
    background: var(--superficie-2);
    color: var(--tinta-fraca);
    font-size: 14px;
}

.chave:disabled { opacity: .7; }

.ativar { width: 100%; margin-bottom: 6px; }

.rodape-nota { margin: 12px 2px 0; font-size: 13px; color: var(--tinta-tenue); }

.interruptor {
    flex: none;
    position: relative;
    width: 46px; height: 28px; border-radius: 14px;
    background: var(--linha);
    transition: background .15s;
}

.interruptor::after {
    content: '';
    position: absolute; top: 3px; left: 3px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--superficie);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
    transition: transform .15s;
}

.chave[aria-checked="true"] .interruptor { background: var(--marca); }
.chave[aria-checked="true"] .interruptor::after { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) { .interruptor, .interruptor::after { transition: none; } }

/* ---------- estados ---------- */

.carregando { display: flex; align-items: center; gap: 10px; justify-content: center; padding: 48px 0; color: var(--tinta-fraca); }

.giro {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--linha); border-top-color: var(--marca);
    animation: giro .8s linear infinite;
}

@keyframes giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) { .giro { animation-duration: 2.4s; } }

.vazio { display: grid; gap: 4px; text-align: center; padding: 28px 16px; color: var(--tinta-fraca); }
.vazio strong { color: var(--tinta); }

.aviso {
    position: fixed; left: 16px; right: 16px; bottom: calc(74px + env(safe-area-inset-bottom)); z-index: 3;
    padding: 12px 16px; border-radius: 12px;
    background: var(--tinta); color: var(--fundo);
    opacity: 0; transform: translateY(8px); pointer-events: none;
    transition: opacity .2s, transform .2s;
}

.aviso.visivel { opacity: 1; transform: none; }