/* Gfflog Administração — mesmo padrao visual do ERP (tokens, Inter, cartao de login escuro, sidebar arredondada). */
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Medium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --bg: #f3f4f6; --panel: #ffffff; --panel-soft: #f7f8fa; --line: rgba(100, 116, 139, .22); --line-soft: rgba(100, 116, 139, .12);
    --text: #0f172a; --muted: #64748b; --brand: #416a9d; --brand-strong: #34a5ff; --button: #416a9d; --button-hover: #4c79b0;
    --danger: #e5484d; --danger-bg: #fdecec; --success: #17a068; --warning: #b7791f; --warning-bg: #fff6df;
    --shadow: rgba(15, 23, 42, .08); --ease: cubic-bezier(.22, 1, .36, 1);
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #071120; --panel: #0c1728; --panel-soft: #111c30; --line: rgba(145, 163, 194, .2); --line-soft: rgba(145, 163, 194, .1);
        --text: #eef4ff; --muted: #98a7bd; --danger: #ff7a82; --danger-bg: #3a1a1e; --success: #3ddc97; --warning: #ffd24d; --warning-bg: #2f2710;
        --shadow: rgba(0, 0, 0, .32); color-scheme: dark;
    }
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Inter", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); }
h1 { margin: 0 0 4px; font-size: 26px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.subtitulo { margin: 0 0 22px; color: var(--muted); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--brand-strong); outline-offset: 2px; }

/* ---------- Estrutura interna ---------- */
.app { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 0; min-height: 100svh; }
.menu { position: sticky; top: 10px; height: calc(100svh - 20px); margin: 10px 0 10px 10px; display: flex; flex-direction: column; gap: 14px; padding: 20px 14px 12px;
    border: 1px solid var(--line-soft); border-radius: 20px; background: var(--panel); box-shadow: 0 8px 28px -14px var(--shadow); overflow: hidden; }
