/* Paquete 20 de Design (11/11/2026): 96a, 97a, 98a Reportes.
   Hoja propia del grupo, cargada en base.html después de styles.css.
   Sólo tokens del CRM; cada regla con el prefijo de su pantalla. Las reglas
   de papel van acotadas a cada pantalla: `.lectura`, `.hbar-fill`, `.kpi-tile`
   y `.cj-panel` los usan otras pantallas que no se tocan. */

/* ── 96a · Qué se ve en los números ─────────────────────────────────────── */
.lec-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.lec-cab h2 { font-size: 2rem; }
.lec-cab .muted-note { margin: 6px 0 0; font-style: italic; }
.lec-cab-acc { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.lec-per { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.lec-per a { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink-muted); text-decoration: none; border-left: 1px solid var(--line); }
.lec-per a:first-child { border-left: 0; }
.lec-per a:hover { color: var(--ink); filter: none; }
.lec-per a.is-active { background: var(--sel); color: var(--sel-ink); }

.lec-resumen { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.lec-res { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; color: var(--ink-muted); font-size: 12.5px; }
.lec-res:hover { border-color: var(--ink-faint); color: var(--ink); filter: none; }
.lec-res b { font: 600 15px var(--font-mono); color: var(--ink); }
.lec-res i { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.lec-res.es-critico i { background: var(--no-otorgable); }
.lec-res.es-critico b { color: var(--no-otorgable); }
.lec-res.es-atencion i { background: var(--revisar); }
.lec-res.es-bueno i { background: var(--otorgable); }

.lec-nota { margin-bottom: 16px; padding: 12px 16px; }
.lec-nota p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-muted); max-width: 96ch; }
.lec-nota strong { color: var(--ink); }

.lec-grupo { margin-bottom: 16px; scroll-margin-top: 80px; }
.lec-grupo-cab { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 12px; }
.lec-grupo-cab h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
.lec-grupo-cab .muted-note { margin: 0; }

.lec-tarjeta .lectura-cab { justify-content: space-between; }
.lec-tarjeta .lectura-cab strong { font-size: 14px; line-height: 1.35; color: var(--ink); }
.lec-tarjeta .lectura-cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 0; }
.lec-tono { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: var(--ink-faint); }
.lectura-critico .lec-tono { color: var(--no-otorgable); }
.lectura-atencion .lec-tono { color: var(--revisar); }
.lectura-bueno .lec-tono { color: var(--otorgable); }
.lec-tarjeta p { color: var(--ink); opacity: .86; line-height: 1.5; }
.lec-ir { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none; }
.lec-ir .ic { width: 14px; height: 14px; }

.lec-vacio { padding: 22px; }
.lec-vacio p { margin: 0; }

@media (max-width: 720px) {
  .lec-cab h2 { font-size: 1.55rem; }
  .lec-cab-acc { width: 100%; }
  .lec-per { flex: 1; }
  .lec-per a { flex: 1; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; }
  .lec-res { flex: 1 1 45%; min-height: 44px; }
  .lec-ir { min-height: 40px; }
}

