/* ==========================================================================
   MordomIA — sistema visual
   Azul sentinela #0E2A38 · Azul Neurora #3B9DF8 · Areia #F4F1EA · Nevoa #DCEBFB
   Sora (titulos) · Inter (interface) · JetBrains Mono (datas, valores, tags)
   Mobile first. Movimento continuo: nada aparece ou some de forma seca.
   ========================================================================== */

:root {
    --sentinela: #0E2A38;
    --neurora: #3B9DF8;
    --areia: #F4F1EA;
    --nevoa: #DCEBFB;

    --sentinela-80: rgba(14, 42, 56, .8);
    --sentinela-60: rgba(14, 42, 56, .6);
    --sentinela-40: rgba(14, 42, 56, .4);
    --sentinela-12: rgba(14, 42, 56, .12);
    --sentinela-06: rgba(14, 42, 56, .06);
    --neurora-12: rgba(59, 157, 248, .12);
    --neurora-24: rgba(59, 157, 248, .24);

    --sucesso: #1F9D6B;
    --alerta: #D98324;
    --erro: #C2453D;

    --raio-sm: 10px;
    --raio: 16px;
    --raio-lg: 24px;

    --sombra-sm: 0 1px 2px rgba(14, 42, 56, .06), 0 2px 8px rgba(14, 42, 56, .04);
    --sombra: 0 2px 6px rgba(14, 42, 56, .06), 0 12px 28px rgba(14, 42, 56, .08);
    --sombra-lg: 0 8px 20px rgba(14, 42, 56, .1), 0 24px 56px rgba(14, 42, 56, .12);

    --easing: cubic-bezier(.22, .61, .36, 1);
    --rapido: 180ms var(--easing);
    --medio: 320ms var(--easing);
    --lento: 520ms var(--easing);

    --nav-altura: 64px;
    --largura-max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sentinela);
    background: var(--nevoa);
    background-image:
        radial-gradient(900px 480px at 88% -12%, rgba(59, 157, 248, .16), transparent 62%),
        radial-gradient(760px 420px at -8% 8%, rgba(244, 241, 234, .9), transparent 58%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .fonte-titulo {
    font-family: Sora, Inter, sans-serif;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin: 0 0 .5em;
}

h1 { font-size: 1.65rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

.mono, time, .valor, .tag, .metrica-numero {
    font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}

a { color: var(--neurora); text-decoration: none; transition: color var(--rapido); }
a:hover { color: var(--sentinela); }

/* --- Layout ------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--largura-max);
    margin: 0 auto;
    padding: 0 18px;
}

.pagina {
    padding: calc(var(--nav-altura) + 22px) 0 96px;
    animation: entrada var(--lento) both;
}

.grade { display: grid; gap: 16px; }
.grade-2 { grid-template-columns: 1fr; }
.grade-3 { grid-template-columns: 1fr; }
.grade-auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

@media (min-width: 720px) {
    body { font-size: 16px; }
    h1 { font-size: 2.1rem; }
    h2 { font-size: 1.45rem; }
    .container { padding: 0 28px; }
    .grade-2 { grid-template-columns: repeat(2, 1fr); }
    .grade-3 { grid-template-columns: repeat(3, 1fr); }
    .grade { gap: 20px; }
}

/* --- Cabecalho da pagina ------------------------------------------------ */

.cabecalho-pagina {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
}

.cabecalho-pagina p {
    margin: 0;
    color: var(--sentinela-60);
    font-size: .94rem;
}

/* --- Cartoes ------------------------------------------------------------ */

.cartao {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border: 1px solid var(--sentinela-12);
    border-radius: var(--raio);
    padding: 20px;
    box-shadow: var(--sombra-sm);
    transition: transform var(--medio), box-shadow var(--medio),
                border-color var(--medio);
}

.cartao:hover { box-shadow: var(--sombra); border-color: var(--neurora-24); }

.cartao-escuro {
    background: linear-gradient(155deg, var(--sentinela), #163a4d);
    color: var(--areia);
    border-color: transparent;
}

.cartao-escuro h1, .cartao-escuro h2, .cartao-escuro h3 { color: var(--areia); }
.cartao-escuro .rotulo { color: rgba(244, 241, 234, .68); }

.cartao-cabecalho {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.cartao-cabecalho h2, .cartao-cabecalho h3 { margin: 0; }

/* --- Metricas ----------------------------------------------------------- */

.metrica { display: flex; flex-direction: column; gap: 4px; }

.rotulo {
    font-size: .74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sentinela-60);
}

.metrica-numero {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.1;
}

.metrica-numero.positivo { color: var(--sucesso); }
.metrica-numero.negativo { color: var(--erro); }

/* --- Botoes ------------------------------------------------------------- */

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: var(--raio-sm);
    font-family: inherit;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--neurora);
    color: #fff;
    box-shadow: 0 2px 10px rgba(59, 157, 248, .28);
    transition: transform var(--rapido), box-shadow var(--rapido),
                background var(--rapido), opacity var(--rapido);
}

.botao:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(59, 157, 248, .34);
}