.menu-logo { display: block; padding: 0 8px 6px; }
.menu-logo img { display: block; width: 168px; height: auto; }
.menu-logo .logo-escuro { display: block; } .menu-logo .logo-claro { display: none; }
@media (prefers-color-scheme: dark) { .menu-logo .logo-escuro { display: none; } .menu-logo .logo-claro { display: block; } }
.menu-rotulo { margin: 8px 10px 2px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.menu nav { display: grid; gap: 2px; align-content: start; flex: 1; overflow-y: auto; }
.menu nav a, .menu nav .em-breve { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px; color: var(--muted); font-weight: 500; text-decoration: none; transition: background-color 160ms var(--ease), color 160ms var(--ease); }
.menu nav a:hover { background: var(--panel-soft); color: var(--text); }
.menu nav a.ativo { background: var(--brand); color: #fff; box-shadow: 0 8px 18px -10px rgba(65, 106, 157, .9); }
.em-breve { opacity: .5; cursor: not-allowed; }
.em-breve { gap: 8px; }
.em-breve small { margin-left: auto; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.menu-rodape { display: flex; align-items: center; gap: 10px; padding: 12px 8px 0; border-top: 1px solid var(--line-soft); }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-weight: 700; background: linear-gradient(135deg, #416a9d, #34a5ff); }
.usuario { flex: 1; min-width: 0; line-height: 1.25; }
.usuario strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usuario span { color: var(--muted); font-size: 12px; }
.sair-form { margin: 0; }
.botao-sair { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-soft); color: var(--muted); cursor: pointer; }
.botao-sair:hover { color: var(--text); border-color: var(--line); }
.botao-sair svg { width: 18px; height: 18px; }
.conteudo { padding: 28px 32px 40px; min-width: 0; }

/* ---------- Componentes ---------- */
.aviso { margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--line-soft); border-left: 4px solid #ffd24d; border-radius: 14px; background: var(--panel); }
.cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.cartao { display: grid; gap: 10px; padding: 18px 20px; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--panel); box-shadow: 0 8px 24px -16px var(--shadow); }
.cartao span { color: var(--muted); }
.cartao strong { font-size: 26px; font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }

/* ---------- Login (sempre escuro, igual ao do ERP) ---------- */
:root:has(main.auth-page) { color-scheme: dark; }
body:has(> main.auth-page) { background: radial-gradient(1200px 700px at 18% 12%, rgba(52, 165, 255, .10), transparent 60%), radial-gradient(900px 600px at 85% 90%, rgba(65, 106, 157, .16), transparent 62%), #060d19; }
.auth-page { --card: #0a1424; --campo: #0e1a2e; --campo-borda: rgba(148, 170, 205, .18); --campo-hover: rgba(148, 170, 205, .32); --a-texto: #eef3fb; --a-apoio: #9aa9c0; --acento: #34a5ff; --botao: #2f6fd6; --botao-hover: #3a7ce4;
    min-height: 100dvh; display: grid; place-items: center; padding: 28px 16px; color: var(--a-texto); }
.auth-cartao { width: min(1000px, 100%); min-height: min(620px, calc(100dvh - 40px)); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 12px; padding: 12px;
    border: 1px solid rgba(148, 170, 205, .12); border-radius: 26px; background: var(--card);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 2px 6px rgba(0, 0, 0, .28), 0 40px 90px -30px rgba(0, 0, 0, .7); }
.auth-arte { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 100%; padding: 30px 32px 34px; overflow: hidden; isolation: isolate; border-radius: 18px; background: #071a3d; }
.auth-arte::before { content: ""; position: absolute; inset: -30%; z-index: -2; filter: blur(28px) saturate(118%); animation: deriva 26s var(--ease) infinite alternate;
    background: radial-gradient(38% 42% at 30% 38%, #1d4fd0 0%, rgba(29, 79, 208, 0) 70%), radial-gradient(34% 38% at 72% 26%, #34a5ff 0%, rgba(52, 165, 255, 0) 72%), radial-gradient(40% 40% at 64% 78%, #416a9d 0%, rgba(65, 106, 157, 0) 70%), radial-gradient(30% 30% at 22% 82%, #0b2b6e 0%, rgba(11, 43, 110, 0) 70%), linear-gradient(160deg, #0a2a63 0%, #071a3d 55%, #050f24 100%); }
.auth-arte::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .22; mix-blend-mode: soft-light; pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>"); }
@keyframes deriva { from { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1); } to { transform: translate3d(3%, 3%, 0) rotate(8deg) scale(1.08); } }
.auth-arte-logo { width: 168px; height: auto; display: block; transform: translateX(-10.1%); }
.auth-arte-titulo { margin: 0; color: #fff; font-size: clamp(24px, 2.6vw, 31px); font-weight: 600; line-height: 1.18; letter-spacing: -.02em; text-wrap: balance; max-width: 16em; }
.auth-arte-apoio { max-width: 44ch; margin: 12px 0 0; color: rgba(226, 238, 255, .78); font-size: 14px; text-wrap: balance; }
.auth-conteudo { display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 392px; margin: 0 auto; padding: 40px 24px; }
.auth-marca { width: 36px; height: 36px; margin-bottom: 18px; object-fit: contain; }
.auth-conteudo h1 { color: #fff; font-size: 28px; font-weight: 600; letter-spacing: -.02em; }
.auth-sub { margin: 8px 0 28px; color: var(--a-apoio); }
.auth-campo { display: grid; gap: 7px; margin-bottom: 18px; position: relative; }
.auth-page label { color: #dbe4f1; font-size: 13px; font-weight: 500; }
.auth-page input:not([type="hidden"]) { height: 46px; padding: 0 14px; border: 1px solid var(--campo-borda); border-radius: 11px; color: var(--a-texto); caret-color: var(--acento); background: var(--campo); font: 500 14px "Inter", Arial, sans-serif; transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
.auth-page input::placeholder { color: #7d8da6; font-weight: 400; }
.auth-page input:hover { border-color: var(--campo-hover); }
.auth-page input:focus { border-color: rgba(52, 165, 255, .7); background: #0f1e35; box-shadow: 0 0 0 4px rgba(52, 165, 255, .14); outline: none; }
.auth-page input:-webkit-autofill { -webkit-text-fill-color: var(--a-texto); box-shadow: 0 0 0 1000px var(--campo) inset; transition: background-color 9999s ease-out; }
.auth-campo.com-olho input { padding-right: 46px; }
.auth-olho { position: absolute; right: 7px; bottom: 7px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: none; color: #7f8fa8; cursor: pointer; }
.auth-olho:hover { color: #fff; background: rgba(148, 170, 205, .12); }
.auth-olho svg { width: 18px; height: 18px; }
.auth-enviar { width: 100%; height: 48px; margin: 8px 0 0; border: 0; border-radius: 12px; color: #fff; background: var(--botao); font: 600 15px "Inter", Arial, sans-serif; cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px -10px rgba(47, 111, 214, .75); transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.auth-enviar:hover { background: var(--botao-hover); transform: translateY(-1px); }
.auth-enviar:active { transform: translateY(0) scale(.99); }
.auth-erro { margin: 0 0 18px; padding: 11px 14px; border: 1px solid rgba(255, 122, 130, .4); border-radius: 11px; background: rgba(255, 91, 102, .1); color: #ffb3b8; }
.auth-rodape { margin: 22px 0 0; color: var(--a-apoio); font-size: 12px; text-align: center; }

@media (max-width: 860px) {
    .app { grid-template-columns: 1fr; }
    .menu { position: static; height: auto; margin: 10px; padding: 12px; border-radius: 16px; }
    .menu-rotulo { display: none; }
    .menu nav { display: flex; overflow-x: auto; gap: 4px; flex: none; }
    .menu nav a, .menu nav .em-breve { white-space: nowrap; }
    .em-breve small { display: none; }
    .conteudo { padding: 16px 14px 32px; }
    .auth-cartao { grid-template-columns: 1fr; }
    .auth-arte { min-height: 220px; padding: 22px; }
    .auth-conteudo { padding: 28px 12px 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ---------- Telas de cadastro (planos, produtos) ---------- */
h2.secao { margin: 30px 0 12px; font-size: 18px; font-weight: 600; }
.cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.suave { color: var(--muted); }
.voltar { margin: 0 0 10px; } .voltar a { color: var(--brand); text-decoration: none; font-weight: 500; } .voltar a:hover { text-decoration: underline; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 18px; border: 1px solid transparent; border-radius: 10px; background: var(--button); color: #fff; font: 600 14px "Inter", Arial, sans-serif; text-decoration: none; cursor: pointer; transition: background-color 160ms var(--ease), transform 160ms var(--ease); }
.btn:hover { background: var(--button-hover); }
.btn:active { transform: scale(.98); }
.btn-sec { background: var(--panel); color: var(--text); border-color: var(--line); }
.btn-sec:hover { background: var(--panel-soft); }
.btn-peq { min-height: 32px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.filtros { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 0 0 18px; }
.filtros label, .form-cartao label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 500; }
input[type="text"], input[type="search"], input[type="number"], input:not([type]), input[inputmode], select, textarea, .tabela input:not([type="checkbox"]) {
    min-height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: 500 14px "Inter", Arial, sans-serif; }
textarea { padding: 10px 12px; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-strong); box-shadow: 0 0 0 3px rgba(52, 165, 255, .16); outline: none; }
.filtros input, .filtros select { min-width: 170px; width: auto; }
.tabela-area { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 16px; background: var(--panel); }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th { padding: 12px 14px; text-align: left; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.tabela td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabela .acoes { text-align: right; white-space: nowrap; }
.tabela .acoes > * { vertical-align: middle; }
.tabela input.curto { width: 80px; text-align: right; }
form.inline { display: inline; margin: 0 0 0 6px; }
.selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.selo-ok { background: rgba(23, 160, 104, .14); color: var(--success); }
.selo-neutro { background: var(--panel-soft); color: var(--muted); border: 1px solid var(--line-soft); }
.rodape-lista { margin: 12px 4px 0; font-size: 13px; }
.vazio { padding: 28px; border: 1px dashed var(--line); border-radius: 16px; color: var(--muted); text-align: center; }
.flash { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--line-soft); border-radius: 12px; background: var(--panel); }
.flash-ok { border-left: 4px solid var(--success); }
.flash-erro { border-left: 4px solid var(--danger); background: var(--danger-bg); }
.flash ul { margin: 6px 0 0; padding-left: 20px; }
.form-cartao { padding: 22px; border: 1px solid var(--line-soft); border-radius: 20px; background: var(--panel); max-width: 860px; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.grade .largo { grid-column: 1 / -1; }
.form-rodape { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.form-linha { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; } .form-linha label { flex: 1 1 200px; } .form-linha .largo { flex: 2 1 320px; }
.check { display: inline-flex !important; align-items: center; gap: 8px; color: var(--text) !important; } .check input { width: 18px; min-height: 18px; accent-color: var(--brand); }
.tabela td:nth-child(2), .tabela td:nth-child(3) { white-space: nowrap; }

/* ---------- Assinaturas ---------- */
.selo-aviso { background: rgba(214, 158, 46, .16); color: var(--warning); }
.selo-erro { background: rgba(229, 72, 77, .13); color: var(--danger); }
.acoes-topo { display: flex; gap: 8px; align-items: center; }
.resumo { margin-bottom: 14px; }
.cartao small { font-size: 12px; }
.duas-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 18px 0; align-items: start; }
.duas-colunas > form.form-cartao { max-width: none; margin: 0; }
.form-cartao.cheio { max-width: none; }
.form-cartao h3 { margin: 0 0 12px; font-size: 16px; font-weight: 600; }
form.form-cartao + form.form-cartao, .tabela-area + form.form-cartao { margin-top: 16px; }
.form-perigo { border-color: rgba(229, 72, 77, .35); }
.btn-perigo { background: var(--danger); } .btn-perigo:hover { background: #c93a3f; }
fieldset.extras { margin: 18px 0 0; padding: 14px 16px; border: 1px solid var(--line-soft); border-radius: 14px; display: grid; gap: 10px; }
fieldset.extras legend { padding: 0 6px; color: var(--muted); font-size: 13px; font-weight: 600; }
tr.item-removido td { color: var(--muted); }
.linha-tempo { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line-soft); }
.linha-tempo li { position: relative; padding: 0 0 14px 18px; }
.linha-tempo li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.linha-tempo time { display: block; color: var(--muted); font-size: 12px; }
input[type="date"] { min-height: 40px; width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font: 500 14px "Inter", Arial, sans-serif; }