/* Etapa 3 del rediseño (docs/96, bloques 2 y 3): estilos propios de las
   pestañas nuevas de Reportes (Ingresos, Comisiones, Reseñas) y de lo nuevo de
   Hoy (selector de período, KPIs con tendencia, 12 meses, torta por canal).
   Solo reglas que el sistema de componentes de app.css no cubre. */

/* ---- Cabecera: título a la izquierda, exportar + PDF a la derecha ---- */
.rp-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e4); flex-wrap:wrap; margin-bottom:var(--e3)}
.rp-cab-t{flex:1; min-width:240px}
.rp-cab-t .sub{margin-bottom:0}
.rp-acts{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap}
/* Los filtros viven en su propia tarjeta blanca, entre el título y los KPIs (maqueta). */
.rp-filtros{display:flex; align-items:center; gap:var(--e3); flex-wrap:wrap; margin-bottom:var(--e3);
  background:var(--bg); border-radius:var(--r-lg); box-shadow:var(--sh-float); padding:var(--e3) var(--e4)}

/* ---- KPIs con tendencia (Hoy y Reportes) ---- */
.rp-kpis{display:grid; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); gap:var(--e3); margin-bottom:var(--e3)}
.rp-kpis .card, .rp-kpi{margin-bottom:0}
.rp-kpi{display:flex; flex-direction:column; gap:var(--e1)}
.rp-kpi .cifra{font-size:var(--cifra); font-weight:400; letter-spacing:-.025em; font-variant-numeric:tabular-nums; line-height:1.1}
.rp-var{display:flex; align-items:center; gap:var(--e2); flex-wrap:wrap}

/* ---- Gráficos y tablas ---- */
.rp-t{font-size:var(--t-lg); font-weight:600; letter-spacing:-.01em; margin:0 0 var(--e2)}
.rp-rot{margin:var(--e3) 0 var(--e1)}
.rp-fig{margin:0}
.rp-fig figcaption{margin-top:var(--e1)}
.rp-dos{display:grid; grid-template-columns:minmax(0,3fr) minmax(0,2fr); gap:var(--e3); align-items:start}
.rp-dos > .card{margin-bottom:var(--e3)}
.rp-tabla{margin-top:0}
.rp-tabla th.r, .rp-tabla td.r{text-align:right; font-variant-numeric:tabular-nums}
.rp-tabla tr.total td{font-weight:700; border-top:1px solid var(--line-strong)}
.rp-occ{display:inline-flex; align-items:center; gap:var(--e2)}
.rp-occ .pista, .rp-canal .pista{display:block; height:8px; background:var(--line); border-radius:var(--r-xs); overflow:hidden}
.rp-occ .pista{width:64px}
.rp-occ .relleno, .rp-canal .relleno{display:block; height:8px; background:var(--chart-1); border-radius:var(--r-xs)}
.rp-canal{padding:var(--e2) 0; border-top:1px solid var(--line)}
.rp-canal:first-of-type{border-top:0}
.rp-canal-f{display:flex; justify-content:space-between; gap:var(--e2); font-size:var(--t-md); margin-bottom:var(--e1)}
.rp-canal-f em{font-style:normal; color:var(--mute); font-size:var(--t-sm); margin-left:var(--e1)}
.rp-pie{margin-top:var(--e3)}

/* ---- Gráfico de líneas de Ingresos (maqueta) ---- */
.rp-chead{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e3); flex-wrap:wrap; margin-bottom:var(--e2)}
.rp-chead .rp-t{margin:0}
.rp-csub{margin:var(--e1) 0 0; color:var(--mute); font-size:var(--t-sm)}
.rp-leyenda{display:flex; gap:var(--e3); flex-wrap:wrap; font-size:var(--t-sm); font-weight:600}
.rp-leyenda span{display:inline-flex; align-items:center; gap:var(--e1)}
.rp-leyenda i{width:10px; height:10px; border-radius:50%; display:inline-block}
.rp-linea{width:100%; height:auto; display:block; overflow:visible}
.rp-l-guia{stroke:var(--line)}
.rp-l-base{stroke:var(--line-strong)}
.rp-l-eje{font-size:11.5px; fill:var(--mute)}
.rp-l-eje-on{fill:var(--ink); font-weight:700}
.rp-l-slot{fill:var(--crema)}
.rp-l-tip rect{fill:var(--ocean-950)}
.rp-l-tip text{font-size:12px; fill:var(--bg)}
.rp-l-tip .rp-l-tip-t{font-weight:600}
.rp-l-tip-a{fill:var(--chart-1)}
.rp-l-tip-b{fill:var(--chart-2)}
@media (max-width:640px){ .rp-linea{min-width:560px} .rp-lscroll{overflow-x:auto} }

@media (max-width:860px){
  .rp-dos{grid-template-columns:minmax(0,1fr)}
}

/* ---- Hoy: selector de período y gráficos nuevos ---- */
.hoy-cab-fila{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--e4); flex-wrap:wrap}
.hoy-graficos{display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:var(--e3); margin-bottom:var(--e3); align-items:start}
.hoy-graficos .card{margin-bottom:0}
.hoy-graficos .gr-torta{flex-direction:column; align-items:stretch}
.hoy-graficos .gr-anillo{max-width:180px; margin:0 auto}
.hoy-graficos .rp-pie{display:flex; justify-content:space-between; gap:var(--e2); flex-wrap:wrap}
@media (max-width:860px){
  .hoy-graficos{grid-template-columns:minmax(0,1fr)}
}

/* ---- Papel: el "PDF" es el del navegador. El papel lleva el reporte, no el
   chrome (`.no-imprimir` ya apaga la barra, el riel y los controles). ---- */
@media print{
  .rp-kpi, .rp-dos > .card, .hoy-graficos .card{box-shadow:none; border:1px solid var(--line)}
  .rp-dos, .hoy-graficos{grid-template-columns:minmax(0,1fr)}
  .rp-tabla tr{break-inside:avoid}
  .card{break-inside:avoid}
}

/* El enlace del segmentado activo: `main a:not(.btn)` de app.css pinta los
   enlaces en tinta y deja el texto oscuro sobre el fondo oscuro del "on". Mismo
   arreglo que `.cal-nav .segmentado` en operacion.css. */
.rp-filtros .segmentado > a, .hoy-cab-fila .segmentado > a{text-decoration:none !important}
.rp-filtros .segmentado > a.on, .hoy-cab-fila .segmentado > a.on{color:#fff !important}


/* ---- Reportes · Impuestos (QA contra la maqueta ReportesImpuestos, 01-oct-2026) ---- */
/* El botón de copiar de cada casilla: píldora de 28px, como en la maqueta, y la
   banda del impuesto determinado en crema con el mismo botón. Acotado a la
   tarjeta de cada contribuyente para no tocar los otros usos de `.casilla-*`. */
.rf-emisor .casilla-copiar{height:28px; min-height:28px; min-width:72px; padding:0 12px; border-radius:var(--r-pill);
  border-color:var(--line-input); color:var(--ink); background:var(--bg)}
.rf-emisor .casilla-copiar[data-copiado]{border-color:var(--ok); color:var(--ok); background:var(--ok-bg)}
.rf-emisor .casilla-clave{border:0; background:var(--crema)}
.rf-emisor .casilla-clave .casilla-copiar{background:var(--bg); color:var(--ink); border:1px solid var(--line-input)}
.rf-emisor .casilla-clave .casilla-copiar:hover{filter:none; border-color:var(--accent); color:var(--ink)}