/* Reporte imprimible del cierre mensual (A4). El documento es siempre claro, como el papel, aun con el tema oscuro. */
.rep-herramientas .entre { align-items: center; }
.rep-herramientas textarea { min-height: 76px; }

.reporte {
  --tinta: #0b1324; --suave: #566074; --linea: #dce1e8; --linea-fuerte: #c4ccd8; --superficie-2: #f6f7f9;
  --rojo: #b42318; --rojo-bg: #fdecea; --ambar: #a15c07; --ambar-bg: #fef3e2; --verde: #0b7a4b; --verde-bg: #e6f5ee; --oro-tinta: #7a5c17;
  color-scheme: light; background: #fff; color: var(--tinta); border: 1px solid var(--linea); border-radius: var(--r-hoja); box-shadow: var(--sombra);
  padding: clamp(20px, 5vw, 48px); display: grid; gap: 22px; font-size: .94rem; line-height: 1.55;
}
.reporte h1, .reporte h2, .reporte h3 { color: var(--tinta); }
.reporte .mono { font-family: var(--f-mono); }
.rep-chico, .reporte small { font-size: .78rem; color: var(--suave); }
.reporte small { display: block; font-weight: 400; }

/* Cabecera */
.rep-cabeza { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'marca meta' 'titulo titulo'; gap: 16px 22px; align-items: center; padding-bottom: 16px; border-bottom: 2px solid #d4b26b; }
.rep-marca { grid-area: marca; }
.rep-titulo { grid-area: titulo; }
.rep-meta { grid-area: meta; }
.rep-marca { display: flex; align-items: center; gap: 10px; }
.rep-marca .sello { --t: 46px; --sello-fondo: #fff; background: #070d1a; }
.rep-marca b { display: block; font-family: var(--f-titulo); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.rep-lema { display: block; font-size: .72rem; color: var(--suave); letter-spacing: .02em; }
.rep-titulo h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); line-height: 1.1; }
.rep-titulo p { color: var(--suave); }
.rep-meta { margin: 0; display: grid; gap: 4px; text-align: right; font-size: .8rem; }
.rep-meta dt { color: var(--suave); font-size: .72rem; }
.rep-meta dd { margin: 0; font-weight: 600; }
@media (max-width: 720px) { .rep-cabeza { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'marca' 'titulo' 'meta'; } .rep-meta { text-align: left; } }

/* Datos de la empresa */
.rep-empresa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border: 1px solid var(--linea); border-radius: var(--r-control); }
.rep-empresa > div { padding: 12px 14px; display: grid; gap: 2px; align-content: start; border-right: 1px solid var(--linea); }
.rep-empresa > div:last-child { border-right: 0; }
.rep-empresa b { font-size: 1rem; }
.rep-empresa span:not(.rep-etq) { font-size: .8rem; color: var(--suave); }
.rep-etq { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--oro-tinta); font-weight: 600; }
@media (max-width: 720px) { .rep-empresa { grid-template-columns: minmax(0, 1fr); } .rep-empresa > div { border-right: 0; border-bottom: 1px solid var(--linea); } .rep-empresa > div:last-child { border-bottom: 0; } }

.rep-nota { border-left: 3px solid #d4b26b; background: var(--superficie-2); padding: 10px 14px; border-radius: 0 var(--r-control) var(--r-control) 0; }
.rep-nota h2 { font-family: var(--f-texto); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--oro-tinta); margin-bottom: 4px; }

/* Semáforo */
.rep-semaforo { display: flex; gap: 16px; align-items: center; border-radius: var(--r-control); padding: 14px 18px; border: 1px solid transparent; }
.rep-semaforo .luz { width: 38px; height: 38px; border-radius: 50%; background: currentColor; flex: none; }
.rep-semaforo div { display: grid; gap: 2px; }
.rep-semaforo b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.35rem; line-height: 1.15; color: var(--tinta); }
.rep-semaforo > div > span { color: var(--tinta); font-size: .88rem; }
.rep-semaforo.rojo { background: var(--rojo-bg); color: var(--rojo); }
.rep-semaforo.ambar { background: var(--ambar-bg); color: var(--ambar); }
.rep-semaforo.verde { background: var(--verde-bg); color: var(--verde); }
.rep-semaforo.vacio { background: var(--superficie-2); color: var(--suave); border-color: var(--linea); }