.botao:active { transform: translateY(0); }
.botao:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.botao-secundario {
    background: transparent;
    color: var(--sentinela);
    border-color: var(--sentinela-12);
    box-shadow: none;
}

.botao-secundario:hover {
    color: var(--sentinela);
    background: var(--sentinela-06);
    border-color: var(--sentinela-40);
    box-shadow: none;
}

.botao-perigo { background: var(--erro); box-shadow: none; }
.botao-bloco { width: 100%; }
.botao-pequeno { padding: 8px 14px; font-size: .86rem; }

/* --- Formularios -------------------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo label {
    display: block;
    margin-bottom: 6px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--sentinela-80);
}

.campo input, .campo select, .campo textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--sentinela);
    background: #fff;
    border: 1px solid var(--sentinela-12);
    border-radius: var(--raio-sm);
    transition: border-color var(--rapido), box-shadow var(--rapido);
}

.campo input:focus, .campo select:focus, .campo textarea:focus {
    outline: none;
    border-color: var(--neurora);
    box-shadow: 0 0 0 3px var(--neurora-12);
}

.campo .ajuda { margin-top: 6px; font-size: .8rem; color: var(--sentinela-60); }
.campo-erro input { border-color: var(--erro); }

.campo-linha { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .campo-linha { grid-template-columns: 1fr 1fr; } }

.campo-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--sentinela-80);
}

.campo-check input { width: auto; margin-top: 3px; }

/* --- Listas ------------------------------------------------------------- */

.lista { list-style: none; margin: 0; padding: 0; }

.lista-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--sentinela-12);
    animation: surgir var(--medio) both;
}

.lista-item:last-child { border-bottom: none; }
.lista-item-corpo { flex: 1; min-width: 0; }

.lista-item-titulo {
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lista-item-meta { font-size: .84rem; color: var(--sentinela-60); }

.marcador {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--neurora-12);
    color: var(--neurora);
    font-weight: 700;
    font-size: .78rem;
    font-family: "JetBrains Mono", monospace;
}

/* --- Tags e badges ------------------------------------------------------ */

.tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: var(--neurora-12);
    color: var(--neurora);
    white-space: nowrap;
}

.tag-sucesso { background: rgba(31, 157, 107, .14); color: var(--sucesso); }
.tag-alerta { background: rgba(217, 131, 36, .16); color: var(--alerta); }
.tag-erro { background: rgba(194, 69, 61, .14); color: var(--erro); }
.tag-neutro { background: var(--sentinela-06); color: var(--sentinela-60); }

/* --- Barra de progresso ------------------------------------------------- */

.progresso {
    height: 8px;
    border-radius: 999px;
    background: var(--sentinela-06);
    overflow: hidden;
}

.progresso-barra {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--neurora), #6fb8fb);
    transform-origin: left;
    animation: preencher var(--lento) var(--easing) both;
    transition: width var(--medio);
}

