/* css/06-cedula-app.css — identidade "Cédula" aplicada aos componentes de TODO o app.
   Carregado depois do CSS base: só reestiliza (tipografia, linhas, cantos), não muda layout
   nem comportamento. Valores e títulos no numeral de cédula; etiquetas em texto normal;
   indicadores como faixa de extrato; cartões com linha gravada. Cores via var(--accent). */

/* ── Tipografia: o serifado do app passa a ser o numeral de cédula ─────────── */
.page-title h2,.modal h3,.sb-logo h1,
[style*="font-family:'DM Serif Display'"],[style*="font-family: 'DM Serif Display'"]{
  font-family:var(--ced-serif)!important;font-weight:500!important;
  font-variant-numeric:lining-nums tabular-nums;
}
.page-title h2{font-size:30px;letter-spacing:-.5px;line-height:1.1}
.page-title p{font-size:13px}
.modal h3{font-size:24px;letter-spacing:-.3px}
td,.mc-val,.currency-input{font-variant-numeric:lining-nums tabular-nums}

/* ── Etiquetas: texto normal em vez de MAIÚSCULAS espaçadas ────────────────── */
.mc-label,.field label,th,.sb-group-label,
[style*="text-transform:uppercase"],[style*="text-transform: uppercase"]{
  text-transform:none!important;letter-spacing:.1px!important;
}
.mc-label{font-size:12.5px;margin-bottom:6px}
.field label{font-size:12.5px}
th{font-size:12px;font-weight:500;border-bottom-color:var(--ced-gravura-fina)}
.sb-group-label{font-size:11.5px;color:var(--muted)}

/* ── Indicadores (.metrics/.mc) como faixa de extrato ──────────────────────── */
.metrics{gap:0;overflow:hidden;border-top:1px solid var(--ced-gravura-fina);border-bottom:1px solid var(--ced-gravura-fina)}
.metrics .mc{background:none;border:none;border-radius:0;border-left:1px solid var(--ced-gravura-fina);margin-left:-1px;padding:16px 20px}
.mc-val{font-family:var(--ced-serif);font-weight:500;font-size:26px;letter-spacing:-.4px;line-height:1.1}
.mc-sub{font-size:12px}

/* ── Cartões: canto contido e linha gravada ─────────────────────────────────── */
.card{border-radius:8px;border-color:var(--ced-gravura-fina)}
.card h3{font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;letter-spacing:0}
.card h3 .dot{display:none}

/* ── Janelas ───────────────────────────────────────────────────────────────── */
.modal{border-radius:10px!important;border:1px solid var(--ced-gravura)!important}

/* ── Botões: menos "pílula", mais carimbo ──────────────────────────────────── */
.btn{border-radius:6px}
.btn.sm{border-radius:5px}
.btn.xs{border-radius:4px}

/* ── Abas: linha sob a ativa, como a área Patrimônio ───────────────────────── */
.tabs{background:none;border-radius:0;padding:0;gap:2px;border-bottom:1px solid var(--border)}
.tab-btn{border-radius:0;padding:10px 14px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab-btn.active{background:none;color:var(--accent);border-bottom-color:var(--accent)}

/* ── Menu lateral: item ativo marcado por um filete, não por uma pílula cheia ─ */
.nav-item.active{background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:inset 2px 0 0 var(--accent)}

@media(max-width:767px){
  .page-title h2{font-size:26px}
  .mc-val{font-size:22px}
  .metrics .mc{padding:14px 14px}
}

/* Tabelas largas (ex.: Renda Passiva) rolam dentro do próprio cartão no celular */
@media(max-width:767px){
  #sec-renda .card{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Posições de investimento como linhas de extrato (o estilo antigo dessa lista havia
   sido apagado num commit anterior e ela aparecia desmontada) */
.inv-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--ced-gravura-fina)}
.inv-item:last-child{border-bottom:none}
.inv-left{display:flex;align-items:center;gap:12px;min-width:0}
.inv-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.inv-name{font-size:14px;font-weight:500;color:var(--text)}
.inv-type{font-size:12px;color:var(--muted);margin-top:1px}
.inv-val{font-family:var(--ced-serif);font-weight:500;font-size:18px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}

/* ═══ Componentes que tinham perdido o estilo (commit antigo) — agora na linguagem Cédula ═══ */

