/*
 * Visual da home do ERP (resources/views/home.blade.php lá): fundo cinza
 * #f0f0f0, texto navy #00002d, azul da marca #004cff, cards brancos de borda
 * fina, botões em pílula, SF Pro Display. O tema escuro usa os mesmos tons de
 * resources/css/site-dark.css: fundo #111114, card #1c1c21, texto #f4f4f5 e
 * azul de texto clareado para #7b9cff.
 */

@font-face { font-family: 'SF Pro Display'; src: url('fonts/SFPRODISPLAYREGULAR.OTF') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SFPRODISPLAYMEDIUM.OTF') format('opentype'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('fonts/SFPRODISPLAYBOLD.OTF') format('opentype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-300-latin.woff2') format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('fonts/poppins-600-latin.woff2') format('woff2'); font-weight: 600; font-display: swap; }

:root {
    --pagina: #f0f0f0;
    --card: #fff;
    --card-interno: #f6f6f8;
    --tinta: 0 0 45;
    --azul: #004cff;
    --azul-hover: #0039cc;
    --azul-texto: #004cff;
    --ok: #16a34a;
    --ok-barra: #22c55e;
    --lento: #d97706;
    --lento-barra: #f59e0b;
    --fora: #dc2626;
    --fora-barra: #ef4444;
    --guia-marca: #d6d8e3;
    color-scheme: light;
}

html.dark {
    --pagina: #111114;
    --card: #1c1c21;
    --card-interno: #26262c;
    --tinta: 244 244 245;
    --azul-texto: #7b9cff;
    --ok: #4ade80;
    --lento: #fbbf24;
    --fora: #f87171;
    --guia-marca: #3f3f48;
    color-scheme: dark;
}

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

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

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--pagina);
    color: rgb(var(--tinta));
    font-family: 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.5;
}

a { color: inherit; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }
svg { flex-shrink: 0; }

/* ---- Navbar: barra cinza de ponta a ponta, como a da home ---- */

.nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--pagina);
    border-bottom: 1px solid rgb(var(--tinta) / .1);
    padding-top: env(safe-area-inset-top, 0px);
}
.nav-conteudo {
    position: relative;
    max-width: 80rem;
    margin: 0 auto;
    padding: .75rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
@media (min-width: 640px) { .nav-conteudo { padding: .75rem 1.5rem; } }

.marca {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    text-decoration: none;
    transition: opacity .2s;
}
.marca:hover { opacity: .8; }
.marca img { width: 2.25rem; height: 2.25rem; }
.marca-nome {
    display: block;
    font-family: 'Poppins', 'SF Pro Display', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
    line-height: 1.1;
}
.marca-tag {
    display: block;
    font-family: 'Poppins', 'SF Pro Display', system-ui, sans-serif;
    font-weight: 300;
    font-size: 9px;
    letter-spacing: .16em;
    text-transform: uppercase;
    line-height: 1.15;
    white-space: nowrap;
    color: rgb(var(--tinta) / .6);
}

.nav-acoes { display: flex; align-items: center; gap: .5rem; }

.botao-tema {
    width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: rgb(var(--tinta) / .7);
    cursor: pointer;
    transition: color .2s, background-color .2s;
}
.botao-tema svg { width: 1.25rem; height: 1.25rem; }
.botao-tema .icone-sol, html.dark .botao-tema .icone-lua { display: none; }
html.dark .botao-tema .icone-sol { display: block; }

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .625rem 1.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .2s;
}
.botao svg { width: 1rem; height: 1rem; transition: transform .2s; }
.botao-primario {
    background: var(--azul);
    color: #fff;
    box-shadow: 0 10px 15px -3px rgb(0 76 255 / .25), 0 4px 6px -4px rgb(0 76 255 / .25);
}
.marca-nome { white-space: nowrap; }
/* Celular: logo, tema e botão numa linha só, sem o nome quebrar em dois. */
@media (max-width: 479px) {
    .nav-conteudo { gap: .5rem; }
    .nav-acoes { gap: .25rem; }
    .botao { padding: .5rem .875rem; font-size: .8125rem; }
    .botao svg { display: none; }
    .marca-nome { font-size: 1rem; }
    .marca-tag { font-size: 8px; letter-spacing: .1em; }
}