.progresso-barra.alerta { background: linear-gradient(90deg, var(--alerta), #e8a961); }
.progresso-barra.critico { background: linear-gradient(90deg, var(--erro), #d9736c); }

/* --- Estado vazio ------------------------------------------------------- */

.vazio {
    padding: 34px 20px;
    text-align: center;
    color: var(--sentinela-60);
}

.vazio-icone { font-size: 2rem; margin-bottom: 10px; opacity: .5; }

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

.aviso {
    padding: 13px 16px;
    border-radius: var(--raio-sm);
    border-left: 3px solid var(--neurora);
    background: var(--neurora-12);
    font-size: .9rem;
    margin-bottom: 16px;
    animation: surgir var(--medio) both;
}

.aviso-erro { border-left-color: var(--erro); background: rgba(194, 69, 61, .1); }
.aviso-sucesso { border-left-color: var(--sucesso); background: rgba(31, 157, 107, .1); }
.aviso-alerta { border-left-color: var(--alerta); background: rgba(217, 131, 36, .12); }

/* --- Autenticacao ------------------------------------------------------- */

.tela-auth {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 18px;
}

.caixa-auth {
    width: 100%;
    max-width: 424px;
    background: rgba(255, 255, 255, .93);
    backdrop-filter: blur(14px);
    border: 1px solid var(--sentinela-12);
    border-radius: var(--raio-lg);
    padding: 30px 26px;
    box-shadow: var(--sombra-lg);
    animation: entrada var(--lento) both;
}

.caixa-auth .marca { text-align: center; margin-bottom: 22px; }
.caixa-auth h1 { font-size: 1.45rem; text-align: center; margin-bottom: 6px; }

.caixa-auth .subtitulo {
    text-align: center;
    color: var(--sentinela-60);
    font-size: .92rem;
    margin: 0 0 22px;
}

.rodape-auth {
    margin-top: 20px;
    text-align: center;
    font-size: .88rem;
    color: var(--sentinela-60);
}

/* --- Codigo de verificacao ---------------------------------------------- */

.campos-codigo { display: flex; gap: 8px; justify-content: center; margin: 18px 0; }

.campos-codigo input {
    width: 46px;
    height: 56px;
    padding: 0;
    text-align: center;
    font-family: "JetBrains Mono", monospace;
    font-size: 1.4rem;
    font-weight: 700;
}

/* --- Utilitarios -------------------------------------------------------- */

.centro { text-align: center; }
.direita { text-align: right; }
.esconder { display: none !important; }
.espaco { margin-top: 22px; }
.espaco-sm { margin-top: 12px; }
.texto-suave { color: var(--sentinela-60); font-size: .88rem; }
.flex { display: flex; align-items: center; gap: 10px; }
.flex-entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.flex-quebra { flex-wrap: wrap; }

/* --- Movimento ---------------------------------------------------------- */

@keyframes entrada {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

@keyframes surgir {
    from { opacity: 0; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
}

@keyframes preencher {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

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

@keyframes pulsar {
    0%, 100% { opacity: 1; }
    50% { opacity: .45; }
}

/* Escalona a entrada dos itens de lista, evitando o "estouro" de tudo junto */
.lista-item:nth-child(1) { animation-delay: 20ms; }
.lista-item:nth-child(2) { animation-delay: 60ms; }
.lista-item:nth-child(3) { animation-delay: 100ms; }
.lista-item:nth-child(4) { animation-delay: 140ms; }
.lista-item:nth-child(5) { animation-delay: 180ms; }
.lista-item:nth-child(n+6) { animation-delay: 220ms; }

.girando { animation: girar 800ms linear infinite; }

.esqueleto {
    background: linear-gradient(90deg, var(--sentinela-06) 25%,
                rgba(255, 255, 255, .6) 50%, var(--sentinela-06) 75%);
    background-size: 220% 100%;
    animation: deslizar 1.3s ease-in-out infinite;
    border-radius: var(--raio-sm);
    min-height: 16px;
}

@keyframes deslizar {
    from { background-position: 220% 0; }
    to { background-position: -20% 0; }
}

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