/* Filtros (Histórico, Clientes): mesmos campos do app, com seta própria */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:16px}
.filter-bar select,.filter-bar input{height:36px;padding:0 12px;background:var(--surface2);border:1px solid var(--border2);border-radius:6px;color:var(--text);font:13px 'DM Sans',sans-serif;outline:none;transition:border-color .15s}
.filter-bar select{-webkit-appearance:none;appearance:none;padding-right:32px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8680' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:12px}
.filter-bar select:focus,.filter-bar input:focus{border-color:var(--accent)}

/* Metas: progresso */
.prog-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;color:var(--muted);margin-bottom:7px}
.prog-meta strong{font-family:var(--ced-serif);font-weight:500;font-size:17px;color:var(--text)}
.prog-track{height:4px;border-radius:2px;background:var(--surface3);overflow:hidden}
.prog-fill{height:100%;border-radius:2px;transition:width .6s ease}

/* Objetivos: lista com marcação */
.obj-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--ced-gravura-fina)}
.obj-item:last-child{border-bottom:none}
.obj-check{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--border2);display:grid;place-items:center;cursor:pointer;flex-shrink:0;transition:background .15s,border-color .15s}
.obj-check:hover{border-color:var(--accent)}
.obj-check.done{background:var(--accent);border-color:var(--accent)}
.obj-text{font-size:14px;color:var(--text)}
.obj-text.done{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--muted2)}
.obj-meta-row{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:2px}

/* Renda passiva: cenários como painéis de valor */
@media(min-width:768px){.rp-scenarios{grid-template-columns:1fr 1fr}}
.rp-patrimonio{overflow-wrap:anywhere}
.rp-scenario{border:1px solid var(--ced-gravura-fina);border-radius:8px;padding:18px 20px;background:var(--surface)}
.rp-result-grid{display:flex;flex-direction:column}
.rp-item{padding:12px 0;border-bottom:1px solid var(--ced-gravura-fina)}
.rp-item:last-child{border-bottom:none;padding-bottom:0}
.rp-renda-label{font-size:12.5px;color:var(--muted)}
.rp-patrimonio{font-family:var(--ced-serif);font-weight:500;font-size:26px;letter-spacing:-.3px;color:var(--text);font-variant-numeric:lining-nums tabular-nums;margin:2px 0}
.rp-falta{font-size:12px;color:var(--muted)}

/* Dashboard: linhas de "Todos os meses" */
.mes-row{transition:background .15s}
.mes-row:hover{background:var(--surface2)}
.sb-group-arrow{display:inline-block;transition:transform .2s}

/* Valores dos indicadores: branco no numeral de cédula (cor só para entrada/saída) */
.mc-val.blue,.mc-val.amber,.mc-val.purple{color:var(--text)}

/* Botão de ícone (editar) */
.btn.xs svg{width:12px;height:12px}

/* ═══ Histórico como extrato ═══ */
.ext-mes{margin-top:22px}
.ext-mes:first-child{margin-top:4px}
.ext-mes-cab{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--ced-gravura)}
.ext-mes-nome{font-family:var(--ced-serif);font-weight:500;font-size:22px;letter-spacing:-.3px;color:var(--text)}
.ext-mes-tot{display:flex;gap:16px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ext-mes-tot b{font-weight:500}
.ext-linha{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--ced-gravura-fina)}
.ext-dia{text-align:center;line-height:1}
.ext-dia b{display:block;font-family:var(--ced-serif);font-weight:500;font-size:20px;color:var(--text);font-variant-numeric:lining-nums}
.ext-dia span{font-size:11px;color:var(--muted)}
.ext-tit{font-size:14px;font-weight:500;color:var(--text)}
.ext-meta{font-size:12px;color:var(--muted);margin-top:2px}
.ext-meta .ext-parc{color:var(--amber)}
.ext-valor{font-family:var(--ced-serif);font-weight:500;font-size:18px;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;text-align:right;color:var(--text)}
.ext-valor.receita{color:var(--green)}
.ext-acoes{display:flex;gap:4px;opacity:.55;transition:opacity .15s}
.ext-linha:hover .ext-acoes,.ext-acoes:focus-within{opacity:1}
@media(max-width:767px){
  .ext-linha{grid-template-columns:36px 1fr auto;grid-template-rows:auto auto;column-gap:10px;row-gap:4px}
  .ext-linha>.ext-dia,.ext-linha>div:nth-child(2){grid-row:1 / span 2}
  .ext-valor{grid-row:1;grid-column:3}
  .ext-acoes{grid-row:2;grid-column:3;justify-content:flex-end;opacity:1}
  .ext-acoes .btn.xs{height:24px;padding:0 7px}
  .ext-mes-nome{font-size:19px}
  .ext-valor{font-size:16px}
}
@media(hover:none){.ext-acoes{opacity:1}}

