/* ======================================================================
   Central do Cliente - folha de estilo própria (não depende do Tailwind).

   Plano de design
   - Assunto: portal do assinante de um provedor de fibra. Público: clientes
     no celular, muitas vezes com pressa e sem intimidade com tecnologia.
     Trabalho principal: saber se a internet está ok e pagar a fatura.
   - Cor: tirada do logo (azul royal + vermelho). O vermelho é reservado
     para bloqueio e atraso, nunca decoração. Fundo frio, não creme.
   - Tipo: Unbounded (arredondada e larga, ecoa o letreiro do logo) só em
     títulos e valores; Lexend (desenhada para facilitar a leitura) no resto.
   - Gesto marcante: a "faixa de situação" no topo do painel, que diz em uma
     frase o estado da conexão e o valor a pagar. O resto fica quieto.
   - Motivo: os quadradinhos do logo (pacotes de dados) só no login.
   - Temas: claro e escuro (data-theme no <html>, escolha salva no aparelho).
   ====================================================================== */

:root {
    --paper: #f2f5fb;
    --surface: #ffffff;
    --ink: #14203d;
    --slate: #56627f;
    --line: #d8dfed;
    --royal: #0a3fc0;
    --royal-deep: #072b85;
    --royal-tint: #e7edfc;
    --red: #d9231a;
    --red-tint: #fdecea;
    --green: #0d7a53;
    --green-tint: #e3f3ec;
    --band: #0a3fc0;
    --band-ink: #ffffff;
    --logo-plate: transparent;
    --focus: #0a3fc0;
    color-scheme: light;

    --f-display: 'Unbounded', 'Lexend', system-ui, sans-serif;
    --f-text: 'Lexend', system-ui, sans-serif;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 22px;
}

