/* Estadísticas, Reportes y Calculadora */

/* ---------- Comunes ---------- */
.ins-card{margin-bottom:16px}
.ins-h{margin-bottom:14px}
.ins-h h2{margin:0;font-size:18px;font-weight:800;letter-spacing:-.01em}
.ins-h h2:before{content:"";display:inline-block;width:4px;height:16px;border-radius:3px;background:var(--accent);margin-right:9px;vertical-align:-2px}
.ins-h small{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.ins-sep{height:1px;background:var(--stroke);margin:14px 0}
.ins-sub{color:var(--muted);font-size:13px;font-weight:600;margin-bottom:6px}
.ins-line{display:flex;align-items:center;gap:10px;padding:4px 0}
.ins-line .grow{flex:1;min-width:0}
.ins-line .grow b{display:block}
.ins-line .grow small{display:block;color:var(--muted);font-size:12px}
.ins-line > svg{width:18px;height:18px;flex:none}
.ins-bigicon{width:34px!important;height:34px!important;color:var(--accent)}

/* ---------- Estadísticas ---------- */
.ins-monthnav{justify-content:center;margin:0 0 18px}
.ins-monthnav b{font-size:17px}
.ins-monthnav .iconbtn{width:40px;height:40px;border-radius:12px}
.ins-monthnav .iconbtn:disabled{opacity:.3;cursor:default}
.ins-grid{display:grid;gap:0}
@media (min-width:960px){.ins-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;align-items:start}}
.ins-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ins-stats small{display:block;color:var(--muted);font-size:12px}
.ins-stats b{display:block;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-rate{font-size:21px;font-weight:800}
.ins-meter{height:6px;border-radius:3px;background:var(--high);margin-top:10px;overflow:hidden}
.ins-meter i{display:block;height:100%;border-radius:3px;background:var(--income)}
.ins-meter i.neg{background:var(--expense)}
.ins-bars{display:flex;align-items:stretch;gap:6px}
.ins-axis{display:flex;flex-direction:column;justify-content:space-between;height:170px;font-size:10px;color:var(--muted);text-align:right;flex:none;max-width:84px;overflow:hidden}
.ins-plot{flex:1;min-width:0}
.ins-plot svg{display:block;width:100%;height:170px}
.ins-xlabels{display:flex;margin-top:6px}
.ins-xlabels span{flex:1;text-align:center;font-size:11px;color:var(--muted)}
.ins-legend{display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--muted)}
.ins-legend span{display:inline-flex;align-items:center;gap:6px}
.ins-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.ins-change{display:inline-flex;align-items:center;gap:4px;font-size:17px;font-weight:800;white-space:nowrap}
.ins-catwrap{display:grid;gap:14px}
.ins-donutbox{position:relative;width:190px;height:190px;margin:0 auto}
.ins-donut{width:190px;height:190px;display:block}
.ins-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 46px}
.ins-center small{color:var(--muted);font-size:12px}
.ins-center b{font-size:18px;line-height:1.15;word-break:break-word}
.ins-catlist{display:flex;flex-direction:column}
.ins-cat{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:9px;text-align:left;width:100%}
.ins-cat:hover{background:rgba(255,255,255,.03)}
.ins-cat.on{background:var(--high)}
.ins-cat i{width:10px;height:10px;border-radius:50%;flex:none}
.ins-cat svg{width:16px;height:16px}
.ins-cat .grow{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-cat b{white-space:nowrap;font-weight:600}
.ins-cat small{width:44px;text-align:right;color:var(--muted);font-size:12px;flex:none}
.ins-movs{margin-top:4px}
.ins-fact{display:flex;align-items:center;gap:12px;padding:10px 0;width:100%;text-align:left}
.ins-fact + .ins-fact{border-top:1px solid var(--stroke)}
.ins-fact > svg{color:var(--accent);width:20px;height:20px}
.ins-fact .grow{flex:1;min-width:0;color:var(--muted);font-size:14px}
.ins-fact b{font-size:14px;text-align:right;max-width:58%}
button.ins-fact:hover b{color:var(--accent)}

/* ---------- Reportes (formulario) ---------- */
.ins-reports{max-width:560px}
.ins-foot{font-size:13px;margin:-4px 6px 16px}
.ins-reports .field input[type=date]{color-scheme:dark}

/* ---------- Reporte (hoja blanca, igual al PDF) ---------- */
.ins-toolbar{flex-wrap:wrap}
.ins-actions{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:640px){.ins-actions{width:100%}.ins-actions .btn{flex:1;padding:0 12px}}
.report{background:#fff;color:#1C1C1F;border-radius:6px;overflow:hidden;max-width:816px;margin:0 auto 24px;
  box-shadow:0 14px 40px rgba(0,0,0,.45);font-size:12px;line-height:1.4;font-feature-settings:"tnum" 1}
.rp-top{background:#0A0F21;color:#fff;display:flex;gap:14px;align-items:flex-start;padding:30px 40px 24px}
.rp-top svg{width:40px;height:40px;flex:none;border-radius:9px}
.rp-top small{display:block;color:rgba(255,255,255,.75);font-weight:700;font-size:12px}
.rp-top h1{margin:2px 0 4px;font-size:28px;line-height:1.15;font-weight:800;letter-spacing:-.01em}
.rp-top span{color:rgba(255,255,255,.6);font-size:11px}
.rp-body{padding:20px 40px 30px}
.rp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.rp-kpi{background:#F6F7FB;border-radius:10px;padding:11px 14px 12px 18px;position:relative;overflow:hidden}
.rp-kpi:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c)}
.rp-kpi small{display:block;font-size:9.5px;font-weight:700;color:#73757A;text-transform:uppercase;letter-spacing:.03em}
.rp-kpi b{display:block;font-size:19px;color:var(--c);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-note{color:#73757A;font-size:9.5px;margin:8px 0 0}
.rp-none{color:#73757A;font-size:14px;margin:24px 0}
.rp-section{margin:22px 0 8px;padding-left:12px;position:relative;break-after:avoid;page-break-after:avoid}
.rp-section:before{content:"";position:absolute;left:0;top:3px;width:4px;height:16px;border-radius:2px;background:#3352D9}
.rp-section h2{margin:0;font-size:17px;font-weight:800;color:#1C1C1F}
.rp-section small{display:block;color:#73757A;font-size:11px}
.rp-panel{background:#F6F7FB;border-radius:10px;padding:6px 8px;break-inside:avoid;page-break-inside:avoid}
.rp-panel svg{display:block;width:100%;height:auto}
.rp-ranked{padding:9px 14px}
.rp-rank{display:grid;grid-template-columns:minmax(0,150px) minmax(40px,1fr) auto;align-items:center;gap:10px;height:24px}
.rp-name{display:flex;align-items:center;gap:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11.5px}
.rp-name i{width:7px;height:7px;border-radius:50%;flex:none}
.rp-track{height:10px;border-radius:5px;background:#E6E6E6;overflow:hidden}
.rp-track i{display:block;height:100%;border-radius:5px}
.rp-rank b{text-align:right;font-size:11.5px;white-space:nowrap}
.rp-high{background:#EBF0FF;border-radius:10px;padding:8px 14px;margin-top:12px;font-size:11.5px;break-inside:avoid;page-break-inside:avoid}
.rp-high div{padding:1px 0}
.rp-table{width:100%;border-collapse:collapse;table-layout:fixed;margin-top:8px;font-size:11.5px}
.rp-table th{background:#EBF0FF;text-align:left;font-weight:700;padding:4px 4px}
.rp-table td{padding:4px 4px;vertical-align:top;overflow-wrap:anywhere}
.rp-table tbody tr:nth-child(even) td{background:#F7F7F7}
.rp-table .r{text-align:right}
.rp-table tr{break-inside:avoid;page-break-inside:avoid}
.rp-table thead{display:table-header-group}
.rp-empty{color:#73757A;font-size:11.5px;margin:4px 0}
.rp-footer{color:#73757A;font-size:10px;margin-top:22px;border-top:1px solid #E6E6E6;padding-top:8px}
@media (max-width:640px){
  .rp-top{padding:22px 18px 18px}.rp-top h1{font-size:22px}
  .rp-body{padding:16px 14px 22px}
  .rp-rank{grid-template-columns:minmax(0,96px) minmax(30px,1fr) auto;gap:8px}
  .rp-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rp-table{font-size:10.5px;min-width:540px}
  .rp-table td{overflow-wrap:normal}
  .rp-table td.r{white-space:nowrap}
}

/* ---------- Calculadora ---------- */
.ins-calc{display:grid;gap:18px;max-width:460px;margin:0 auto}
@media (min-width:960px){.ins-calc{max-width:920px;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start;gap:28px}}
.ins-calc-display{min-width:0}
.ins-curbtn{display:inline-flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--stroke);border-radius:12px;padding:8px 14px;font-size:17px}
.ins-curbtn:hover{background:var(--high)}
.ins-cflag{width:26px;height:26px;border-radius:50%;background:var(--high);display:inline-flex;align-items:center;justify-content:center;font-size:16px;flex:none;color:var(--income);font-weight:800}
.row .ins-cflag{width:34px;height:34px;font-size:20px}
.ins-expr{font-size:26px;font-weight:600;color:var(--muted);margin-top:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ins-amount{font-size:42px;font-weight:800;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.15;min-width:0}
.ins-amount.sm{font-size:30px}
.ins-swaprow{display:flex;align-items:center;gap:0;margin:10px 0}
.ins-swaprow span{flex:1;height:1px;background:var(--stroke)}
.ins-swap{width:56px;height:56px;border-radius:14px;background:var(--accent);color:#111;display:flex;align-items:center;justify-content:center}
.ins-swap svg{width:26px;height:26px;stroke-width:2.2}
.ins-resultrow{display:flex;align-items:center;gap:8px;margin-top:10px}
.ins-resultrow .ins-amount{flex:1}
.ins-small{width:42px;height:42px;border-radius:14px;background:var(--high);display:flex;align-items:center;justify-content:center;flex:none}
.ins-rateline{text-align:center;margin-top:10px}
.ins-rateline b{display:block;font-weight:500;font-size:15px}
.ins-rateline small{display:block;color:var(--muted);font-size:12px}
.ins-rateline small.warn{color:var(--warning)}
.ins-keypad{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ins-keypad button{height:58px;border-radius:14px;background:var(--card);border:1px solid var(--stroke);font-size:24px;font-weight:500;display:flex;align-items:center;justify-content:center}
.ins-keypad button:hover{filter:brightness(1.15)}
.ins-keypad button:active{transform:scale(.97)}
.ins-keypad button.op{background:var(--high)}
.ins-keypad button.eq{background:var(--accent);color:#111;border-color:transparent}
.ins-keypad button.clr{color:var(--warning)}
.ins-keypad button svg{width:24px;height:24px}
@media (min-width:960px){.ins-keypad button{height:64px}}
@media (max-width:380px){.ins-amount{font-size:34px}.ins-amount.sm{font-size:26px}.ins-keypad button{height:52px}}

/* ---------- Impresión (Descargar PDF) ---------- */
@page{size:letter;margin:12mm}
@media print{
  :root{color-scheme:light}
  html,body{background:#fff!important}
  body *{visibility:visible}
  .side,.tabbar,.fab,.toast,.ins-toolbar,.overlay{display:none!important}
  .shell{display:block}
  .main{padding:0!important}
  .page{max-width:none!important;margin:0!important}
  .report{box-shadow:none;border-radius:0;max-width:none;margin:0;font-size:11px}
  .report,.report *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rp-top{padding:22px 24px 18px}
  .rp-body{padding:14px 4px 0}
  .rp-break{break-before:page;page-break-before:always}
}

/* La calculadora ocupa la pantalla como en la app: sin el botón + flotante y más compacta en el teléfono. */
body:has(.ins-calc) .fab{display:none}
@media (max-width:959px){
  .ins-calc{gap:14px}
  .ins-expr{font-size:22px;margin-top:6px}
  .ins-amount{font-size:38px}
  .ins-swaprow{margin:4px 0}
  .ins-swap{width:50px;height:50px}
  .ins-keypad{gap:8px}
  .ins-keypad button{height:52px}
}