/* Secciones y tablas */
.rep-seccion { display: grid; gap: 10px; }
.rep-seccion > h2 { font-family: var(--f-texto); font-size: 1rem; font-weight: 600; letter-spacing: 0; padding-bottom: 6px; border-bottom: 1px solid var(--linea); }
.rep-cuenta { color: var(--suave); font-weight: 400; }
.rep-tabla, .rep-cifras { width: 100%; border-collapse: collapse; font-size: .84rem; }
.rep-tabla th, .rep-tabla td, .rep-cifras th, .rep-cifras td { padding: 7px 10px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; background: none; }
.rep-tabla thead th { font-size: .72rem; color: var(--suave); font-weight: 600; border-bottom: 1px solid var(--linea-fuerte); white-space: nowrap; }
.rep-tabla .num, .rep-cifras .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rep-tabla tr.vencido td:first-child { color: var(--rojo); }
.rep-cifras { max-width: 560px; }
.rep-cifras th { font-weight: 400; color: var(--tinta); font-size: .86rem; }
.rep-cifras tr.total th, .rep-cifras tr.total td { font-weight: 600; border-top: 1px solid var(--linea-fuerte); }
.rep-cifras tr.mal td { color: var(--rojo); }
.rep-indicadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border: 1px solid var(--linea); border-radius: var(--r-control); }
.rep-indicadores div { padding: 10px 12px; display: grid; border-right: 1px solid var(--linea); }
.rep-indicadores div:last-child { border-right: 0; }
.rep-indicadores b { font-size: 1.4rem; font-weight: 600; line-height: 1.1; }
.rep-indicadores span { font-size: .74rem; color: var(--suave); }
@media (max-width: 720px) { .rep-indicadores { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rep-punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--linea-fuerte); margin-right: 7px; vertical-align: 0; }
.rep-punto.rojo { background: var(--rojo); border-color: var(--rojo); }
.rep-punto.ambar { background: var(--ambar); border-color: var(--ambar); }
.rep-punto.verde { background: var(--verde); border-color: var(--verde); }

/* Alertas */
.rep-alerta { border: 1px solid var(--linea); border-left: 4px solid var(--linea-fuerte); border-radius: var(--r-control); padding: 12px 14px; display: grid; gap: 6px; }
.rep-alerta.rojo { border-left-color: var(--rojo); }
.rep-alerta.ambar { border-left-color: var(--ambar); }
.rep-alerta.info { border-left-color: #d4b26b; }
.rep-alerta header { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.rep-alerta h3 { font-size: .95rem; margin-top: 2px; }
.rep-monto { text-align: right; flex: none; }
.rep-monto b { display: block; font-variant-numeric: tabular-nums; }
.rep-monto span { font-size: .72rem; color: var(--suave); }
.rep-hacer { background: var(--superficie-2); border-radius: 6px; padding: 6px 10px; }
.rep-plazo { font-weight: 600; color: var(--oro-tinta); }
.rep-etiqueta { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border-radius: 4px; padding: 1px 7px; background: var(--superficie-2); color: var(--suave); }
.rep-etiqueta.rojo { background: var(--rojo-bg); color: var(--rojo); }
.rep-etiqueta.ambar { background: var(--ambar-bg); color: var(--ambar); }
.rep-comprobantes { font-size: .78rem; }
.rep-emp-alertas { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--linea); }
.rep-emp-alertas h3 { font-size: .92rem; }
.rep-emp-alertas ul { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 3px; font-size: .84rem; }
.rep-verif { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; font-size: .84rem; }
.rep-verif li { display: flex; gap: 8px; align-items: flex-start; }
.rep-verif .marca-v { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: .66rem; font-weight: 700; border: 1.5px solid var(--linea-fuerte); color: var(--suave); margin-top: 1px; }
.rep-verif .ok .marca-v { background: var(--verde); border-color: var(--verde); color: #fff; }
.rep-verif .rojo .marca-v { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.rep-verif .ambar .marca-v { background: var(--ambar); border-color: var(--ambar); color: #fff; }
.rep-verif li > span:last-child { display: grid; }
@media (max-width: 620px) { .rep-verif { grid-template-columns: minmax(0, 1fr); } }
.rep-lista { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: .86rem; }
.rep-pie { border-top: 1px solid var(--linea); padding-top: 12px; display: grid; gap: 4px; font-size: .74rem; color: var(--suave); }

/* Impresión: solo el documento, en A4, con los colores del semáforo */
@page { size: A4; margin: 14mm 12mm 16mm; }
@media print {
  .no-imprimir, .pie, #aviso, .cargando { display: none !important; }
  body.pagina-reporte { background: #fff; }
  .app { padding: 0; }
  .contenedor { max-width: none; padding: 0; }
  .reporte { border: 0; box-shadow: none; padding: 0; border-radius: 0; gap: 16px; font-size: 10pt; }
  .reporte, .reporte * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rep-alerta, .rep-emp-alertas, .rep-semaforo, .rep-empresa, .rep-cifras, .rep-tabla tr { break-inside: avoid; }
  .rep-seccion > h2 { break-after: avoid; }
  .rep-cabeza { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: 'marca meta' 'titulo titulo'; }
  .rep-meta { text-align: right; }
  /* En bloque (no en cuadrícula) para que el navegador pueda cortar páginas entre secciones y no después de un título */
  .reporte, .rep-seccion { display: block; }
  .reporte > * + * { margin-top: 14px; }
  .rep-seccion > * + * { margin-top: 8px; }
  .rep-seccion > h2 { break-after: avoid; page-break-after: avoid; }
  .rep-alerta + .rep-alerta { margin-top: 10px; }
  .rep-empresa { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rep-empresa > div { border-right: 1px solid var(--linea); border-bottom: 0; }
  .rep-indicadores { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rep-verif { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* En pantallas angostas el documento no ensancha la página: las tablas se desplazan dentro de su caja */
.pagina-reporte .app > * { min-width: 0; }
@media screen and (max-width: 640px) {
  .reporte { padding: 16px; }
  .rep-tabla { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rep-cifras th { white-space: normal; }
}