:root { --azul:#1d4f91; --gris:#5b6472; --borde:#dfe3e8; --fondo:#f4f6f9; --ok:#1e7a46; --alerta:#b3261e; }
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fondo); color:#1c2330; }
a { color:var(--azul); }
.barra { display:flex; justify-content:space-between; align-items:center; padding:.6rem 1.25rem; background:#fff; border-bottom:1px solid var(--borde); }
.marca { font-weight:700; text-decoration:none; color:var(--azul); letter-spacing:.04em; }
.marca span { font-weight:400; color:var(--gris); }
.sesion { display:flex; gap:1rem; align-items:center; font-size:.9rem; }
.quien small { color:var(--gris); margin-left:.4rem; }
.en-linea { display:inline-flex; gap:.4rem; align-items:center; margin:0; }
.enlace { background:none; border:0; color:var(--azul); cursor:pointer; font:inherit; padding:0; text-decoration:underline; }
.contenido { max-width:1200px; margin:0 auto; padding:1.25rem; }
.encabezado h1 { margin:.2rem 0; }
.sutil { color:var(--gris); margin:.1rem 0 1rem; }
.tarjeta { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:1rem 1.25rem; margin-bottom:1rem; overflow-x:auto; }
.angosta { max-width:420px; margin:3rem auto; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:.75rem; margin-bottom:1rem; }
.kpi { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:.8rem 1rem; display:flex; flex-direction:column; }
.kpi .valor { font-size:1.5rem; font-weight:650; }
.kpi .etiqueta { color:var(--gris); font-size:.85rem; }
table { width:100%; border-collapse:collapse; font-size:.92rem; }
th, td { text-align:left; padding:.5rem .6rem; border-bottom:1px solid var(--borde); vertical-align:top; }
th { color:var(--gris); font-weight:600; font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; }
.num { text-align:right; white-space:nowrap; }
.motivo { max-width:340px; color:var(--gris); font-size:.85rem; }
.vacio { text-align:center; color:var(--gris); padding:1.5rem; }
.insignia { display:inline-block; padding:.1rem .5rem; border-radius:999px; font-size:.78rem; background:#e8ecf2; }
.prio-muy_alta { background:#fde4e2; color:#8c1d18; } .prio-alta { background:#feecd2; color:#8a4b00; }
.prio-media { background:#fff6cc; color:#6b5a00; } .prio-baja { background:#e8ecf2; color:var(--gris); }
.riesgo-bajo { background:#eaf6ee; color:#1d6b34; } .riesgo-medio { background:#fff6cc; color:#6b5a00; } .riesgo-alto { background:#fde4e2; color:#8c1d18; }
.recuperar { background:#e3ecfb; color:var(--azul); } .hecho { background:#dff3e7; color:var(--ok); } .tipo { background:#eef0f4; }
.formulario { display:flex; flex-direction:column; gap:.9rem; }
.formulario label { display:flex; flex-direction:column; gap:.3rem; font-size:.9rem; }
input, select { padding:.5rem .6rem; border:1px solid var(--borde); border-radius:6px; font:inherit; }
.boton { background:var(--azul); color:#fff; border:0; border-radius:6px; padding:.55rem 1rem; font:inherit; cursor:pointer; }
.boton.chico { padding:.3rem .7rem; font-size:.85rem; }
.filtros { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.8rem; }
.paginas { display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:.8rem; color:var(--gris); }
.alerta { background:#fde4e2; color:var(--alerta); padding:.6rem .8rem; border-radius:6px; }
.aviso { background:#dff3e7; color:var(--ok); padding:.6rem .8rem; border-radius:6px; }
.argumento dl { display:grid; grid-template-columns:200px 1fr; gap:.4rem 1rem; margin:0; }
.argumento dt { font-weight:600; color:var(--gris); } .argumento dd { margin:0; }
@media (max-width:700px) { .argumento dl { grid-template-columns:1fr; } .contenido { padding:.75rem; } }
.plegable summary { cursor:pointer; font-weight:600; }
.plegable[open] summary { margin-bottom:.6rem; }
.resumen-filtro { color:var(--gris); margin:.2rem 0 .8rem; }
.resumen-filtro strong { color:#1c2330; }
.principal { display:flex; gap:.25rem; padding:0 1.25rem; background:#fff; border-bottom:1px solid var(--borde); }
.principal a, .pestanas a { padding:.55rem .9rem; text-decoration:none; color:var(--gris); border-bottom:2px solid transparent; }
.principal a.activo, .pestanas a.activo { color:var(--azul); border-bottom-color:var(--azul); font-weight:600; }
.pestanas { display:flex; gap:.25rem; margin-bottom:1rem; border-bottom:1px solid var(--borde); }
.nota { color:var(--gris); font-size:.88rem; margin:.2rem 0 1rem; }
.nd { color:var(--gris); }
.negativo { color:var(--alerta); font-weight:600; }
.col-cliente { max-width:160px; white-space:normal; word-break:break-word; }
.enlace-kpi { text-decoration:none; color:inherit; }
.enlace-kpi:hover { border-color:var(--azul); }
.casilla { display:inline-flex; flex-direction:row; gap:.35rem; align-items:center; font-size:.9rem; }
.nivel-critica, .nivel-critico, .sem-critico { background:#fde4e2; color:#8c1d18; }
.nivel-alta, .nivel-alto, .sem-urgente { background:#feecd2; color:#8a4b00; }
.nivel-media, .nivel-medio, .sem-atencion { background:#fff6cc; color:#6b5a00; }
.nivel-baja, .nivel-bajo, .sem-vigilancia { background:#e3ecfb; color:var(--azul); }
.nivel-atencion { background:#fff6cc; color:#6b5a00; }  /* Riesgo de rotacion, D-062: mismo amarillo que sem-atencion */
.sem-normal { background:#dff3e7; color:var(--ok); }
.corto { width:11rem; }
.ancho { width:17rem; }
.dos-columnas { display:grid; grid-template-columns:repeat(auto-fit,minmax(420px,1fr)); gap:1rem; }
tr.reserva td { color:var(--gris); }
tr.seleccion td { background:#eef3fb; }
.leyenda { display:flex; gap:1rem; font-size:.85rem; color:var(--gris); margin:.4rem 0 0; flex-wrap:wrap; }
.leyenda i { display:inline-block; width:.8rem; height:.8rem; border-radius:2px; margin-right:.3rem; vertical-align:-1px; }
.grafica { width:100%; height:auto; display:block; }
.barra-real { fill:#5b8fd0; } .barra-parcial { fill:#b7cdea; } .barra-proyeccion { fill:#e0902d; }
.etq-grafica { font-size:10px; fill:#5b6472; text-anchor:middle; }
.val-grafica { font-size:9px; fill:#1c2330; text-anchor:middle; }
.sube { color:var(--ok); } .baja { color:var(--alerta); }
.leyenda .barra-real { background:#5b8fd0; } .leyenda .barra-parcial { background:#b7cdea; } .leyenda .barra-proyeccion { background:#e0902d; }
.banner-licencia { background:#fff6cc; color:#6b5a00; padding:.45rem 1.25rem; font-size:.9rem; border-bottom:1px solid #eadf9d; }
.banner-licencia.urgente { background:#fde4e2; color:#8c1d18; border-bottom-color:#f3b9b4; }
.destacada { border-color:var(--azul); border-width:2px; }
.secreto { font-family:ui-monospace,Consolas,monospace; font-size:1.3rem; letter-spacing:.06em; background:#eef3fb; padding:.6rem .9rem; border-radius:6px; display:inline-block; user-select:all; }
.cuadricula { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:.9rem 1.2rem; align-items:end; }
.cuadricula .rutas, .cuadricula > div { grid-column:1 / -1; }
fieldset.rutas { border:1px solid var(--borde); border-radius:8px; display:flex; flex-wrap:wrap; gap:.3rem 1rem; padding:.6rem .8rem; }
fieldset.rutas legend { color:var(--gris); font-size:.85rem; padding:0 .3rem; }
.angosta-formulario { max-width:640px; }
.acciones-form { display:flex; gap:.6rem; flex-wrap:wrap; }
.boton.secundario { background:#fff; color:var(--azul); border:1px solid var(--azul); }
.acciones { white-space:nowrap; }
.acciones a, .acciones .en-linea { margin-right:.7rem; }
textarea { padding:.5rem .6rem; border:1px solid var(--borde); border-radius:6px; font:inherit; width:100%; }
.estado-licencia.estado-activa { border-left:5px solid var(--ok); }
.estado-licencia.estado-prueba { border-left:5px solid #d9a400; }
.estado-licencia.estado-prueba_vencida, .estado-licencia.estado-licencia_vencida, .estado-licencia.estado-manipulada { border-left:5px solid var(--alerta); }
.formulario label.casilla, label.casilla { flex-direction:row; align-items:center; gap:.35rem; }
select { max-width:100%; }
.kpis-panel { grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
.kpi .detalle { color:var(--gris); font-size:.8rem; margin-top:.25rem; line-height:1.35; }
.tres-columnas { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:1rem; }
.tres-columnas th, .tres-columnas td { padding:.5rem .35rem; }
.estado-datos { display:block; padding:.6rem .9rem; border-radius:8px; margin-bottom:1rem; text-decoration:none; color:#1c2330; border:1px solid var(--borde); background:#fff; }
.estado-datos.ok { background:#eaf6ee; border-color:#bfe0cb; }
.estado-datos.atencion { background:#fff6cc; border-color:#eadf9d; }
.estado-datos.critico { background:#fde4e2; border-color:#f3b9b4; }
.estado-datos .ver-mas { float:right; color:var(--azul); font-size:.85rem; }
.punto { display:inline-block; width:.7rem; height:.7rem; border-radius:50%; background:#9aa3b0; margin-right:.35rem; vertical-align:-1px; }
.punto.ok { background:var(--ok); } .punto.atencion { background:#d9a400; } .punto.critico { background:var(--alerta); }
tr.detalle-error td { border-bottom:1px solid var(--borde); background:#fdf3f2; }
tr.detalle-error pre { white-space:pre-wrap; word-break:break-word; font-size:.8rem; margin:.4rem 0 0; max-height:12rem; overflow:auto; }
.etq-fila { font-size:11px; fill:#1c2330; text-anchor:end; } .val-fila { font-size:11px; fill:#1c2330; }
.barra-critico, .barra-critica { fill:#e05a52; } .barra-urgente, .barra-alta { fill:#e0902d; } .barra-atencion, .barra-media { fill:#e3c04a; }
.barra-vigilancia { fill:#7aa6dc; } .barra-vencido { fill:#8a8f98; }
.spark { width:96px; height:24px; display:block; }
.enlace-descarga { align-self:center; margin-left:auto; font-size:.9rem; }
.estado-con_venta, .estado-aceptado { background:#d8f0e0; }
.estado-rechazado { background:#fbdcd9; }
.estado-pospuesto, .estado-contactado { background:#fff0c2; }
.sev-alta { background:#fbdcd9; }
.sev-media { background:#fff0c2; }
.sev-baja { background:#e8ecf2; }
.texto-reporte { width:100%; font-family:Consolas, 'Courier New', monospace; font-size:.85rem; border:1px solid var(--borde); border-radius:8px; padding:.6rem; box-sizing:border-box; resize:vertical; }
table.comparativo td:first-child { color:var(--gris); }

/* --- Telefonos y pantallas angostas (D-043) --- */
.principal { flex-wrap:wrap; }
.dos-columnas { grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); }
.tres-columnas { grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr)); }
.cuadricula { grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr)); }
@media (max-width:700px) {
  .barra { flex-wrap:wrap; gap:.3rem .8rem; padding:.5rem .75rem; }
  .sesion { flex-wrap:wrap; gap:.3rem .8rem; }
  .principal { flex-wrap:nowrap; overflow-x:auto; padding:0 .4rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .principal a { white-space:nowrap; padding:.75rem .7rem; flex:0 0 auto; }
  .pestanas { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .pestanas a { white-space:nowrap; padding:.65rem .8rem; flex:0 0 auto; }
  .banner-licencia { padding:.45rem .75rem; }
  .tarjeta { padding:.75rem; }
  .kpis, .kpis-panel { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.5rem; }
  .kpi { padding:.6rem .7rem; }
  .kpi .valor { font-size:1.2rem; overflow-wrap:anywhere; }
  .filtros > * { flex:1 1 9rem; min-width:0; }
  .filtros .corto, .filtros .ancho { width:auto; }
  .enlace-descarga { margin-left:0; }
  input, select, textarea, .boton { font-size:16px; }
  .boton, .filtros select, .filtros input { min-height:2.6rem; }
  table { font-size:.85rem; }
  th, td { padding:.45rem .5rem; }
  .grafica { min-width:520px; }
  .encabezado h1 { font-size:1.4rem; }
  .paginas { flex-wrap:wrap; gap:.5rem 1rem; }
  .secreto { font-size:1.05rem; overflow-wrap:anywhere; }
}
th.ordenable a { color:inherit; text-decoration:none; white-space:nowrap; }
th.ordenable a:hover { color:var(--azul); }
th.ordenable .flecha { font-size:.7rem; color:var(--azul); }

/* --- Encabezado y menú principal en azules (D-055) --- */
.barra { background:linear-gradient(120deg,#0a2757 0%,#12458f 55%,#2078d8 100%); color:#fff; border-bottom:0; padding:.75rem 1.5rem; box-shadow:0 2px 8px rgba(10,39,87,.35); }
.marca { color:#fff; font-size:1.25rem; letter-spacing:.14em; }
.marca span { color:#a9cbff; letter-spacing:.06em; font-weight:500; }
.sesion, .quien { color:#fff; }
.quien small { color:#cfe2ff; background:rgba(255,255,255,.16); border-radius:999px; padding:.1rem .6rem; }
.barra a:not(.marca), .barra .enlace { color:#e6f0ff; text-decoration:none; padding:.25rem .7rem; border:1px solid rgba(255,255,255,.35); border-radius:999px; }
.barra a:not(.marca):hover, .barra .enlace:hover { background:#fff; color:#12458f; }
.principal { flex-wrap:wrap; gap:.15rem; padding:.5rem 1rem .45rem; background:linear-gradient(180deg,#ffffff 0%,#e3eefc 100%); border-bottom:3px solid #2078d8; box-shadow:0 2px 6px rgba(18,69,143,.12); }
.principal a, .pestanas a { border-bottom:0; }
.principal a { padding:.42rem .5rem; font-size:.9rem; border-radius:999px; color:#12458f; font-weight:500; white-space:nowrap; transition:background .15s, color .15s; }
.principal a:hover { background:#cfe1fa; color:#0a2757; }
.principal a.activo { background:linear-gradient(135deg,#12458f,#2078d8); color:#fff; font-weight:600; box-shadow:0 2px 6px rgba(18,69,143,.4); }
.banner-licencia { border-bottom:0; }

/* --- Tablas largas con barras de desplazamiento (D-055): altura acotada, encabezado fijo, barra lateral y barra inferior --- */
.tabla-scroll { max-height:min(60vh, 560px); overflow:auto; border:1px solid var(--borde); border-radius:8px; scrollbar-width:auto; scrollbar-color:#5b8fd0 #e3eefc; }
.tabla-scroll table { min-width:max-content; width:100%; }
.tabla-scroll thead th { position:sticky; top:0; z-index:2; background:#eaf2fe; box-shadow:0 1px 0 var(--borde); }
.tabla-scroll tbody tr:hover td { background:#f3f8ff; }
.tabla-scroll::-webkit-scrollbar { width:14px; height:14px; }
.tabla-scroll::-webkit-scrollbar-track { background:#e3eefc; }
.tabla-scroll::-webkit-scrollbar-thumb { background:#5b8fd0; border-radius:8px; border:3px solid #e3eefc; }
.tabla-scroll::-webkit-scrollbar-thumb:hover { background:#2078d8; }
@media (max-width:700px) {
  .barra { padding:.55rem .75rem; }
  .principal { flex-wrap:nowrap; overflow-x:auto; padding:.4rem .4rem; }
  .principal a { padding:.65rem .8rem; flex:0 0 auto; }
  .tabla-scroll { max-height:70vh; }
}

/* --- Notas explicativas que se pueden ocultar (D-056) --- */
html.sin-notas .nota { display:none; }