/* Identidade visual Paguno — carregado DEPOIS de app.css e extra.css.
   Paleta: primária #0F766E · secundária #99F6E4 · escura #0F172A · suporte #475569 · fundo #F8FAFC.
   Tipografia: Plus Jakarta Sans (títulos e destaques) + Inter (interface e textos). Fontes locais (CSP: font-src 'self'). */

@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:200 800;font-display:swap;src:url('/assets/fonts/plus-jakarta-sans-latin-wght.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('/assets/fonts/inter-latin-wght.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --primary:#0F766E;--primary-dark:#0B5F5A;
  --mint:#99F6E4;--mint-soft:#E6FBF6;--mint-strong:#2DD4BF;
  --navy:#0F172A;--ink:#0F172A;--muted:#475569;--subtle:#64748B;
  --bg:#F8FAFC;--surface:#FFFFFF;--line:#E2E8F0;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px rgba(15,23,42,.05);
}
html,body{background:var(--bg);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased;font-feature-settings:'cv11','ss01'}
body{font-size:14px;line-height:1.5}

/* Títulos e destaques: Plus Jakarta Sans */
.h1,.auth-title,.section-title,.price-xl,.brand,.tagline,.empty-state strong,.detail-title,.pay-amount,h1,h2,h3{font-family:var(--font-display)}
.h1{font-weight:800;letter-spacing:-.025em;color:var(--navy)}
.section-title{font-weight:800;letter-spacing:-.015em}
.price-xl{font-weight:800;letter-spacing:-.03em}

/* Marca */
.brand{display:flex;align-items:center;gap:10px;font-size:25px;font-weight:800;letter-spacing:-.04em;color:var(--navy)}
.brand .mark{width:30px;height:32px;flex:none}
.mobile-top .brand{font-size:21px;gap:8px}
.mobile-top .brand .mark{width:25px;height:27px}