:root[data-theme="dark"] {
    --paper: #08112a;
    --surface: #0f1b3d;
    --ink: #e9efff;
    --slate: #9eabc9;
    --line: #22335f;
    --royal: #5b88ff;
    --royal-deep: #3f6df0;
    --royal-tint: #16275a;
    --red: #ff6a5c;
    --red-tint: #3a1620;
    --green: #45d19c;
    --green-tint: #0f3330;
    --band: #0d3bb0;
    --band-ink: #ffffff;
    --logo-plate: transparent;
    --focus: #8fb0ff;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.c {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-text);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.c img { max-width: 100%; display: block; }
.c a { color: var(--royal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.c :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.c main { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }

.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.muted { color: var(--slate); }
.small { font-size: 14px; }

/* ---------- Topo ---------- */
.c-top { background: var(--surface); border-bottom: 1px solid var(--line); }
.c-top .wrap { height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-logo { display: inline-flex; align-items: center; padding: 4px 8px; margin-left: -8px; border-radius: 10px; background: var(--logo-plate); }
.c-logo img { height: 36px; width: auto; }
.c-top-actions { display: flex; align-items: center; gap: 8px; }
.c-hello { font-size: 15px; color: var(--slate); margin-right: 6px; }
.c-hello strong { color: var(--ink); font-weight: 600; }
@media (max-width: 520px) { .c-hello { display: none; } }

/* ---------- Botões ---------- */
.b {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border-radius: var(--r-md);
    border: 1.5px solid transparent; background: none;
    font: 600 16px/1 var(--f-text); color: inherit; text-decoration: none; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.b:active { transform: translateY(1px); }
.b-sm { min-height: 40px; padding: 0 14px; font-size: 15px; border-radius: var(--r-sm); }
.b-full { width: 100%; }
.c .b-primary { background: var(--royal); color: #fff; }
.c .b-primary:hover { background: var(--royal-deep); }
:root[data-theme="dark"] .c .b-primary { color: #06123a; }
.c .b-quiet { border-color: var(--line); color: var(--ink); background: var(--surface); }
.c .b-quiet:hover { border-color: var(--royal); color: var(--royal); }
.c .b-light { background: #fff; color: #0a3fc0; }
.c .b-light:hover { background: #e7edfc; }
.c .b-ghost-light { border-color: rgba(255, 255, 255, .55); color: #fff; }
.c .b-ghost-light:hover { border-color: #fff; background: rgba(255, 255, 255, .1); }
.c .b-icon { width: 40px; min-height: 40px; padding: 0; border-radius: var(--r-sm); border-color: var(--line); color: var(--ink); background: var(--surface); }
.c .b-icon:hover { border-color: var(--royal); color: var(--royal); }
.b svg { width: 20px; height: 20px; flex: none; }

/* Botão de tema: mostra o ícone do tema para o qual vai trocar */
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }

/* ---------- Avisos ---------- */
.note { padding: 14px 16px; border-radius: var(--r-md); font-size: 15px; border-left: 4px solid; background: var(--surface); }
.note + .note { margin-top: 10px; }
.note-ok { border-color: var(--green); background: var(--green-tint); }
.note-error { border-color: var(--red); background: var(--red-tint); }
.note-info { border-color: var(--royal); background: var(--royal-tint); }

/* ---------- Formulários ---------- */
.field { display: block; }
.field + .field { margin-top: 18px; }
.field-label { display: block; margin-bottom: 6px; font-size: 15px; font-weight: 500; }
.input {
    width: 100%; min-height: 52px; padding: 12px 14px;
    border: 1.5px solid var(--line); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink);
    font: 400 17px/1.4 var(--f-text);
    transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--slate); opacity: .7; }
.input:focus { outline: none; border-color: var(--royal); box-shadow: 0 0 0 4px var(--royal-tint); }
textarea.input { resize: vertical; min-height: 120px; }
select.input { appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356627f' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 18px; }
.pass-wrap { position: relative; }
.pass-wrap .input { padding-right: 56px; }
.pass-toggle { position: absolute; right: 6px; top: 6px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: none; color: var(--slate); cursor: pointer; }
.pass-toggle:hover { color: var(--royal); }
.pass-toggle svg { width: 22px; height: 22px; }
.pass-toggle .i-hide { display: none; }
.pass-toggle[aria-pressed="true"] .i-show { display: none; }
.pass-toggle[aria-pressed="true"] .i-hide { display: block; }

/* ======================================================================
   Login
   ====================================================================== */
.login { flex: 1; display: grid; grid-template-columns: 1fr; }
.login-art {
    position: relative; overflow: hidden;
    background: var(--band); color: var(--band-ink);
    padding: 28px 20px 30px; min-height: 210px;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.login-art .packets { position: absolute; inset: 0; width: 100%; height: 100%; }
.login-art-text { position: relative; max-width: 520px; }
.login-art h2 { margin: 0; font: 600 clamp(22px, 5.6vw, 40px)/1.15 var(--f-display); letter-spacing: -.01em; }
.login-art ul { list-style: none; margin: 28px 0 0; padding: 0; display: none; max-width: 380px; }
.login-art li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: 16px; }
.login-art li svg { width: 22px; height: 22px; flex: none; opacity: .9; }

.login-form-side { display: flex; flex-direction: column; padding: 28px 20px 40px; background: var(--paper); }
.login-form { width: 100%; max-width: 400px; margin: 0 auto; }
.login-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.login-form .c-logo img { height: 44px; }
.login h1 { margin: 26px 0 6px; font: 600 26px/1.2 var(--f-display); letter-spacing: -.01em; }
.login .note { margin-top: 20px; }
.login form { margin-top: 26px; }
.login .b-full { margin-top: 24px; }
.login-help { margin-top: 22px; font-size: 15px; color: var(--slate); }
.login-foot { margin-top: auto; padding-top: 32px; max-width: 400px; width: 100%; margin-left: auto; margin-right: auto; font-size: 14px; }

.packets rect { fill: #fff; }
.packets rect.r { fill: #ff4a3d; }
@media (prefers-reduced-motion: no-preference) {
    .packets rect { opacity: 0; animation: pkt .6s ease-out forwards; animation-delay: calc(var(--d) * 1ms); }
    @keyframes pkt { from { opacity: 0; transform: translateX(-14px); } to { opacity: var(--o); transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
    .packets rect { opacity: var(--o); }
}

@media (min-width: 900px) {
    .login { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }
    .login-art { padding: 56px 56px 64px; min-height: 0; justify-content: flex-end; }
    .login-art ul { display: block; }
    .login-form-side { padding: 40px 40px 28px; }
    .login-form { margin: auto; }
    .login-foot { margin-top: 0; }
}

/* ======================================================================
   Painel
   ====================================================================== */
.status { background: var(--band); color: var(--band-ink); }
.status.is-blocked { background: #c8241b; }
.status .wrap { padding-top: 34px; padding-bottom: 36px; display: grid; gap: 26px; }
.status-state { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 15px; opacity: .92; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #6ef0b4; box-shadow: 0 0 0 4px rgba(110, 240, 180, .25); }
.is-blocked .status-dot, .is-late .status-dot { background: #fff; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25); }
.status h1 { margin: 8px 0 0; font: 600 clamp(26px, 5vw, 40px)/1.15 var(--f-display); letter-spacing: -.015em; max-width: 22ch; }
.status-sub { margin: 10px 0 0; max-width: 46ch; opacity: .9; }
.status-pay { display: flex; flex-direction: column; gap: 10px; }
.status-amount { font: 600 clamp(38px, 8vw, 56px)/1 var(--f-display); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.status-amount small, .pix-amount small { font-size: .42em; font-weight: 500; letter-spacing: 0; margin-right: 6px; vertical-align: .55em; }
.status-due { font-size: 15px; opacity: .9; margin: 0 0 8px; }
.status-amount { margin: 0; }
.status-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 820px) {
    .status .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px; padding-top: 48px; padding-bottom: 52px; }
    .status-pay { align-items: flex-end; text-align: right; }
    .status-actions { justify-content: flex-end; flex-wrap: nowrap; }
}

.board { padding-top: 34px; padding-bottom: 56px; display: grid; gap: 34px; }
@media (min-width: 960px) {
    .board { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
    .board > .notes { grid-column: 1 / -1; }
}
.col { display: grid; gap: 34px; align-content: start; }
.sec h2 { margin: 0 0 12px; font: 600 19px/1.3 var(--f-display); letter-spacing: -.005em; }
.sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.sheet-pad { padding: 22px; }

/* Faturas: linhas em uma única folha */
.inv { display: grid; gap: 14px; padding: 18px 22px; }
.inv + .inv { border-top: 1px solid var(--line); }
.inv-main { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.inv-date { font-weight: 500; }
.inv-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 6px; font-size: 13px; font-weight: 600; vertical-align: 1px; background: var(--red-tint); color: var(--red); }
.inv-value { font: 600 22px/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap; }
.inv-late .inv-value { color: var(--red); }
.inv-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.empty { padding: 30px 22px; text-align: center; }
.empty strong { display: block; font: 600 19px/1.3 var(--f-display); margin-bottom: 4px; }

/* Contratos */
.ct { padding: 18px 22px; }
.ct + .ct { border-top: 1px solid var(--line); }
.ct h3 { margin: 0; font-size: 17px; font-weight: 600; }
.ct p { margin: 4px 0 0; }
.state { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; font-size: 14px; font-weight: 600; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.state-ok { color: var(--green); }
.state-blocked { color: var(--red); }
.state-off { color: var(--slate); }
.ct form { margin-top: 14px; }

/* Chamados */
.tk { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 22px; }
.tk + .tk { border-top: 1px solid var(--line); }
.tk-title { font-weight: 500; }
.tk-meta { font-size: 14px; color: var(--slate); }
.tk-status { font-size: 13px; font-weight: 600; padding: 3px 9px; border-radius: 6px; background: var(--royal-tint); color: var(--royal); white-space: nowrap; }

fieldset.topics { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.topics legend { padding: 0; margin-bottom: 8px; font-size: 15px; font-weight: 500; }
.topic-list { display: flex; flex-wrap: wrap; gap: 8px; }
.topic { position: relative; }
.topic input { position: absolute; opacity: 0; pointer-events: none; }
.topic span {
    display: inline-flex; align-items: center; min-height: 42px; padding: 0 14px;
    border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface);
    font-size: 15px; cursor: pointer; transition: border-color .15s, background-color .15s, color .15s;
}
.topic span:hover { border-color: var(--royal); }
.topic input:checked + span { background: var(--royal); border-color: var(--royal); color: #fff; }
:root[data-theme="dark"] .topic input:checked + span { color: #06123a; }
.topic input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.ticket-form .field { margin-top: 18px; }
.ticket-form .b { margin-top: 18px; }

/* ---------- PIX ---------- */
.pix { max-width: 560px; padding-top: 28px; padding-bottom: 56px; }
.back { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; text-decoration: none !important; }
.back svg { width: 18px; height: 18px; }
.pix h1 { margin: 18px 0 0; font: 600 26px/1.2 var(--f-display); }
.pix-amount { margin-top: 14px; font: 600 46px/1 var(--f-display); letter-spacing: -.03em; color: var(--royal); font-variant-numeric: tabular-nums; }
.pix .sheet { margin-top: 24px; padding: 24px; }
.qr { width: 232px; height: 232px; margin: 0 auto; padding: 12px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.qr img, .qr canvas { width: 100% !important; height: 100% !important; }
.steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 10px; }
.steps li { counter-increment: s; display: flex; gap: 12px; align-items: baseline; }
.steps li::before { content: counter(s); flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--royal-tint); color: var(--royal); font-size: 14px; font-weight: 600; }
.pix-code { margin-top: 20px; font: 400 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; word-break: break-all; min-height: 0; }
.pix .b-full { margin-top: 12px; }

/* ---------- Rodapé ---------- */
.c-foot { border-top: 1px solid var(--line); background: var(--surface); }
.c-foot .wrap { padding-top: 20px; padding-bottom: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; font-size: 14px; color: var(--slate); }

/* Logo sem fundo: no tema escuro, clareia um pouco o azul para não sumir */
:root[data-theme="dark"] .c-logo img { filter: brightness(1.45) saturate(1.1); }

/* ==========================================================================
   Celular: login cabe numa tela e painel mais compacto
   ========================================================================== */
@media (max-width: 599px) {
    .wrap { padding: 0 16px; }
    .b { min-height: 44px; padding: 0 16px; font-size: 15px; }
    .b-sm { min-height: 36px; padding: 0 12px; font-size: 14px; }
    .c .b-icon { width: 38px; min-height: 38px; }
    .c-top .wrap { height: 60px; }
    .c-logo img { height: 30px; }

    /* Login */
    .login-art { min-height: 0; padding: 18px 16px 16px; }
    .login-art h2 { font-size: 18px; max-width: 26ch; }
    .login-art .packets { opacity: .75; }
    .login-form-side { padding: 18px 16px 22px; }
    .login-form .c-logo img { height: 34px; }
    .login h1 { margin: 16px 0 4px; font-size: 22px; }
    .login .muted { font-size: 14.5px; }
    .login .note { margin-top: 14px; }
    .login form { margin-top: 16px; }
    .field + .field { margin-top: 14px; }
    .input { min-height: 46px; font-size: 16px; }
    .login .b-full { margin-top: 18px; min-height: 48px; }
    .login-help { margin-top: 14px; font-size: 14px; }
    .login-foot { padding-top: 16px; }

    /* Painel: faixa de situação */
    .status .wrap { padding-top: 20px; padding-bottom: 22px; gap: 14px; }
    .status h1 { font-size: 23px; margin-top: 6px; }
    .status-sub { font-size: 14.5px; margin-top: 6px; }
    .status-amount { font-size: 38px; }
    .status-due { font-size: 14px; margin-bottom: 4px; }
    .status-actions { gap: 8px; }
    .status-actions > * { flex: 1 1 140px; }
    .status-actions .b, .status-actions form .b { width: 100%; }

    /* Painel: listas */
    .board { padding-top: 24px; padding-bottom: 40px; gap: 26px; }
    .col { gap: 26px; }
    .sec h2 { font-size: 17px; margin-bottom: 10px; }
    .inv { padding: 14px 16px; gap: 10px; }
    .inv-value { font-size: 19px; }
    .inv-actions .b-primary { flex: 1 1 auto; }
    .ct, .tk { padding: 14px 16px; }
    .sheet-pad { padding: 16px; }
    .topic span { min-height: 38px; padding: 0 12px; font-size: 14px; }
    textarea.input { min-height: 96px; }

    /* PIX */
    .pix { padding-top: 18px; padding-bottom: 32px; }
    .pix h1 { font-size: 22px; margin-top: 12px; }
    .pix-amount { font-size: 38px; margin-top: 10px; }
    .pix .sheet { margin-top: 16px; padding: 18px; }
    .qr { width: 200px; height: 200px; }
    .steps { margin-top: 16px; font-size: 14.5px; }

    .c-foot .wrap { font-size: 13px; padding-top: 14px; padding-bottom: 14px; }
}
@media (max-width: 599px) {
    .status-actions > * { flex: 1 1 100%; }
}

/* ==========================================================================
   Tablet em pé (600–899px)
   ========================================================================== */
@media (min-width: 600px) and (max-width: 899px) {
    /* Login: faixa azul com as vantagens e formulário centralizado na tela */
    .login { grid-template-rows: auto 1fr; min-height: 100vh; min-height: 100svh; }
    .login-art { min-height: 0; padding: 36px 40px 32px; }
    .login-art h2 { font-size: 30px; max-width: 22ch; }
    .login-art ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; max-width: none; }
    .login-art li { align-items: flex-start; font-size: 15px; }
    .login-form-side { justify-content: center; padding: 32px 40px; }
    .login-form { margin: auto; }
    .login-foot { margin-top: 0; }
}
@media (min-width: 700px) and (max-width: 959px) {
    /* Painel em duas colunas */
    .board { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; gap: 24px; }
    .board > .notes { grid-column: 1 / -1; }
    .inv { grid-template-columns: 1fr; }
    .status .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; }
    .status-pay { align-items: flex-end; text-align: right; }
    .status-actions { flex-direction: column; align-items: stretch; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .login-art ul { display: none; }
    .login-art { padding: 40px 40px 34px; }
    .login-art-text { position: relative; z-index: 2; }
}