/* Hover só com mouse: no toque o :hover gruda até o próximo toque. */
@media (hover: hover) and (pointer: fine) {
    .botao-tema:hover { color: rgb(var(--tinta)); background: rgb(var(--tinta) / .05); }
    .botao-primario:hover { background: var(--azul-hover); }
    .botao-primario:hover svg { transform: translateX(2px); }
    .servico-nome a:hover { color: var(--azul-texto); }
}

:focus-visible { outline: 2px solid var(--azul-texto); outline-offset: 2px; }

/* Reflexo que atravessa o botão principal a cada 6s. */
.brilho { position: relative; overflow: hidden; isolation: isolate; }
.brilho::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / .35) 50%, transparent 65%);
    transform: translateX(-100%);
    animation: brilho-passa 6s ease-in-out 2.5s infinite;
    pointer-events: none;
}
@keyframes brilho-passa {
    0%        { transform: translateX(-100%); }
    25%, 100% { transform: translateX(100%); }
}

/* ---- Guias laterais (partials/guias da home): linhas nas bordas da coluna
   de 80rem, hachura no header e um feixe azul descendo de tempos em tempos.
   Só a partir de 1280px, quando sobra calha fora da coluna. ---- */

.nav-marcas, .guias { display: none; }
@media (min-width: 1280px) {
    .nav-marcas, .guias {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
    }
    .nav-marcas-col, .guias-col {
        position: relative;
        height: 100%;
        max-width: 80rem;
        margin: 0 auto;
        border-left: 1px solid rgb(var(--tinta) / .1);
        border-right: 1px solid rgb(var(--tinta) / .1);
    }
    .nav-marcas { background-image: repeating-linear-gradient(135deg, rgb(var(--tinta) / .07) 0 1px, transparent 1px 10px); }
    html.dark .nav-marcas { background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / .05) 0 1px, transparent 1px 10px); }
    html.dark .nav-marcas-col, html.dark .guias-col { border-color: rgb(255 255 255 / .08); }
    .nav-marcas-col { background: var(--pagina); }
    .nav-losango {
        position: absolute;
        bottom: -.5px;
        width: 9px;
        height: 9px;
        border-radius: 1px;
        background: var(--guia-marca);
        transform: translate(-50%, 50%) rotate(45deg);
        animation: marca-acende 1.6s ease-out .8s both;
    }
    .guias-col {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16rem), transparent calc(100% - 2rem));
        mask-image: linear-gradient(to bottom, #000 calc(100% - 16rem), transparent calc(100% - 2rem));
    }
    .guias-col::before, .guias-col::after {
        content: '';
        position: absolute;
        top: 0;
        width: 1px;
        height: 10rem;
        background: linear-gradient(to bottom, transparent, rgb(0 76 255 / .6), transparent);
        animation: guia-feixe 9s cubic-bezier(.45, 0, .55, 1) infinite;
    }
    .guias-col::before { left: -1px; }
    .guias-col::after  { right: -1px; animation-delay: 4.5s; }
}
@keyframes guia-feixe {
    0%        { top: 0; opacity: 0; }
    10%, 45%  { opacity: 1; }
    55%, 100% { top: calc(100% - 10rem); opacity: 0; }
}
@keyframes marca-acende {
    0%, 100% { background: var(--guia-marca); box-shadow: 0 0 0 0 rgb(0 76 255 / 0); }
    30%      { background: #004cff; box-shadow: 0 0 0 5px rgb(0 76 255 / .15), 0 0 14px rgb(0 76 255 / .5); }
}

/* ---- Hero ---- */

main {
    position: relative;
    flex: 1;
    width: 100%;
    padding: 0 1rem 4rem;
}
@media (min-width: 640px) { main { padding: 0 1.5rem 5rem; } }

.hero {
    position: relative;
    max-width: 56rem;
    margin: 0 auto;
    padding: 4rem 0 3rem;
    text-align: center;
}
@media (min-width: 640px) { .hero { padding: 6rem 0 4rem; } }

.selo {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 2rem;
    padding: .375rem .875rem;
    background: var(--card);
    border: 1px solid rgb(var(--tinta) / .1);
    border-radius: 9999px;
    font-size: .875rem;
    color: rgb(var(--tinta) / .8);
    box-shadow: 0 1px 2px rgb(0 0 45 / .05);
}

h1 {
    margin: 0;
    font-size: 2.5rem;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
}
@media (min-width: 640px) { h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { h1 { font-size: 4.5rem; } }

.destaque { color: var(--azul-texto); }
.destaque--lento { color: var(--lento); }
.destaque--fora { color: var(--fora); }

.hero-texto {
    max-width: 42rem;
    margin: 1.5rem auto 0;
    font-size: 1.125rem;
    line-height: 1.625;
    color: rgb(var(--tinta) / .7);
}
@media (min-width: 768px) { .hero-texto { font-size: 1.25rem; } }

.hero-meta {
    margin: 1.5rem 0 0;
    font-size: .875rem;
    color: rgb(var(--tinta) / .6);
}

.aviso {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin: 1.25rem auto 0;
    padding: .625rem 1rem;
    border-radius: 1rem;
    background: rgb(245 158 11 / .12);
    color: var(--lento);
    font-size: .875rem;
    font-weight: 500;
    text-align: left;
}
.aviso svg { width: 1.25rem; height: 1.25rem; }

/* ---- Pontos e chips de status ---- */

.ponto {
    position: relative;
    width: .5rem;
    height: .5rem;
    border-radius: 9999px;
    background: rgb(var(--tinta) / .3);
    flex-shrink: 0;
}
.ponto--ok { background: var(--ok-barra); }
.ponto--lento { background: var(--lento-barra); }
.ponto--fora { background: var(--fora-barra); }
/* Anel que pulsa: o selo do topo e os serviços com problema. */
.selo .ponto::after, .ponto--fora::after, .ponto--lento::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    animation: pulsa 2s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes pulsa {
    75%, 100% { transform: scale(2.6); opacity: 0; }
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .25rem .7rem;
    border-radius: 9999px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgb(var(--tinta) / .05);
    color: rgb(var(--tinta) / .7);
}
.chip--ok { background: rgb(34 197 94 / .12); color: var(--ok); }
.chip--lento { background: rgb(245 158 11 / .14); color: var(--lento); }
.chip--fora { background: rgb(239 68 68 / .12); color: var(--fora); }

/* ---- Blocos (cards) ---- */

.bloco {
    position: relative;
    max-width: 56rem;
    margin: 0 auto 1.5rem;
    background: var(--card);
    border: 1px solid rgb(var(--tinta) / .08);
    border-radius: 1.5rem;
    box-shadow: 0 1px 2px rgb(0 0 45 / .04);
}
html.dark .bloco { border-color: rgb(255 255 255 / .06); box-shadow: none; }

.bloco-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgb(var(--tinta) / .08);
}
@media (min-width: 640px) { .bloco-topo { padding: 1.5rem 1.75rem 1.125rem; } }
.bloco-topo h2 { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em; }

.legenda {
    display: flex;
    align-items: center;
    gap: .875rem;
    font-size: .75rem;
    color: rgb(var(--tinta) / .6);
}
.legenda > span { display: inline-flex; align-items: center; gap: .375rem; }
.legenda .barra { width: .5rem; height: .75rem; display: inline-block; }

.servicos, .incidentes { list-style: none; margin: 0; padding: 0; }

.servico { padding: 1.25rem; }
@media (min-width: 640px) { .servico { padding: 1.5rem 1.75rem; } }
.servico + .servico { border-top: 1px solid rgb(var(--tinta) / .08); }

.servico-topo {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.servico-nome { min-width: 0; }
.servico-nome h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; }
.servico-nome a {
    display: block;
    margin-top: .125rem;
    font-size: .8125rem;
    color: rgb(var(--tinta) / .55);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s;
}
.servico-estado { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }
.tempo { font-size: .8125rem; color: rgb(var(--tinta) / .55); font-variant-numeric: tabular-nums; }
@media (max-width: 399px) { .tempo { display: none; } }

.servico-erro {
    margin: .75rem 0 0;
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: rgb(239 68 68 / .08);
    color: var(--fora);
    font-size: .8125rem;
    overflow-wrap: anywhere;
}

/* ---- Barras de 90 dias (30 no celular) ---- */

.barras {
    display: flex;
    gap: 2px;
    height: 2.25rem;
    margin-top: 1rem;
}
.barra {
    flex: 1;
    min-width: 0;
    border-radius: 2px;
    background: rgb(var(--tinta) / .1);
    transition: opacity .15s, transform .15s;
    outline-offset: 1px;
}
.barra--ok { background: var(--ok-barra); }
.barra--parcial { background: var(--lento-barra); }
.barra--grave { background: var(--fora-barra); }
.barras:hover .barra { opacity: .55; }
.barras .barra:hover, .barras .barra:focus-visible { opacity: 1; transform: scaleY(1.08); }

@media (max-width: 639px) {
    .barras { gap: 3px; }
    .barras .barra:nth-child(-n+60) { display: none; }
}

.servico-rodape {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: .625rem;
    font-size: .75rem;
    color: rgb(var(--tinta) / .5);
    white-space: nowrap;
}
.servico-rodape .linha { flex: 1; height: 1px; background: rgb(var(--tinta) / .08); }
.servico-rodape .uptime { color: rgb(var(--tinta) / .75); font-weight: 600; font-variant-numeric: tabular-nums; }
.so-estreito { display: none; }
@media (max-width: 639px) {
    .so-largo { display: none; }
    .so-estreito { display: inline; }
}

/* ---- Incidentes ---- */

.vazio {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1.5rem 1.25rem;
    font-size: .9375rem;
    color: rgb(var(--tinta) / .7);
}
@media (min-width: 640px) { .vazio { padding: 1.75rem; } }
.vazio-icone, .incidente-icone {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.vazio-icone svg, .incidente-icone svg { width: 1.125rem; height: 1.125rem; }
.vazio-icone, .incidente-icone--ok { background: rgb(34 197 94 / .12); color: var(--ok); }
.incidente-icone--fora { background: rgb(239 68 68 / .12); color: var(--fora); }

.incidente {
    display: flex;
    gap: .875rem;
    padding: 1.125rem 1.25rem;
}
@media (min-width: 640px) { .incidente { padding: 1.25rem 1.75rem; } }
.incidente + .incidente { border-top: 1px solid rgb(var(--tinta) / .08); }
.incidente-corpo { min-width: 0; }
.incidente-titulo { margin: 0; font-weight: 600; font-size: .9375rem; line-height: 1.35; }
.incidente-meta { margin: .125rem 0 0; font-size: .8125rem; color: rgb(var(--tinta) / .6); }
.incidente-erro {
    margin: .5rem 0 0;
    font-size: .8125rem;
    color: rgb(var(--tinta) / .6);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    overflow-wrap: anywhere;
}

/* ---- Rodapé ---- */

.rodape {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    max-width: 80rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgb(var(--tinta) / .1);
    font-size: .8125rem;
    color: rgb(var(--tinta) / .55);
}
@media (min-width: 640px) { .rodape { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* ---- Dica das barras ---- */

.dica {
    position: fixed;
    z-index: 60;
    max-width: calc(100vw - 2rem);
    padding: .5rem .75rem;
    border-radius: .75rem;
    background: #00002d;
    color: #fff;
    font-size: .8125rem;
    line-height: 1.35;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: 0 10px 25px -5px rgb(0 0 45 / .3);
}
html.dark .dica { background: #f4f4f5; color: #111114; }

/* ---- Entrada (hero-rise da home) ---- */

@keyframes surge {
    from { opacity: 0; transform: translate3d(0, 24px, 0); }
    to   { opacity: 1; transform: none; }
}
.surge { animation: surge .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s) both; }

@media (prefers-reduced-motion: reduce) {
    .surge, .brilho::after, .nav-losango { animation: none; }
    .brilho::after, .guias-col::before, .guias-col::after { display: none; }
    .selo .ponto::after, .ponto--fora::after, .ponto--lento::after { animation: none; }
    .barra { transition: none; }
}