/* Menu lateral escuro (desktop) */
.sidebar{background:var(--navy);border-right:0;color:#CBD5E1}
.sidebar .brand{color:#fff}
.side-label{color:#94A3B8}
.side-link{color:#CBD5E1;font-weight:600}
.side-link:hover{background:rgba(255,255,255,.07);color:#fff}
.side-link.active{background:rgba(153,246,228,.14);color:var(--mint)}
.side-link.active svg{color:var(--mint)}
.side-bottom{border-top:1px solid rgba(255,255,255,.1)}
.side-user strong{color:#fff}
.side-user small{color:#94A3B8}
.avatar-sm{background:rgba(153,246,228,.16);color:var(--mint)}
.sidebar form .side-link{color:#CBD5E1}

/* Topo móvel e navegação inferior */
.mobile-top{background:#fff;border-bottom:1px solid var(--line)}
.user-circle{background:var(--mint-soft);color:var(--primary-dark);font-family:var(--font-display);font-weight:800}
.bottomnav{border-top:1px solid var(--line)}
.bottomnav a{color:var(--subtle)}
.bottomnav a.active{color:var(--primary)}

/* Cartões e botões */
.card{border:1px solid var(--line);box-shadow:var(--shadow);border-radius:18px}
.btn{background:var(--primary);border-radius:12px;font-weight:700;letter-spacing:-.005em;box-shadow:0 1px 0 rgba(255,255,255,.12) inset}
.btn:hover{background:var(--primary-dark)}
.btn-outline{background:#fff;color:var(--navy);border:1px solid #CBD5E1;box-shadow:none}
.btn-outline:hover{background:#F1F5F9}
.btn-soft{background:var(--mint-soft);color:var(--primary-dark);box-shadow:none}
.btn-soft:hover{background:#D5F7EF}
.btn-danger{background:#FEF2F2;color:#B42318;border:1px solid #FECACA;box-shadow:none}
.link{color:var(--primary)}

/* Chips de status (formato pílula) */
.chip{border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;letter-spacing:0}
.chip.success{background:#DCFCE7;color:#166534}
.chip.warning{background:#FEF3C7;color:#92400E}
.chip.danger{background:#FEE2E2;color:#B42318}
.chip.blue{background:#DBEAFE;color:#1E40AF}
.chip.neutral{background:#E2E8F0;color:#334155}

/* Textos secundários com contraste AA (≥ 4,5:1) */
.sub,.hint,.help,.muted,.listrow .grow small,.date,.detail-meta .muted,.kpis-note,.pay-row small,.metric small{color:var(--muted)}
.hint,.help,.listrow .grow small,.date,.pay-row small{color:var(--subtle)}
.input::placeholder,.textarea::placeholder{color:#64748B;opacity:1}
.label{color:var(--navy)}
.input,.select,.textarea{border-color:#CBD5E1;border-radius:11px}
.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(15,118,110,.16)}
:focus-visible{outline:3px solid var(--mint-strong);outline-offset:2px}

/* Listas, abas, estados vazios */
.tab.active{color:var(--primary);border-color:var(--primary)}
.empty-icon{background:var(--mint-soft);color:var(--primary);border-radius:18px}
.secure-item .sicon{background:var(--mint-soft);color:var(--primary)}
a.listrow:hover{background:#F8FAFC}
.notice{background:var(--mint-soft);border-color:#B7F0E4;color:#0B5F5A}
.stepper .step.on{background:var(--primary)}

/* Login e telas de entrada */
body.auth{background:radial-gradient(70% 55% at 88% -5%,rgba(153,246,228,.45),transparent 70%),radial-gradient(50% 40% at -5% 105%,rgba(15,118,110,.10),transparent 70%),var(--bg);min-height:100vh}
.auth-logo{display:block;width:84px;height:84px;margin:6px auto 16px;border-radius:24px;box-shadow:0 14px 34px rgba(15,118,110,.30)}
.auth-title{font-weight:800;letter-spacing:-.04em;font-size:34px}
.tagline{text-align:center;font-weight:800;letter-spacing:-.03em;font-size:20px;line-height:1.25;margin:10px 0 28px;color:var(--navy)}
.tagline span{display:block;color:var(--primary)}
.auth-panel{background:#fff;border:1px solid var(--line);border-radius:20px;padding:26px;box-shadow:var(--shadow)}
@media(max-width:800px){.auth-panel{padding:22px 18px}.auth .auth-page{padding-top:48px}}

/* Ajustes de contraste encontrados na auditoria (todos ≥ 4,5:1) */
.dev-banner{color:#7C4400}
.timeline-item small{color:var(--subtle)}
.timeline-item strong{color:var(--navy)}
.searchbar{color:var(--subtle)}
.searchbar svg{color:var(--subtle)}

/* Celular: abas rolam sem barra nativa; campos de data/mês nunca passam da coluna */
.tabs{scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
.form-two{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.form-two>*,.field{min-width:0}
.input[type=date],.input[type=month]{min-width:0;width:100%;max-width:100%}

/* ===== Painel (Visão geral) ===== */
.dash-head{align-items:flex-end;flex-wrap:wrap;gap:16px}
.dash-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.month-nav{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.month-form{display:flex;align-items:center;gap:8px;margin:0}
.month-input{width:auto;min-width:160px;height:40px}
.month-btn{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid #CBD5E1;border-radius:11px;background:#fff;color:var(--navy)}
.month-btn:hover{background:#F1F5F9}
.month-btn svg{width:18px;height:18px}
.btn svg{width:18px;height:18px}

.kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:16px}
.kpi{padding:20px 22px;position:relative}
.kpi-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.kicon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--mint-soft);color:var(--primary)}
.kicon svg{width:20px;height:20px}
.kpi-amber .kicon{background:#FEF3C7;color:#92400E}
.kpi-red .kicon{background:#FEE2E2;color:#B42318}
.kpi-label{font-size:12px;font-weight:600;color:var(--muted)}
.kpi-value{font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.035em;color:var(--navy);margin:4px 0 6px;overflow-wrap:anywhere}
.kpi-note{font-size:11px;line-height:1.45;color:var(--subtle)}

.dash-bottom{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.chart{width:100%;height:auto;display:block}
.chart-value{font-size:12px;font-weight:700;fill:#0F172A;font-family:var(--font)}
.chart-label{font-size:13px;fill:#475569;font-family:var(--font);font-weight:500}
.chart-label.is-current{fill:#0F766E;font-weight:800}
.chart-range{font-size:12px}
.chart-empty{padding:30px 10px}

.guide{margin-bottom:16px}
.guide-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.guide-steps li{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.guide-steps li div{flex:1;min-width:0}
.guide-steps strong{display:block;font-size:13px;color:var(--navy)}
.guide-steps small{display:block;font-size:12px;color:var(--subtle)}
.guide-steps li.done{background:var(--mint-soft);border-color:#B7F0E4}
.guide-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--primary);color:#fff;font-weight:800;font-size:13px;flex:none}
.guide-steps li.done .guide-n{background:var(--mint-strong);color:#0F172A}

@media(max-width:800px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .kpi:first-child{grid-column:1/-1}
  .kpi{padding:16px}
  .kpi-value{font-size:20px}
  .kpi:first-child .kpi-value{font-size:26px}
  .dash-bottom{grid-template-columns:1fr}
  .dash-head{align-items:flex-start}
  .dash-actions{width:100%}
  .month-nav{width:100%}
}

/* Caixa de seleção com explicação (consentimento) */
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff}
.check input{width:20px;height:20px;margin-top:2px;accent-color:var(--primary);flex:none}
.check strong{display:block;font-size:13px;color:var(--navy)}
.check small{display:block;font-size:12px;line-height:1.5;color:var(--subtle);margin-top:3px}

/* ===== Lembretes (WhatsApp manual) ===== */
.textarea.tall{height:auto;min-height:150px;line-height:1.55;resize:vertical;font-size:13px}
.template-card summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;min-height:36px}
.template-card summary::-webkit-details-marker{display:none}
.template-card summary::after{content:'▾';color:var(--subtle);margin-left:8px}
.template-card[open] summary::after{content:'▴'}
.sample{background:#F8FAFC;border:1px dashed #CBD5E1;border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:13px;line-height:1.55}
.sample p{margin:6px 0 0}
code{background:#EEF2F6;border-radius:6px;padding:1px 6px;font-size:12px;color:var(--navy)}
.remind-row{align-items:flex-start}
.remind-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px;text-align:right;flex:none}
.listrow .grow small .chip{margin-right:4px}
.recipient{display:flex;flex-direction:column;gap:10px}
.recipient-line{display:flex;gap:14px;font-size:13px}
.recipient-line .muted{width:76px;flex:none}
.recipient-line strong{color:var(--navy);min-width:0;overflow-wrap:anywhere}
.steps{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.steps li{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:14px;flex-wrap:wrap}
.steps li>div{flex:1;min-width:200px}
.steps strong{display:block;font-size:13px;color:var(--navy)}
.steps small{display:block;font-size:12px;line-height:1.5;color:var(--subtle);margin-top:2px}
.copy-status{flex-basis:100%;font-size:12px;color:var(--primary-dark);min-height:0}
.steps form{margin:0}
@media(max-width:800px){.remind-row{flex-direction:column;gap:10px}.remind-side{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;align-items:center}.steps li>div{min-width:100%}}

/* Títulos longos com etiqueta de estado: no celular a etiqueta desce para baixo do título */
@media(max-width:800px){.section-head{flex-wrap:wrap;align-items:flex-start}}

/* ===== Relatórios ===== */
.kpi-grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-grid-4 .kpi-value{font-size:24px}
.rf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rf-grid .field{margin-bottom:0}
.rf-actions{margin-top:16px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-list{width:100%;border-collapse:collapse;min-width:640px}
.table-list th,.table-list td{padding:12px 10px;border-bottom:1px solid #EDF1F4;text-align:left;font-size:13px;vertical-align:middle}
.table-list thead th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--subtle);font-weight:700;white-space:nowrap}
.table-list tbody th{font-weight:600;color:var(--navy)}
.table-list .num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.table-list tbody tr:last-child th,.table-list tbody tr:last-child td{border-bottom:0}
.export-actions{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:1000px){.kpi-grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.rf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:800px){.kpi-grid-4 .kpi:first-child{grid-column:auto}.kpi-grid-4 .kpi-value{font-size:18px}.rf-grid{grid-template-columns:1fr}.table-list{min-width:560px}}

/* E13: segurança da conta */
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.badge-ok { background: #CCFBF1; color: #0F5F58; }
.plain-list { list-style: none; margin: 0 0 16px; padding: 0; }
.plain-list li { padding: 12px 0; border-bottom: 1px solid #E2E8F0; }
.plain-list li:last-child { border-bottom: 0; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.steps-list { margin: 0 0 16px; padding-left: 20px; line-height: 1.6; color: #334155; }
.secret-key { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #F1F5F9; color: #0F172A; font-size: 18px; letter-spacing: 2px; word-break: break-all; user-select: all; }
.recovery-codes { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recovery-codes li { padding: 10px 12px; border-radius: 10px; background: #F1F5F9; text-align: center; }
.recovery-codes code { font-size: 16px; letter-spacing: 1px; color: #0F172A; }
section.card { margin-bottom: 16px; padding: 20px; }
section.card .h2 { margin: 0 0 8px; font-size: 18px; font-weight: 700; }
section.card .sub { margin: 0 0 14px; }
section.card .btn + .btn { margin-left: 8px; }

/* E14: backoffice e plano */
.badge-warn { background: #FEF3C7; color: #78350F; }
.alert-info { background: #E0F2FE; color: #0C4A6E; border: 1px solid #BAE6FD; }
.admin-body { background: var(--bg); }
.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: var(--navy); color: #fff; }
.admin-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 800; color: #fff; text-decoration: none; }
.admin-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.admin-nav a, .admin-link { color: #E2E8F0; text-decoration: none; padding: 8px 12px; border-radius: 8px; background: none; border: 0; font: inherit; cursor: pointer; }
.admin-nav a:hover, .admin-link:hover { background: rgba(255, 255, 255, .1); }
.admin-nav a[aria-current="page"] { background: rgba(153, 246, 228, .16); color: #99F6E4; }
.admin-main { max-width: 1080px; margin: 0 auto; padding: 24px 16px 48px; }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th, .admin-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); background: #F1F5F9; }
.admin-table tbody tr:last-child th, .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-search { margin: 16px 0; }
.admin-search .input { flex: 1; min-width: 0; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin: 12px 0 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 600; }
.pager { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 16px 0; }
.inline-form { display: inline; }

/* E15: aviso de conexão */
.offline-banner { position: sticky; top: 0; z-index: 50; padding: 10px 16px; background: #78350F; color: #fff; text-align: center; font-weight: 600; }
.offline-banner[hidden] { display: none; }

/* Páginas legais */
.legal { max-width: 760px; margin: 0 auto; padding: 8px 0 40px; line-height: 1.65; color: #334155; }
.legal h1 { margin: 12px 0 8px; }
.legal h2 { margin: 28px 0 8px; font-family: var(--font-display); font-size: 18px; color: var(--navy); }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal-draft { padding: 10px 14px; border-radius: 10px; background: #FEF3C7; color: #78350F; }
.legal-table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 14px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.legal-table thead th { background: #F1F5F9; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* QR do 2FA (fundo branco sempre, para leitura da câmera) */
.qr-box { display: flex; justify-content: center; margin: 12px 0; }
.qr-box img { background: #fff; padding: 8px; border: 1px solid var(--line); border-radius: 12px; max-width: 100%; height: auto; }
.qr-fallback { margin: 8px 0 16px; }
.qr-fallback summary { cursor: pointer; color: var(--primary); font-weight: 600; }