/* Lançar por foto (Patrimônio) */
.lanc-foto-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px;border:1px dashed var(--ced-gravura);border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.lanc-foto-bar .btn{border-color:var(--accent);color:var(--accent)}
.lanc-foto-bar span{font-size:12.5px;color:var(--muted);flex:1;min-width:200px}
.lf-lido{border-color:var(--accent)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent);transition:box-shadow .4s}
@media(max-width:767px){.lanc-foto-bar .btn{width:100%;justify-content:center;height:44px}}
.lanc-foto-botoes{display:flex;gap:8px;flex-wrap:wrap}
.lanc-foto-bar .lanc-foto-principal{background:var(--accent);color:#0f0f0f;border-color:var(--accent);font-weight:600}
.lanc-foto-bar .btn{border-color:var(--ced-gravura);color:var(--text)}

/* Câmera ao vivo */
.cam-modal{max-width:560px;width:calc(100vw - 32px)}
.cam-palco{position:relative;background:#000;border-radius:8px;overflow:hidden;aspect-ratio:3/4;max-height:62vh;margin:0 auto}
.cam-palco video{width:100%;height:100%;object-fit:cover;display:block}
.cam-moldura{position:absolute;inset:8% 10%;border:2px solid color-mix(in srgb,var(--accent) 85%,transparent);border-radius:6px;box-shadow:0 0 0 999px rgba(0,0,0,.35);pointer-events:none}
.cam-erro{position:absolute;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:#F2EBDD;font-size:14px;background:rgba(0,0,0,.85)}
.cam-dica{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.cam-acoes .btn.primary{min-width:130px}
@media(max-width:767px){
  .lanc-foto-botoes{width:100%}
  .lanc-foto-botoes .btn{flex:1;height:44px;justify-content:center}
  .cam-palco{max-height:58vh}
}

/* Anexos (Patrimônio): campo no formulário, visor e consulta na edição */
.anexo-campo{margin-top:6px}
.anexo-vazio{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 14px;border:1px dashed var(--border2);border-radius:8px}
.anexo-vazio span{font-size:12.5px;color:var(--muted);margin-right:auto}
.anexo-preview{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--ced-gravura);border-radius:8px;background:color-mix(in srgb,var(--accent) 5%,transparent)}
.anexo-preview img{width:52px;height:52px;object-fit:cover;border-radius:6px;border:1px solid var(--border2);flex-shrink:0}
.anexo-preview div{flex:1;min-width:0;display:flex;flex-direction:column}
.anexo-preview b{font-size:13px;font-weight:600;color:var(--text)}
.anexo-preview span{font-size:12px;color:var(--muted)}
.anexo-modal{max-width:560px;width:calc(100vw - 32px)}
.anexo-visor{background:#000;border-radius:8px;min-height:160px;display:grid;place-items:center;overflow:hidden}
.anexo-visor img{max-width:100%;max-height:64vh;display:block}
.anexo-visor p{color:var(--muted);font-size:13px;padding:24px;text-align:center}
.anexo-trava{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-top:10px}
.anexo-leitura{display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border:1px solid var(--ced-gravura-fina);border-radius:8px;font-size:12.5px;color:var(--muted)}
.anexo-leitura svg{width:15px;height:15px;color:var(--accent);flex-shrink:0}
.anexo-leitura span{flex:1}
@media(max-width:767px){.anexo-vazio .btn{flex:1;justify-content:center}.anexo-vazio span{width:100%}}

/* O atributo hidden sempre esconde (display:flex/grid acima não podem anulá-lo) */
[hidden]{display:none!important}

/* Timer da câmera */
.cam-timer{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.cam-contagem{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--ced-serif);font-weight:500;font-size:120px;line-height:1;color:#F2EBDD;text-shadow:0 4px 30px rgba(0,0,0,.6);background:rgba(0,0,0,.18);pointer-events:none}