/* =====================================================================
   app.css v2.0 — Identidade visual Totalnuvem / InovaTN
   Paleta: Azul royal #0c3fa6 + gradientes + azul claro moderno
   Sem bibliotecas externas. Apenas CSS puro.
   ===================================================================== */

:root {
    /* Cores principais — Totalnuvem / InovaTN */
    --marca-1: #0c3fa6;        /* azul royal escuro */
    --marca-2: #1558d6;        /* azul primário */
    --marca-3: #2979ff;        /* azul brilhante (botões) */
    --marca-4: #5c9dff;        /* azul médio (destaques) */
    --marca-5: #d6e4ff;        /* azul muito claro (fundos) */

    /* Gradientes */
    --grad-topo:   linear-gradient(135deg, #071e54 0%, #0c3fa6 50%, #1558d6 100%);
    --grad-botao:  linear-gradient(135deg, #1558d6, #2979ff);
    --grad-cartao: linear-gradient(135deg, #0c3fa6, #1558d6);
    --grad-hero:   radial-gradient(ellipse 120% 80% at 50% -20%, #d6e4ff 0%, transparent 65%);

    /* Neutros */
    --fundo:       #f0f4fc;
    --fundo-2:     #e8eefa;
    --cartao:      #ffffff;
    --texto:       #0d1b40;
    --texto-2:     #3a4d7c;
    --texto-3:     #7388b0;
    --borda:       #cdd9f5;
    --borda-2:     #e0e8ff;

    /* Estado */
    --verde:       #0a7c52;
    --verde-bg:    #e3f7ee;
    --amarelo:     #8a5a00;
    --amarelo-bg:  #fff4dc;
    --vermelho:    #b71c1c;
    --vermelho-bg: #fdecea;
    --laranja:     #bf5000;
    --laranja-bg:  #fff1e6;

    /* Dimensões */
    --raio-sm:  8px;
    --raio:     14px;
    --raio-lg:  20px;
    --sombra-sm: 0 1px 3px rgba(12,63,166,.08), 0 4px 12px rgba(12,63,166,.06);
    --sombra:    0 2px 8px rgba(12,63,166,.10), 0 12px 32px rgba(12,63,166,.08);
    --sombra-lg: 0 4px 16px rgba(12,63,166,.14), 0 24px 64px rgba(12,63,166,.10);

    /* Animações */
    --trans: .18s ease;
}

/* ===== RESET BÁSICO ===== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    background: var(--fundo);
    color: var(--texto);
    font: 15px/1.55 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5rem; font-weight: 700; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ===== IMPORTAR INTER (Google Fonts, sem JS) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== BOTÕES ===== */
.botao {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    appearance: none; border: 1.5px solid transparent; border-radius: var(--raio-sm);
    padding: .55rem 1.1rem; font: 600 .9rem/1 inherit; cursor: pointer; text-decoration: none;
    transition: background var(--trans), box-shadow var(--trans), transform .08s;
    white-space: nowrap;
}
.botao:active { transform: translateY(1px); }
.botao:disabled { opacity: .5; cursor: not-allowed; }
.botao:focus-visible,
input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(41,121,255,.45); outline-offset: 2px; }

.botao-primario {
    background: var(--grad-botao); color: #fff;
    box-shadow: 0 2px 8px rgba(21,88,214,.35);
}
.botao-primario:hover:not(:disabled) {
    box-shadow: 0 4px 16px rgba(21,88,214,.45);
    filter: brightness(1.07);
}
.botao-suave {
    background: rgba(255,255,255,.13); color: #fff;
    border-color: rgba(255,255,255,.28); font-size: .85rem; padding: .42rem .8rem;
}
.botao-suave:hover:not(:disabled) { background: rgba(255,255,255,.22); }
.botao-contorno {
    background: #fff; color: var(--marca-2); border-color: var(--borda);
}
.botao-contorno:hover:not(:disabled) { border-color: var(--marca-2); background: var(--marca-5); }
.botao-largo { width: 100%; margin-top: .75rem; }

/* ===== MARCA / LOGO ===== */
.logo { height: 34px; width: auto; display: block; object-fit: contain; }
.marca {
    display: inline-flex; align-items: center; gap: .55rem;
    font-weight: 800; letter-spacing: -.2px; font-size: 1.1rem; color: #fff;
}
.marca-icone {
    display: inline-grid; place-items: center; width: 34px; height: 34px;
    border-radius: 10px; background: rgba(255,255,255,.2);
    border: 1.5px solid rgba(255,255,255,.35); color: #fff; font-weight: 900; font-size: 1rem;
}

/* ===== FORMULÁRIO DE LOGIN ===== */
.pagina-login {
    min-height: 100vh; display: grid; place-items: center; padding: 1rem;
    background: var(--grad-hero), var(--fundo);
}
.login-cartao {
    width: 100%; max-width: 420px;
    background: var(--cartao); border-radius: var(--raio-lg);
    padding: 2.25rem 2rem; box-shadow: var(--sombra-lg); border: 1px solid var(--borda-2);
}
.login-topo {
    display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-bottom: 1.75rem;
}
.login-icone {
    width: 56px; height: 56px; border-radius: 16px;
    background: var(--grad-cartao); display: grid; place-items: center;
    box-shadow: 0 4px 16px rgba(12,63,166,.3);
}
.login-icone svg { width: 30px; height: 30px; fill: #fff; }
.login-cartao h1 { font-size: 1.3rem; color: var(--texto); text-align: center; }
.login-sub { color: var(--texto-3); margin: -.25rem 0 0; font-size: .9rem; text-align: center; }
.login-cartao label {
    display: block; font-weight: 600; font-size: .85rem; color: var(--texto-2);
    margin: 1rem 0 .3rem;
}
.login-cartao input[type=text],
.login-cartao input[type=password] {
    width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
    font: inherit; font-size: .95rem; background: #fff; color: var(--texto);
    transition: border-color var(--trans), box-shadow var(--trans);
}
.login-cartao input:focus { border-color: var(--marca-2); box-shadow: 0 0 0 3px rgba(21,88,214,.12); }
.login-rodape { margin-top: 1.5rem; text-align: center; font-size: .8rem; color: var(--texto-3); }

.alerta { padding: .7rem .9rem; border-radius: var(--raio-sm); margin: 0 0 1rem; font-size: .9rem; font-weight: 500; }
.alerta-erro { background: var(--vermelho-bg); color: var(--vermelho); border: 1px solid #f5c5c2; }

/* ===== CABEÇALHO ===== */
.topo {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--grad-topo); color: #fff;
    padding: .7rem 1.5rem;
    position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 16px rgba(7,30,84,.35);
}
.topo-esquerda { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.topo-titulo {
    color: rgba(255,255,255,.75); font-weight: 500; font-size: .9rem;
    padding-left: .9rem; border-left: 1px solid rgba(255,255,255,.25);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topo-direita { display: flex; align-items: center; gap: .5rem; }
.topo-usuario { color: rgba(255,255,255,.75); font-size: .85rem; }
.form-sair { margin: 0; }

.faixa-aviso {
    background: var(--amarelo-bg); color: var(--amarelo); text-align: center;
    font-weight: 600; font-size: .85rem; padding: .4rem 1rem;
    border-bottom: 1px solid #f0d490;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.faixa-aviso::before { content: '⚠️'; }

/* ===== LAYOUT PRINCIPAL ===== */
.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 290px;
    gap: 1.25rem;
    max-width: 1200px; margin: 0 auto; padding: 1.25rem 1.5rem;
    align-items: start;
}

/* ===== CHAT ===== */
.chat {
    background: var(--cartao); border: 1px solid var(--borda-2);
    border-radius: var(--raio-lg); box-shadow: var(--sombra);
    display: flex; flex-direction: column;
    min-height: 72vh; max-height: calc(100vh - 130px);
    overflow: hidden;
}

.mensagens {
    flex: 1; overflow-y: auto; padding: 1.25rem;
    display: flex; flex-direction: column; gap: .85rem;
    scroll-behavior: smooth;
}

/* Scrollbar personalizada */
.mensagens::-webkit-scrollbar { width: 6px; }
.mensagens::-webkit-scrollbar-track { background: transparent; }
.mensagens::-webkit-scrollbar-thumb { background: var(--borda); border-radius: 99px; }

.msg { display: flex; gap: .55rem; max-width: 86%; }
.msg-bot  { align-self: flex-start; }
.msg-user { align-self: flex-end; flex-direction: row-reverse; }

.avatar {
    flex: none; width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center;
    background: var(--grad-cartao); color: #fff; font-weight: 800; font-size: .85rem;
    box-shadow: 0 2px 8px rgba(12,63,166,.25);
}

.balao {
    padding: .7rem .95rem; border-radius: 14px;
    white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55;
    font-size: .95rem;
}
.msg-bot  .balao { background: var(--fundo-2); border-top-left-radius: 4px; color: var(--texto); }
.msg-user .balao {
    background: var(--grad-botao); color: #fff;
    border-top-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(21,88,214,.3);
}
.msg-erro .balao { background: var(--vermelho-bg); color: var(--vermelho); }

/* Animação "digitando" */
.digitando .balao { display: inline-flex; gap: 5px; align-items: center; padding: .85rem 1rem; }
.digitando .ponto {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--marca-4);
    animation: pulsar 1.2s infinite ease-in-out;
}
.digitando .ponto:nth-child(2) { animation-delay: .18s; }
.digitando .ponto:nth-child(3) { animation-delay: .36s; }
@keyframes pulsar {
    0%, 80%, 100% { opacity: .3; transform: scale(.75); }
    40%            { opacity: 1;  transform: scale(1.05); }
}

/* ===== SUGESTÕES (chips) ===== */
.sugestoes { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 1.25rem; }
.sugestoes:not(:empty) { padding-bottom: .65rem; }
.chip {
    appearance: none; background: #fff; color: var(--marca-2);
    border: 1.5px solid var(--borda); border-radius: 999px;
    padding: .38rem .85rem; font: 600 .85rem/1 inherit; cursor: pointer;
    transition: border-color var(--trans), background var(--trans), box-shadow var(--trans);
}
.chip:hover {
    border-color: var(--marca-2); background: var(--marca-5);
    box-shadow: 0 1px 6px rgba(21,88,214,.15);
}

/* ===== ENTRADA DE TEXTO ===== */
.entrada {
    display: flex; gap: .6rem; padding: .8rem 1rem;
    border-top: 1px solid var(--borda-2); align-items: flex-end;
    background: #fff;
}
.entrada textarea {
    flex: 1; resize: none; max-height: 160px;
    border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
    padding: .6rem .85rem; font: inherit; font-size: .95rem;
    background: var(--fundo); color: var(--texto);
    transition: border-color var(--trans), box-shadow var(--trans);
}
.entrada textarea:focus {
    border-color: var(--marca-2); outline: none;
    box-shadow: 0 0 0 3px rgba(21,88,214,.12);
    background: #fff;
}
.entrada #btn-enviar {
    padding: .6rem 1rem;
    border-radius: var(--raio-sm);
    min-width: 72px;
}
.rodape-chat {
    margin: 0; padding: .4rem 1rem .7rem;
    color: var(--texto-3); font-size: .77rem; text-align: center;
    border-top: 1px solid var(--borda-2);
}

/* ===== PAINEL LATERAL (resumo) ===== */
.painel {
    background: var(--cartao); border: 1px solid var(--borda-2);
    border-radius: var(--raio-lg); box-shadow: var(--sombra-sm);
    padding: 1.1rem 1.2rem;
    position: sticky; top: 82px;
}
.painel-titulo {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .1em; color: var(--texto-3); margin: 0 0 .75rem;
    display: flex; align-items: center; gap: .4rem;
}
.painel-titulo::before {
    content: ''; display: block; width: 12px; height: 3px;
    background: var(--grad-botao); border-radius: 99px;
}
.resumo-lista {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: .35rem; font-size: .86rem;
}
.resumo-lista li {
    padding: .4rem .55rem; background: var(--fundo); border-radius: var(--raio-sm);
    border-left: 3px solid var(--marca-4); color: var(--texto-2); font-weight: 500;
    word-break: break-word;
}
.resumo-lista li.vazio { background: none; border-left: none; color: var(--texto-3); font-weight: 400; padding-left: 0; }

/* ===== CARTÃO DE RESULTADO ===== */
.resultado {
    align-self: stretch; max-width: 100%;
    border: 1px solid var(--borda-2); border-radius: var(--raio-lg);
    overflow: hidden; background: #fff; box-shadow: var(--sombra);
}

.resultado-topo {
    background: var(--grad-cartao); color: #fff;
    padding: 1.25rem 1.5rem;
}
.resultado-topo .selo {
    display: inline-block; font-size: .7rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    background: rgba(255,255,255,.18); border-radius: 999px;
    padding: .2rem .65rem; margin-bottom: .6rem;
    border: 1px solid rgba(255,255,255,.25);
}
.resultado-total { font-size: 2.1rem; font-weight: 800; letter-spacing: -.5px; line-height: 1.1; }
.resultado-total small {
    display: block; font-size: .82rem; font-weight: 400;
    color: rgba(255,255,255,.75); letter-spacing: 0; margin-top: .25rem;
}

.resultado-corpo { padding: 1.25rem 1.5rem; display: grid; gap: 1.2rem; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .6rem; }
.metrica {
    background: var(--fundo); border-radius: var(--raio-sm);
    padding: .7rem .85rem; border: 1px solid var(--borda-2);
}
.metrica span { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); }
.metrica strong { font-size: 1.1rem; font-weight: 700; color: var(--texto); }

.confianca-barra { height: 6px; background: #e0e8ff; border-radius: 99px; overflow: hidden; margin-top: .4rem; }
.confianca-barra > i { display: block; height: 100%; border-radius: 99px; background: var(--verde); }
.confianca-media  > i { background: #d99000; }
.confianca-baixa  > i { background: var(--vermelho); }

.resultado h3 {
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .09em; color: var(--texto-3); margin: 0 0 .5rem;
}

.tabela-horas { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela-horas td { padding: .4rem 0; border-bottom: 1px solid #edf1fb; }
.tabela-horas td:first-child { color: var(--texto-2); }
.tabela-horas td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.tabela-horas tr.total td { font-weight: 700; border-bottom: 0; padding-top: .65rem; color: var(--texto); }

.lista-simples { margin: 0; padding-left: 1.15rem; font-size: .9rem; color: var(--texto-2); }
.lista-simples li { margin: .2rem 0; }

/* Ferramentas no resultado */
.ferramenta-item {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem .7rem; background: var(--fundo);
    border-radius: var(--raio-sm); border: 1px solid var(--borda-2);
    font-size: .87rem;
}
.ferramenta-badge {
    font-size: .68rem; font-weight: 700; padding: .1rem .5rem;
    border-radius: 999px; white-space: nowrap;
}
.badge-nativa { background: var(--verde-bg); color: var(--verde); }
.badge-terceiros { background: var(--laranja-bg); color: var(--laranja); }
.ferramenta-nome { font-weight: 600; color: var(--texto); }
.ferramenta-fab  { color: var(--texto-3); font-size: .8rem; }

/* Info de licença */
.licenca-info {
    background: #eef3ff; border: 1px solid #bcd3ff; border-radius: var(--raio-sm);
    padding: .65rem .85rem; font-size: .87rem; color: var(--marca-1);
    display: flex; gap: .45rem; align-items: flex-start;
}
.licenca-info::before { content: '🔑'; flex: none; }

.aviso-legal {
    background: var(--amarelo-bg); color: #5a3a00; border: 1px solid #f0d490;
    border-radius: var(--raio-sm); padding: .65rem .85rem; font-size: .83rem;
}
.aviso-analise {
    background: #eef3ff; color: var(--marca-1); border: 1px solid #bcd3ff;
    border-radius: var(--raio-sm); padding: .8rem 1rem;
}

.resultado-acoes { display: flex; gap: .6rem; flex-wrap: wrap; }

/* ===== PÁGINAS DE ADMINISTRAÇÃO ===== */
.pagina-admin { padding: 1.25rem; }
.admin {
    max-width: 900px; margin: 0 auto; background: var(--cartao);
    border: 1px solid var(--borda-2); border-radius: var(--raio-lg);
    padding: 1.5rem; box-shadow: var(--sombra-sm);
}
.admin h2 { margin-top: 1.75rem; color: var(--marca-1); }
.tabela-admin { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; font-size: .9rem; }
.tabela-admin th, .tabela-admin td { text-align: left; padding: .5rem .65rem; border-bottom: 1px solid var(--borda-2); vertical-align: top; }
.tabela-admin th { font-size: .75rem; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-3); font-weight: 600; }
.tabela-admin td.sel { width: 90px; font-weight: 700; font-size: .8rem; }
.linha-ok       td.sel { color: var(--verde); }
.linha-atencao  td.sel { color: var(--amarelo); }
.linha-erro     td.sel { color: var(--vermelho); }
.detalhe { color: var(--texto-3); font-size: .83rem; }
.form-admin { display: grid; gap: .3rem; }
.form-admin label { font-weight: 600; font-size: .85rem; margin-top: .5rem; color: var(--texto-2); }
.form-admin small { color: var(--texto-3); font-weight: 400; }
.form-admin input[type=text], .form-admin select {
    padding: .5rem .7rem; border: 1.5px solid var(--borda); border-radius: var(--raio-sm);
    font: inherit; max-width: 420px;
}
.checks { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-admin .check { font-weight: 400; margin: 0; }
.form-admin button { margin-top: 1rem; justify-self: start; }

/* ===== RESPONSIVO ===== */
@media (max-width: 920px) {
    .layout { grid-template-columns: 1fr; padding: .75rem; gap: .85rem; }
    .painel { position: static; top: auto; }
    .chat   { max-height: none; min-height: 58vh; }
    .msg    { max-width: 95%; }
    .topo-titulo { display: none; }
    .topo-usuario { display: none; }
    .resultado-total { font-size: 1.7rem; }
}

@media (max-width: 480px) {
    .topo { padding: .6rem 1rem; }
    .resultado-corpo { padding: 1rem; }
    .resultado-topo  { padding: 1rem; }
}

/* ===== IMPRESSÃO ===== */
@media print {
    body * { visibility: hidden; }
    .resultado.imprimindo, .resultado.imprimindo * { visibility: visible; }
    .resultado.imprimindo {
        position: absolute; left: 0; top: 0; width: 100%;
        box-shadow: none; border: 0; border-radius: 0;
    }
    .resultado-acoes { display: none; }
    .resultado-topo {
        background: #fff !important; color: #000 !important;
        border-bottom: 2px solid #000;
    }
    .resultado-total, .resultado-total small { color: #000; }
}