/* El papel: en gris el tono se lee por la palabra y por el grosor del borde. */
@media print {
  .lec-cab h2 { font-size: 20pt; }
  .lec-resumen, .lec-per, .lec-ir { display: none !important; }
  .lec-grupo { break-inside: auto; }
  .lec-grupo-cab { break-after: avoid; }
  .lec-tarjeta { background: none !important; border-top: 1px solid #999; border-right: 1px solid #999; border-bottom: 1px solid #999; break-inside: avoid; }
  .lec-tarjeta.lectura-critico { border-left-width: 6px; border-left-color: #000; }
  .lec-tarjeta.lectura-atencion { border-left-width: 4px; border-left-color: #555; }
  .lec-tarjeta.lectura-bueno, .lec-tarjeta.lectura-neutro { border-left-width: 2px; border-left-color: #999; }
  .lec-tono, .lec-tarjeta .lectura-seccion { color: #000 !important; }
  .lec-tarjeta p { opacity: 1; color: #000; }
}

/* ── 97a · Notificaciones al equipo ─────────────────────────────────────────
   TONOS (decisión del coordinador, 11/11/2026, PROPUESTAS.md §1): pisan
   styles.css (`.tag-notif-*`), que no se toca. «Requiere acción» en ámbar
   (hay que mirarlo, no es un rechazo), «Logro» en verde y «Contexto» neutro
   (por definición no pide nada). `.tag-notif-*` sólo se usa en
   gerencial_notificaciones.html (verificado), así que el cambio de
   significado no alcanza a otra pantalla. */
.tag-notif-accion { color: var(--revisar); border-color: var(--revisar-line); background: var(--revisar-soft); }
.tag-notif-info { color: var(--ink-muted); border-color: var(--line); background: var(--surface-2); }
.ntf-bar-accion { background: var(--revisar); }
.ntf-bar-logro { background: var(--otorgable); }
.ntf-bar-info { background: var(--ink-faint); }

.ntf-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.ntf-cab .muted-note { margin: 6px 0 0; }
.ntf-kpis { margin-bottom: 16px; }
.ntf-sec { margin-bottom: 16px; }
.ntf-sec > h3 { margin: 0 0 4px; }
.ntf-sec > .muted-note { margin: 0 0 14px; max-width: 92ch; }

/* Por persona: primero, con la lectura como barra y el mínimo declarado. */
.ntf-pers td { vertical-align: middle; }
.ntf-quien b { display: block; font-size: 13px; white-space: nowrap; }
.ntf-quien small { font-size: 11px; color: var(--ink-faint); }
.ntf-lect { display: grid; grid-template-columns: minmax(80px, 140px) auto; gap: 8px; align-items: center; }
.ntf-lect .hbar-track { height: 8px; }
.ntf-lect-n { font: 600 12px var(--font-mono); white-space: nowrap; }
.ntf-lect-n small { font-weight: 400; color: var(--ink-faint); margin-left: 4px; }
.ntf-pocos { font-size: 12px; font-style: italic; color: var(--ink-faint); }
.ntf-nunca { font-size: 12px; font-weight: 600; color: var(--revisar); }
.ntf-minimo { margin: 10px 0 0; font-size: 11.5px; color: var(--ink-faint); }

.ntf-tipos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ntf-tipo { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); display: flex; flex-direction: column; gap: 8px; }
.ntf-tipo-cab { display: flex; justify-content: space-between; align-items: center; }
.ntf-tipo-cab b { font: 600 18px var(--font-mono); }
.ntf-tipo .hbar-track { height: 8px; background: var(--surface); }
.ntf-tipo p { margin: 0; font-size: 12px; color: var(--ink-muted); }
.ntf-tipo p b { font-family: var(--font-mono); color: var(--ink); }

.ntf-aviso-et { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.ntf-filtros { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.ntf-filtros .ab-campo { min-width: 200px; }
.ntf-corte { margin: 0 0 10px; font-size: 12px; color: var(--ink-muted); }
.ntf-hist td { vertical-align: top; }
.ntf-hist .ntf-n b { display: block; font-size: 13px; }
.ntf-hist .ntf-n span { font-size: 12px; color: var(--ink-muted); }
.ntf-est small { display: block; font: 400 11px var(--font-mono); color: var(--ink-faint); margin-top: 2px; }

@media (max-width: 900px) { .ntf-tipos { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .ntf-filtros .ab-campo { flex: 1 1 100%; }
  .ntf-filtros .btn-ghost { min-height: 44px; }
  .ntf-lect { grid-template-columns: 1fr; }
}
@media print {
  .ntf-filtros { display: none !important; }
  .tag-notif-accion, .tag-notif-logro, .tag-notif-info, .tag-sin-leer { background: none !important; color: #000 !important; border-color: #000 !important; }
  .tag-notif-accion { border-width: 2px; }
  .ntf-bar-accion, .ntf-bar-logro, .ntf-bar-info, .ntf-sec .hbar-fill { background: #555 !important; }
  .ntf-sec, .ntf-kpis .kpi-tile { break-inside: avoid; }
  .ntf-hist tr { break-inside: avoid; }
}

/* ── 98a · El CRM en números ────────────────────────────────────────────────
   Usa los tokens y escalas de la cáscara de Consejo (--cj-g, --cj-k, --cj-h,
   --good-ink…) para que el modo Proyector agrande todo junto. Gráficos con
   divs y anchos/altos que manda el servidor (regla 15). */
.ins-cuerpo { padding: calc(15px * var(--cj-g)); display: flex; flex-direction: column; gap: calc(12px * var(--cj-g)); }
.ins-head-link { flex: none; font-weight: 600; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.ins-head-link:hover { text-decoration: underline; filter: none; }

/* El ritmo diario por mes: columnas, el mes parcial con trama y sus días. */
.ins-cols { display: flex; align-items: flex-end; gap: calc(10px * var(--cj-g)); height: calc(170px * var(--cj-h)); padding-top: 18px; }
.ins-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; }
.ins-col-v { font: 700 calc(12px * var(--cj-k)) var(--font-mono); color: var(--ink); white-space: nowrap; }
.ins-col-b { width: 100%; max-width: 56px; border-radius: 5px 5px 0 0; background: var(--good-ink); }
.ins-col.es-parcial .ins-col-b { background: repeating-linear-gradient(-45deg, var(--good-ink) 0 4px, transparent 4px 8px); border: 1.5px solid var(--good-ink); border-bottom: 0; box-sizing: border-box; }
.ins-col-m { font-weight: 600; color: var(--ink); white-space: nowrap; }
.ins-col-d { color: var(--cj-ink-faint); white-space: nowrap; }
.ins-col-eje { border-top: 1px solid var(--cj-line); }

.ins-tabla { width: 100%; border-collapse: collapse; }
.ins-tabla th { text-align: left; font-weight: 600; color: var(--cj-ink-faint); padding: 6px 8px; border-bottom: 1px solid var(--cj-line); white-space: nowrap; }
.ins-tabla td { padding: 7px 8px; border-bottom: 1px solid var(--cj-line); color: var(--ink); }
.ins-tabla tr:last-child td { border-bottom: 0; }
.ins-tabla .der { text-align: right; }
.ins-tabla td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.ins-tabla .ins-fuerte { font-weight: 700; color: var(--good-ink); }
.ins-tabla .ins-dias { color: var(--cj-ink-faint); margin-left: 6px; }
.ins-estados { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-estados .cj-chip b { color: var(--ink); margin-left: 4px; }

/* El trabajo registrado: una fila por circuito, con sus meses como mini barras. */
.ins-circ { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 10px 16px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cj-line); }
.ins-circ:last-child { border-bottom: 0; }
.ins-circ-n { font-weight: 600; color: var(--ink); }
.ins-circ-n small { display: block; font-weight: 400; color: var(--cj-ink-faint); margin-top: 2px; }
.ins-mini { display: flex; align-items: flex-end; gap: 4px; height: calc(34px * var(--cj-h)); }
.ins-mini > span { flex: 1; max-width: 34px; background: var(--info-ink); border-radius: 3px 3px 0 0; min-height: 2px; position: relative; }
.ins-mini > span.es-vacio { background: var(--cj-line); }
.ins-circ-t { font: 700 calc(15px * var(--cj-k)) var(--font-mono); color: var(--ink); text-align: right; white-space: nowrap; }
.ins-meses { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto; gap: 16px; color: var(--cj-ink-faint); }
.ins-meses > div { display: flex; gap: 4px; }
.ins-meses > div span { flex: 1; max-width: 34px; text-align: center; }

/* Lo que el sistema encontró solo */
.ins-hall { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: calc(10px * var(--cj-g)); }
.ins-h { padding: calc(14px * var(--cj-g)); border: 1px solid var(--cj-line); border-radius: 8px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; }
.ins-h b { font: 700 calc(26px * var(--cj-k)) / 1 var(--font-mono); color: var(--warn-ink); letter-spacing: -0.02em; }
.ins-h-u { font-weight: 700; color: var(--ink); }
.ins-h p { margin: 0; color: var(--cj-ink-muted); line-height: 1.55; flex: 1; }
.ins-h .cj-btn { align-self: flex-start; }

/* Los cuatro sectores */
.ins-sectores .cj-cifra a { font-weight: 600; color: var(--accent-ink); text-decoration: none; }

/* Canales y adopción */
.ins-dos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(13px * var(--cj-g)); }
.ins-canal { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ins-canal-n { font-weight: 600; color: var(--ink); }
.ins-canal-t { height: calc(10px * var(--cj-g)); border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.ins-canal-t > span { display: block; height: 100%; background: var(--good-ink); border-radius: 99px; }
.ins-canal.es-abajo .ins-canal-t > span { background: var(--warn-ink); }
.ins-canal.es-abajo .ins-canal-n { color: var(--warn-ink); }
.ins-canal-v { font-family: var(--font-mono); text-align: right; white-space: nowrap; color: var(--ink); }
.ins-canal-v small { display: block; color: var(--cj-ink-faint); }
.ins-nota-ojo { margin: 0; padding: 10px 12px; border-radius: 6px; background: var(--revisar-soft); color: var(--ink); line-height: 1.55; }
.ins-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.ins-roles .cj-chip { font-family: var(--font-body); }
.ins-roles .cj-chip b { font-family: var(--font-mono); color: var(--ink); margin-left: 5px; }
.ins-aparte { margin: 0; padding-top: 10px; border-top: 1px dashed var(--cj-line); color: var(--cj-ink-muted); line-height: 1.55; }
.ins-aparte b { color: var(--ink); }
.ins-registran { margin: 0; color: var(--cj-ink-muted); line-height: 1.6; }
.ins-registran b { color: var(--ink); font-family: var(--font-mono); }
.ins-registran strong { color: var(--ink); }

@media (max-width: 1000px) {
  .ins-dos { grid-template-columns: minmax(0, 1fr); }
  .cj-cifras-3.ins-titular-c, .cj-cifras-4.ins-sectores { grid-template-columns: minmax(0, 1fr); }
  .cj-cifras-3.ins-titular-c .cj-cifra + .cj-cifra, .cj-cifras-4.ins-sectores .cj-cifra + .cj-cifra { border-left: 0; padding-left: 0; border-top: 1px solid var(--cj-line); padding-top: 12px; }
}
@media (max-width: 720px) {
  .ins-circ, .ins-meses { grid-template-columns: minmax(0, 1fr) auto; }
  .ins-circ .ins-mini, .ins-meses > div { grid-column: 1 / -1; grid-row: 2; }
  .ins-meses > span:first-child { display: none; }
  .ins-cols { gap: 5px; }
}
@media print {
  .ins-head-link, .ins-h .cj-btn { display: none !important; }
  .ins-col-b, .ins-canal-t > span, .ins-mini > span { background: #555 !important; }
  .ins-col.es-parcial .ins-col-b { background: repeating-linear-gradient(-45deg, #555 0 4px, transparent 4px 8px) !important; border-color: #555; }
  .ins-h b, .ins-tabla .ins-fuerte, .ins-pagina .cj-cifra b { color: #000 !important; }
  .ins-pagina .cj-panel { break-inside: avoid; }
}

/* Adaptación al CRM (no estaba en nuevo-css-98a): lo que el prototipo tenía en
   línea, y el titular cuando no hay tiempos de resolución (dos cifras). */
.ins-titular-c.es-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ins-nota-sec { margin: 0; max-width: 96ch; }
.ins-cols.ins-cols-eje { height: auto; padding-top: 6px; align-items: flex-start; }
.ins-cols.ins-cols-eje .ins-col { justify-content: flex-start; gap: 2px; }
.ins-sectores { padding-bottom: calc(16px * var(--cj-g)); }
.ins-col-m, .ins-col-d { text-align: center; }