/* styles.css — Mi Yasta. La paleta vive en css/tema.css. */

/* Letra del nombre de la app (cabecera e ingreso). */
@font-face {
  font-family: 'SunPlumps';
  src: url('../fonts/SunPlumpsBold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

html { -webkit-text-size-adjust: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg); color: var(--text-dark); line-height: 1.45; font-size: 16px;
}
h1, h2, h3 { color: var(--primario-oscuro); line-height: 1.2; }
h2 { font-size: 1.35rem; margin: 4px 0 14px; }
h3 { font-size: 1.05rem; margin-bottom: 12px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--primario); outline-offset: 2px; }
.texto-suave { color: var(--muted); font-size: .9rem; max-width: 70ch; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.solo-impresion { display: none; }

.salto { position: absolute; left: -999px; top: 0; background: #fff; color: var(--primario-oscuro); padding: 8px 12px; z-index: 10; }
.salto:focus { left: 8px; top: 8px; }

/* ── Encabezado ── */
.encabezado {
  background: var(--grad-header); color: #fff;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 14px 16px;
}
.encabezado h1 {
  font-family: 'SunPlumps', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #fff; font-size: 22px; letter-spacing: 2px; font-weight: bold;
}
.login-app-name {
  font-family: 'SunPlumps', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 44px; letter-spacing: 3px; line-height: 1; font-weight: bold;
  color: var(--primario); text-align: center; margin-bottom: 10px;
}
.encabezado-sub { opacity: .95; font-size: .95rem; }
.encabezado-acciones { display: flex; gap: 8px; }
.franja { height: 4px; background: var(--serie-creadas); }

main { max-width: 1040px; margin: 0 auto; padding: 18px 16px 40px; }
main:focus { outline: none; }

/* ── Botones ── */
.btn {
  font: inherit; font-weight: 600; border-radius: 8px; padding: 9px 16px; cursor: pointer;
  border: 1px solid transparent; min-height: 40px;
}
.btn-principal { background: var(--primario); color: #fff; }
.btn-principal:hover { background: var(--primario-oscuro); }
.btn-principal:disabled { opacity: .6; cursor: wait; }
/* Fondo oscuro del tema bajo el texto blanco: contraste ≥ 4,5:1 sobre todo el degradado del encabezado. */
.btn-claro { background: rgba(30, 52, 52, .45); color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn-claro:hover { background: rgba(30, 52, 52, .62); }

/* ── Tarjetas ── */
.tarjeta {
  background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 12px;
  box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px;
}

/* ── Ingreso ── */
.ingreso { display: flex; justify-content: center; padding-top: 28px; }
.ingreso-tarjeta { width: 100%; max-width: 380px; }
.ingreso-tarjeta label { display: block; font-weight: 600; margin: 14px 0 4px; }
.ingreso-tarjeta input {
  width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--borde-campo); border-radius: 8px;
  background: #fff; color: var(--text-dark);
}
.ingreso-tarjeta .btn { width: 100%; margin-top: 18px; }
.error { color: #9B1C1C; background: #FDECEC; border: 1px solid #F3B8B8; border-radius: 8px; padding: 9px 12px; margin-top: 14px; font-size: .95rem; }
.aviso { margin: 0 0 14px; }

/* ── Pestañas ── */
.pestanas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid var(--border-light); }
.tab-btn {
  font: inherit; font-weight: 600; color: var(--primario); background: transparent; cursor: pointer;
  border: none; border-bottom: 3px solid transparent; padding: 10px 14px; margin-bottom: -2px; min-height: 44px;
}
.tab-btn:hover { background: var(--tinte-hover); }
.tab-btn.active { color: var(--primario-oscuro); border-bottom-color: var(--primario); }

/* ── Avance ── */
.avance-cifras { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.avance-grande { font-size: 2.1rem; font-weight: 700; color: var(--primario-oscuro); font-variant-numeric: tabular-nums; }
.avance-de { font-size: 1rem; font-weight: 500; color: var(--muted); }
.avance-pct { font-size: 1.5rem; font-weight: 700; color: var(--primario); }
.barra {
  display: flex; height: 38px; border-radius: 19px; overflow: hidden;
  background: var(--border-light); border: 1px solid var(--borde-barra);
}
.tramo { display: block; height: 100%; width: 0; transition: width .5s ease; }
.tramo-creadas { background: var(--serie-creadas); }
.tramo-validacion { background: var(--serie-validacion); }
.leyenda { list-style: none; display: flex; gap: 8px 22px; flex-wrap: wrap; margin-top: 12px; }
.muestra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; margin-right: 7px; vertical-align: -2px; }
.muestra-creadas { background: var(--serie-creadas); }
.muestra-validacion { background: var(--serie-validacion); }
.vacio { color: var(--muted); background: var(--fondo-suave); border: 1px dashed var(--borde-vacio); border-radius: 8px; padding: 14px; margin-top: 14px; }

/* ── Tablas ── */
.tabla-envoltura { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th, .tabla td { padding: 9px 10px; border-bottom: 1px solid var(--border-light); text-align: left; }
.tabla th { color: var(--primario-oscuro); font-weight: 700; background: var(--fondo-suave); }
.tabla th.num, .tabla td.num { text-align: right; }
.tabla tfoot td { font-weight: 700; border-top: 2px solid var(--primario); border-bottom: none; background: var(--fondo-suave); }
.mini { display: flex; height: 10px; width: 100%; min-width: 90px; background: var(--border-light); border-radius: 5px; overflow: hidden; }
.mini span { display: block; height: 100%; }
.mini .tramo { transition: none; }

/* ── Gráfico y composición ── */
.filtros { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.filtros label { font-weight: 600; }
.filtros select { font: inherit; padding: 8px 10px; border: 1px solid var(--borde-campo); border-radius: 8px; background: #fff; color: var(--text-dark); min-height: 40px; }
.grafico svg { width: 100%; height: auto; display: block; }
.grafico .rejilla { stroke: var(--border-light); stroke-width: 1; }
.grafico .eje { stroke: var(--borde-campo); stroke-width: 1; }
.grafico text { fill: var(--muted); font-size: 11px; font-family: inherit; }
.grafico .valor { fill: var(--text-dark); font-weight: 600; }
.grafico .b-creadas { fill: var(--serie-creadas); }
.grafico .b-validacion { fill: var(--serie-validacion); }
details { margin-top: 12px; }
summary { cursor: pointer; color: var(--primario); font-weight: 600; }
.composicion { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.composicion .tarjeta { margin-bottom: 0; }
.barras { list-style: none; }
.barras li { margin-bottom: 11px; }
.barras .fila { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; margin-bottom: 3px; }
.barras .fila span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.barras .pista { height: 10px; background: var(--border-light); border-radius: 5px; overflow: hidden; }
.barras .relleno { display: block; height: 100%; width: 0; background: var(--serie-creadas); border-radius: 5px; }
.pie { margin-top: 20px; margin-left: auto; text-align: right; }
.pie.fuera-informe { display: none; }
/* Cargos internos: «Informe del banco al …» en pantalla; el banco y el PDF conservan «Datos al …». */
.rotulo-interno { display: none; }
.pie.interno .rotulo-interno { display: inline; }
.pie.interno .rotulo-banco { display: none; }   /* el pie del informe no acompaña a las pantallas operativas */
.pie-pagina { text-align: center; padding: 6px 16px 22px; max-width: 640px; margin: 0 auto; }

/* ── Seguimiento operativo (pestañas Producción, Equipo y Por corregir; solo EUN) ── */
.filtros select { max-width: 100%; }
.matriz-envoltura { max-width: 100%; }
.matriz { font-size: .85rem; width: auto; min-width: 100%; }
.matriz th, .matriz td { padding: 6px 4px; text-align: center; font-variant-numeric: tabular-nums; min-width: 30px; }
/* Dos columnas fijas al desplazar: el afiliador (140 px) y su total. */
.matriz th:first-child, .matriz td:first-child {
  text-align: left; width: 140px; min-width: 140px; max-width: 140px; padding-left: 10px; padding-right: 6px;
  position: sticky; left: 0; background: var(--card-bg); z-index: 2;
}
.matriz th:nth-child(2), .matriz td:nth-child(2) {
  width: 52px; min-width: 52px; font-weight: 700; padding-right: 10px;
  position: sticky; left: 140px; background: var(--card-bg); z-index: 1; border-right: 1px solid var(--border-light);
}
.matriz thead th:first-child, .matriz thead th:nth-child(2),
.matriz tfoot td:first-child, .matriz tfoot td:nth-child(2) { background: var(--fondo-suave); }
/* Semáforo: colores de alerta definidos en el tema (--nivel-*-bg); el número siempre se muestra. */
.nivel-sin { background: var(--nivel-sin-bg); }
.nivel-bajo { background: var(--nivel-bajo-bg); }
.nivel-medio { background: var(--nivel-medio-bg); }
.nivel-alto { background: var(--nivel-alto-bg); font-weight: 700; }
.matriz td.dia-futuro { background: transparent; }       /* día que aún no llega: vacío, distinto del 0 */
.muestra.nivel-sin { border: 1px solid var(--borde-campo); }
/* Carga: mientras espera la API se oculta el contenido del panel (sin tabla vacía ni fechas a medias). */
.cargando { color: var(--muted); padding: 18px 4px; }
.panel-carga .contenido-carga { display: none; }
/* Resumen de «Por corregir». */
.resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; margin: 4px 0 16px; }
.resumen h4 { font-size: .95rem; color: var(--primario-oscuro); margin-bottom: 4px; }
.resumen ul { list-style: none; }
.resumen li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; border-bottom: 1px solid var(--border-light); font-size: .92rem; }
.resumen li span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.resumen-total { font-size: 1.6rem; font-weight: 700; color: var(--primario-oscuro); }
.col-id { font-variant-numeric: tabular-nums; word-break: break-all; }

/* ── Encabezado: quién entró ── */
.encabezado-usuario { margin-top: 4px; font-size: .95rem; font-weight: 600; }
.insignia {
  display: inline-block; margin-left: 8px; padding: 1px 10px; border-radius: 999px; font-size: .8rem;
  background: var(--text-dark); color: #fff; border: 1px solid rgba(255, 255, 255, .55);   /* blanco sobre --text-dark: 12:1 */
}
.encabezado-usuario > span:first-child:empty + .insignia { margin-left: 0; }

/* Aviso de las pantallas del informe para los cargos internos (no se imprime). */
.aviso-banco { background: var(--resalte); border: 1px solid var(--border-light); border-radius: 8px; padding: 9px 12px; margin: 0 0 14px; font-size: .92rem; color: var(--text-dark); }

/* ── Autogestión del afiliador (pestañas Mi producción, Detalle, Por corregir y Enlaces) ── */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; }
.cifra { background: var(--card-bg); border: 1px solid var(--border-light); border-radius: 12px; box-shadow: var(--shadow); padding: 12px 14px; }
.cifra span { display: block; }
.cifra-num { font-size: 1.7rem; font-weight: 700; color: var(--primario-oscuro); font-variant-numeric: tabular-nums; }
.cifra-etq { color: var(--muted); font-size: .9rem; }
/* «Por corregir» con algo pendiente: resaltada con el color de alerta del tema y a la vez botón hacia su pestaña. */
button.cifra { font: inherit; text-align: left; cursor: pointer; min-height: 44px; }
.cifra-alerta { background: var(--nivel-bajo-bg); border-color: var(--nivel-bajo-bg); }
.cifra-alerta .cifra-num, .cifra-alerta .cifra-etq { color: var(--text-dark); }
.cifra-alerta:hover { filter: brightness(.96); }
.lista-enlaces { list-style: none; }
.lista-enlaces li { padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.lista-enlaces li:last-child { border-bottom: none; }
.lista-enlaces a { color: var(--primario); font-weight: 600; }

/* ── Celular ── */
@media (max-width: 720px) {
  .composicion { grid-template-columns: 1fr; }
  .avance-grande { font-size: 1.7rem; }
  .encabezado-sub { display: none; }
  /* Pestañas en una sola fila que se desplaza (sin barra visible): así el contenido sube en la primera pantalla. */
  .pestanas { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 4px; max-width: 100%;
              scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .pestanas::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: .92rem; text-align: center; line-height: 1.2; }
  /* «Por día»: en celular solo Fecha, Capturadas y Por corregir. */
  .col-sec, .tabla-apilable td.col-sec { display: none; }
  .tabla-apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla-apilable tr { display: block; border: 1px solid var(--border-light); border-radius: 10px; margin-bottom: 10px; padding: 4px 0; }
  .tabla-apilable td { display: flex; justify-content: space-between; gap: 12px; border-bottom: none; padding: 5px 12px; text-align: right; }
  .tabla-apilable td::before { content: attr(data-etiqueta); font-weight: 600; color: var(--primario-oscuro); text-align: left; }
  .tabla-apilable td.col-barra { display: none; }
  .tabla-apilable tfoot tr { background: var(--fondo-suave); }
  /* Área táctil cómoda (~44 px): botones, selectores y enlaces de las pestañas del afiliador. */
  .btn, .filtros select { min-height: 44px; }
  .lista-enlaces a { display: inline-block; padding: 12px 0; min-height: 44px; }
  .cifra-num { font-size: 1.5rem; }
}

/* ── Impresión (PDF): una pantalla por página, tamaño carta apaisado ── */
@page { size: letter landscape; margin: 12mm; }
@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; }
  .no-imprimir { display: none !important; }
  .solo-impresion { display: inline; }
  p.solo-impresion { display: block; margin-bottom: 8px; }
  .franja { margin-bottom: 8px; }
  main { max-width: none; padding: 0; }
  #vistaIngreso { display: none !important; }
  .tab-panel { display: block !important; break-after: page; page-break-after: always; }
  .pie.interno .rotulo-interno { display: none; }
  .pie.interno .rotulo-banco { display: inline; }
  .pie.fuera-informe { display: block; }                   /* el PDF siempre lleva el pie del informe */
  .tab-panel.panel-operativo { display: none !important; }   /* el PDF al banco solo lleva las tres pantallas del informe */
  .tab-panel:last-of-type { break-after: auto; page-break-after: auto; }
  .tarjeta { box-shadow: none; break-inside: avoid; }
  .tabla-envoltura { overflow: visible; }
  .composicion { grid-template-columns: 1fr 2fr; }
  #listaRubros { columns: 2; column-gap: 20px; }   /* los rubros en dos columnas, para que quepan en la hoja */
  #listaRubros li { break-inside: avoid; }
  .tarjeta { padding: 12px; margin-bottom: 10px; }
  .grafico svg { max-height: 235px; }            /* que «Evolución y composición» quepa en una hoja */
  .barras li { margin-bottom: 5px; }
  .barras .fila { font-size: .85rem; margin-bottom: 2px; }
  .barras .pista { height: 8px; }
  .pie { margin-top: 6px; }
}