/* ═══════════════════════════════════════════════════════════════════════════
   CRM Pensiones — Sistema de diseño v5 «ATRIO»
   Un lienzo gris sereno; el trabajo vive en superficies blancas que flotan.

   LO QUE CAMBIA RESPECTO A GRAFITO (v4):
     · El fondo de la app es un LIENZO (--lienzo), no papel a sangre.
       Todo dato vive en una superficie blanca con radio y sombra sutil.
     · Escala tipográfica real: título de página 24 px, cuerpo 14 px,
       controles de 34 px. La jerarquía se ve, no se supone.
     · El shell es nuevo: barra superior funcional de 56 px (búsqueda,
       fecha, densidad) + riel blanco de 236 px colapsable a 72 px con
       tooltips + encabezado de página DENTRO del contenido.

   REGLAS QUE SE CONSERVAN:
     1. EL COLOR ES DATO. Si quitar el color no quita información, sobra.
     2. UN PRIMARIO POR REGIÓN, CERO BOTONES DE GUARDAR.
     3. UNA SUPERFICIE POR DATO: una tabla con marco no va dentro de otra
        tarjeta con marco.

   ORDEN DE LA CASCADA (no reordenar):
     tokens → base → puente Bootstrap → botones → shell → filtros → tablas →
     bloques → componentes → ATRIO nuevos → puente legado → MÓVIL →
     impresión → movimiento reducido

   Se carga DESPUÉS de bootstrap.min.css. Bootstrap sigue mandando en la
   rejilla (.row/.col-*) y en las utilidades (.d-*, .g-*, .me-*). Aquí se
   manda en geometría y en tinta.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
   1 · TOKENS
   ───────────────────────────────────────────────────────────────────────── */
:root {
  /* ── Superficies ──────────────────────────────────────────────────────
     El lienzo es gris; lo que importa flota en blanco. Así la estructura
     de cada pantalla se VE: dónde empieza y termina cada herramienta. */
  --lienzo:     #F2F4F7;   /* el fondo de toda la app */
  --papel:      #FFFFFF;   /* superficies: tablas, formularios, tarjetas */
  --hundido:    #F7F8FA;   /* thead, campos de solo lectura, pozos */
  --hundido-2:  #EEF1F5;   /* hover de fila; --ink-3 encima da 4.72:1 */
  --flotante:   #FFFFFF;   /* popovers y modales */

  /* ── Tinta ── medida contra LAS TRES superficies, no solo contra blanco.
     Un token que solo pasa AA sobre papel falla el día que alguien lo pone
     en el thead. Ratios: papel / hundido / hundido-2 */
  --ink:   #0B0F1A;   /* 19.13 · 17.83 · 17.02 — títulos y valores */
  --ink-2: #3D4658;   /*  9.48 ·  8.83 ·  8.43 — cuerpo y celdas */
  --ink-3: #626C7E;   /*  5.30 ·  4.93 ·  4.72 — rótulos, meta, ayuda.
                         Se oscureció de #656F81: sobre el hover de fila daba
                         4.48:1 y AA pide 4.50. Una fila con el ratón encima es
                         justo la que se está leyendo. */
  --ink-4: #838C9E;   /*  3.38 ·  3.15 ·  3.01 — iconos y bordes. NUNCA texto */

  /* ── Líneas ── el 90 % de la estructura visual la hacen hairlines */
  --linea:         #E6E9EF;  /* separador entre filas */
  --linea-2:       #D3D8E2;  /* bajo el thead, marco de bloques */
  --linea-control: #7C8698;  /* borde de campo y de botón: 3.67:1, WCAG 1.4.11 */

  /* ── Marca — Pensiones Libertad ────────────────────────────────────────
     El azul del logo (8.08:1 sobre blanco, AAA) manda en acciones y estado
     activo. El VERDE del logo es hermoso y es una trampa: 2.05:1 sobre
     blanco, así que vive SOLO en degradados y detalles gráficos — jamás en
     texto ni en un estado. El verde que sí significa «bien» sigue siendo
     --ok, que está calibrado aparte. */
  --marca:       #0B4DA2;   /*  8.08 sobre papel · blanco encima: 8.08 */
  --marca-hover: #08397A;   /* 11.19 con blanco encima */
  --marca-tinte: #EAF1FB;   /* fila activa y chip puesto; marca encima 7.11 */
  --enlace:      #0F55B8;   /*  6.80 — enlaces (mismo tono de familia) */
  --foco-anillo: #0F55B8;   /* el mismo azul para el anillo de foco */

  /* Acentos decorativos de la marca: degradados, logotipo, filetes. NUNCA
     texto sobre blanco ni fondo de una etiqueta con letra encima. */
  --verde-marca:  #8CC63F;
  --verde-hondo:  #6DBB4A;
  --grad-marca:   linear-gradient(135deg, #0B4DA2 0%, #2E8B7A 55%, #8CC63F 100%);

  /* ── Semánticos ── cada tono con su tinte propio.
     El texto de la etiqueta se mide contra SU tinte, no contra el papel. */
  --ok:     #0F7A3D;  --ok-t:     #E8F5EC;   /* 5.42 papel · 4.83 tinte */
  --alerta: #8A5A00;  --alerta-t: #FBF1E0;   /* 5.93 · 5.29 */
  --riesgo: #B3261E;  --riesgo-t: #FBEAE9;   /* 6.54 · 5.62 */
  --info:   #0B5FA5;  --info-t:   #E9F2FA;   /* 6.57 · 5.81 */
  --activo: #6D3BC4;  --activo-t: #F1EBFC;   /* 6.83 · 5.87 */
  --neutro: #5A6577;  --neutro-t: #EFF2F6;   /* 5.89 · 5.25 */

  /* Tono en curso. Lo pisa [data-tono]; declarado aquí para que ninguna
     var() quede sin definir si alguien olvida el atributo. */
  --tono:   var(--neutro);
  --tono-t: var(--neutro-t);

  /* ── Tipografía ── una sola familia de interfaz.
     Inter tiene eje óptico: aprieta sola conforme crece. JetBrains Mono
     sobrevive SOLO para CURP, NSS y folios: cadenas que se comparan
     carácter por carácter. El dinero NO va en mono. */
  --fuente: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* ── Escala tipográfica ── ocho tamaños con saltos que SE VEN.
     Cuerpo 15 px, título de página 30 px, NADA por debajo de 12 px.
     Las tablas bajan a 14 px por su cuenta (regla propia), no la base. */
  --t11: 12px;     /* versalitas del thead, contadores — el piso absoluto */
  --t12: 13px;     /* meta, rótulos de campo, etiquetas */
  --t13: 15px;     /* CUERPO — celdas de lectura, campos, botones */
  --t14: 16px;     /* subtítulos y valores destacados de fila */
  --t16: 18px;     /* título de sección */
  --t20: 22px;     /* nombre del expediente, H1 de sección */
  --t24: 30px;     /* TÍTULO DE PÁGINA */
  --t26: 34px;     /* la cifra que se le enseña al cliente */

  /* ── Espaciado ── rejilla de 4, sin valores sueltos ── */
  --s1: 2px;  --s2: 4px;  --s3: 6px;  --s4: 8px;  --s5: 12px;
  --s6: 16px; --s7: 20px; --s8: 24px; --s9: 32px; --s10: 40px;

  /* ── Forma ── radios francos: la superficie se reconoce como pieza ── */
  --r-ctl:  8px;
  --r-caja: 12px;
  --r-full: 999px;

  /* ── Elevación ── tres niveles. Las superficies llevan la sombra MÍNIMA
     (apenas despega del lienzo); popovers y modales flotan de verdad ── */
  --sombra-1:     0 1px 2px rgba(11, 15, 26, .05), 0 1px 3px rgba(11, 15, 26, .05);
  --sombra-pop:   0 8px 24px -4px rgba(11, 15, 26, .12), 0 2px 6px rgba(11, 15, 26, .08);
  --sombra-modal: 0 24px 48px -12px rgba(11, 15, 26, .28);

  /* ── Movimiento ── una curva, tres duraciones. Se eliminan el page-enter de
     420 ms y el escalonado de los KPI: en una herramienta que se abre 300
     veces al día, una animación de entrada es un impuesto ── */
  --curva: cubic-bezier(.2, 0, 0, 1);
  --d1: 90ms; --d2: 140ms; --d3: 220ms;

  /* ── Layout ── medidas, no sugerencias ── */
  --rail-w:     232px;  /* riel con rótulos legibles */
  --rail-min:    72px;  /* riel colapsado: icono centrado + tooltip */
  --rail-actual: var(--rail-w);
  --wb-h:        60px;  /* BARRA SUPERIOR global: búsqueda, acción rápida,
                           agenda, fecha. Conserva el nombre porque todas las
                           cuentas de sticky (filtros, vistas, thead) anclan
                           contra él. */
  --filtros-h:   56px;  /* aduana de filtros: una línea, siempre */
  --vistas-h:    44px;  /* pestañas / vistas guardadas */
  --thead-h:     42px;
  /* Dónde se pega el thead. Por defecto asume barra superior + filtros;
     las pantallas sin aduana usan .contenido.sin-filtros y las de pestañas
     .contenido.con-vistas. */
  --thead-top:   calc(var(--wb-h) + var(--filtros-h));
  --pie-h:       52px;  /* pie de tabla con la paginación, siempre a la vista */
  --contenido-x: var(--s8);
  /* El ancho del área de trabajo NO es uno solo: lo decide el TIPO de
     pantalla vía <body data-ancho="...">. Este es el valor por defecto
     (tablas); formulario/detalle/tablero/completo lo pisan más abajo. */
  --ancho-max:   1720px;
  --barra-inf:   56px;  /* barra de navegación inferior en teléfono */
  --tap:         44px;  /* piso del pulgar; no se negocia */

  /* Proporción de una barra (calculadora, embudo, avance). La plantilla la
     pisa con style="--pct:62%"; declarada aquí para que ninguna var() del
     sistema dependa de un valor que quizá nadie escribió. */
  --pct: 0%;

  /* ── Densidad ── la respuesta directa a «ocupa mucho espacio»:
     que lo decida quien mira. El dial mueve el ESPACIO, nunca la letra:
     encoger tipografía no da densidad, da cansancio ── */
  --fila:   46px;
  --ctl-h:  40px;
}

/* Dial de densidad. Se conmuta con [data-densidad] en <html>. */
html[data-densidad="compacta"] { --fila: 38px; --ctl-h: 36px; }
html[data-densidad="comoda"]   { --fila: 52px; --ctl-h: 44px; }

/* ── Ancho del área de trabajo POR TIPO DE PANTALLA ──
   Cada plantilla lo declara con {% block ancho %} en <body data-ancho>.
   La regla: los formularios no se estiran, las tablas sí aprovechan, y las
   herramientas espaciales (mapa, agenda) toman TODO. */
body[data-ancho="formulario"] { --ancho-max: 1200px; }
body[data-ancho="detalle"]    { --ancho-max: 1520px; }
body[data-ancho="tablero"]    { --ancho-max: 1600px; }
body[data-ancho="completo"]   { --ancho-max: none; }

/* Riel minimizado: 156 px horizontales de vuelta. */
body[data-riel="min"] { --rail-actual: var(--rail-min); }

/* ─────────────────────────────────────────────────────────────────────────
   2 · BASE
   ───────────────────────────────────────────────────────────────────────── */

/* 15px se CONSERVA durante toda la transición: todos los rem de Bootstrap
   (mb-3, g-2, gutters) están calibrados contra este valor en 25 plantillas.
   Soltarlo a 16 px engorda el 6.7 % de la app en un solo commit. */
html { font-size: 15px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: var(--t13);
  line-height: 1.45;
  color: var(--ink-2);
  background: var(--lienzo);
  -webkit-font-smoothing: antialiased;
  /* Las cifras siempre a plomo. Es el detalle que hace que una herramienta
     financiera se sienta cara, y cuesta una línea. */
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss03" 1;
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; color: var(--ink); line-height: 1.25; }
p { margin: 0 0 var(--s5); }
a { color: var(--enlace); text-decoration: none; }
a:hover { text-decoration: underline; }
hr { border: 0; border-top: 1px solid var(--linea); margin: var(--s4) 0; }
code, kbd, samp, .mono, .mono-chico { font-family: var(--mono); font-size: .92em; }
kbd {
  font-family: var(--mono); font-size: var(--t11); padding: 1px var(--s2);
  border: 1px solid var(--linea-2); border-radius: var(--r-ctl);
  background: var(--hundido); color: var(--ink-2);
}
strong, b { font-weight: 600; color: var(--ink); }
small { font-size: var(--t12); }
::selection { background: var(--marca-tinte); color: var(--ink); }

/* Foco visible en todo. Nunca outline:none sin sustituto. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--foco-anillo);
  outline-offset: 1px;
  border-radius: var(--r-ctl);
}
/* Bootstrap trae .btn:focus-visible { outline: 0 } (0,2,0) y le ganaba al
   :where de especificidad cero: los botones quedaban SIN anillo de foco al
   tabular. Esta regla, cargada después de Bootstrap, lo repone. */
.btn:focus-visible {
  outline: 2px solid var(--foco-anillo);
  outline-offset: 1px;
  box-shadow: none;
}

.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ─────────────────────────────────────────────────────────────────────────
   3 · PUENTE BOOTSTRAP
   Geometría uniforme para los 79 .form-control, 29 .form-select y 72 .btn
   que ya existen. El color de las variantes de Bootstrap NO se toca: por eso
   .btn no declara color ni background y .btn-outline-secondary sigue siendo
   distinguible de .btn-light.
   ───────────────────────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]):not([type="color"]),
select,
textarea {
  /* input[type="text"] NO empareja un <input> sin atributo type. Enumerar lo
     que se excluye es la única forma correcta de escribir este selector. */
  height: var(--ctl-h);
  padding: 0 var(--s4);
  font-family: inherit;
  font-size: var(--t13);
  line-height: calc(var(--ctl-h) - 2px);
  color: var(--ink);
  background: var(--papel);
  border: 1px solid var(--linea-control);
  border-radius: var(--r-ctl);
  transition: border-color var(--d1) var(--curva), box-shadow var(--d1) var(--curva);
}
textarea { height: auto; min-height: calc(var(--ctl-h) * 2); padding: var(--s3) var(--s4); line-height: 1.45; }

/* El select de Bootstrap conserva font-size:16px y padding .375rem .75rem:
   36 px de contenido dentro de una caja de 28. Se corrige aquí y nada más. */
select, .form-select {
  height: var(--ctl-h);
  padding: 0 26px 0 var(--s4);
  font-size: var(--t13);
  background-position: right var(--s3) center;
  background-size: 12px 9px;
}

input:hover:not(:focus):not([readonly]), select:hover:not(:focus), textarea:hover:not(:focus) {
  border-color: var(--ink-3);
}
input:focus, select:focus, textarea:focus,
.form-control:focus, .form-select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-tinte);
}
input[readonly], .form-control[readonly] {
  background: var(--hundido); color: var(--ink-2); border-color: var(--linea-2);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }

.form-label, .etq-campo {
  display: block;
  margin: 0 0 var(--s2);
  font-size: var(--t12);
  font-weight: 500;
  color: var(--ink-3);
}
.form-check-input { border-color: var(--linea-control); }
.form-check-input:checked { background-color: var(--marca); border-color: var(--marca); }
.form-check-input:focus { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tinte); }
.form-check-label { font-size: var(--t13); color: var(--ink-2); }

/* ─────────────────────────────────────────────────────────────────────────
   4 · BOTONES
   .btn solo declara GEOMETRÍA. El color lo pone la variante.
   ───────────────────────────────────────────────────────────────────────── */
.btn {
  --alto-btn: var(--ctl-h);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  height: var(--alto-btn);
  padding: 0 var(--s5);
  font-family: inherit;
  font-size: var(--t13);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--r-ctl);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--d1) var(--curva), border-color var(--d1) var(--curva),
              color var(--d1) var(--curva);
}
.btn:active { transform: none; }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }
.btn-sm { --alto-btn: 32px; padding: 0 var(--s4); font-size: var(--t12); }
.btn-lg { --alto-btn: 46px; padding: 0 var(--s7); font-size: var(--t14); }

/* EL primario. Uno por región. */
.btn-p {
  background: var(--marca); color: #fff; border-color: var(--marca);
}
.btn-p:hover { background: var(--marca-hover); border-color: var(--marca-hover); color: #fff; }

/* Secundario: la acción legítima que no manda. */
.btn-s {
  background: var(--papel); color: var(--ink); border-color: var(--linea-control);
}
.btn-s:hover { background: var(--hundido); color: var(--ink); }

/* Fantasma: navegación y cancelar. Sin caja hasta que se toca. */
.btn-fantasma { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-fantasma:hover { background: var(--hundido-2); color: var(--ink); }

/* Destructivo: proponer baja, descartar. */
.btn-riesgo { background: var(--papel); color: var(--riesgo); border-color: var(--riesgo); }
.btn-riesgo:hover { background: var(--riesgo-t); color: var(--riesgo); }

/* Solo icono. El área de toque crece sin que la caja crezca. */
.btn-ico { width: var(--alto-btn); flex: none; padding: 0; color: var(--ink-2); background: transparent; border-color: transparent; }
.btn-ico:hover { background: var(--hundido-2); color: var(--ink); }

/* ─────────────────────────────────────────────────────────────────────────
   5 · APP SHELL v5 — riel blanco colapsable + barra superior funcional +
   encabezado de página dentro del contenido, todo sobre el lienzo.
   ───────────────────────────────────────────────────────────────────────── */
.app-shell { display: flex; min-height: 100vh; background: var(--lienzo); }

/* El riel es una superficie blanca: la primera pieza del producto, no un
   mueble hundido. Conserva los RÓTULOS expandido; colapsado, cada icono
   trae tooltip (y su nombre queda en el árbol de accesibilidad). */
.sidebar, .rail {
  position: sticky; top: 0; align-self: flex-start;
  display: flex; flex-direction: column;
  width: var(--rail-actual); min-width: var(--rail-actual);
  height: 100vh;
  background: var(--papel);
  border-right: 1px solid var(--linea);
  overflow: hidden auto;
  overscroll-behavior: contain;
  transition: width var(--d2) var(--curva), min-width var(--d2) var(--curva);
  z-index: 40;
}
.rail-marca {
  display: flex; align-items: center; gap: var(--s4); flex: none;
  height: var(--wb-h); padding: 0 var(--s6);
  font-size: var(--t14); font-weight: 650; color: var(--ink);
  letter-spacing: -.01em; white-space: nowrap;
}
/* El isotipo real de la casa, no un icono genérico. Va sin caja: la figura
   ya trae su propio degradado y respira mejor sin fondo. */
.rail-marca .rail-logo { flex: none; width: 32px; height: 32px; display: block; }
.rail-nav { display: flex; flex-direction: column; padding: var(--s4) var(--s5) var(--s5); gap: 2px; }
.rail-grupo {
  padding: var(--s6) var(--s4) var(--s2);
  font-size: var(--t11); font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}
/* Secciones colapsables (Gestión, Administración): las opciones de todos los
   días no compiten con las de una vez al mes. Estado persistido por crm.js. */
details.rail-secc { display: contents; }
details.rail-secc > summary {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s6) var(--s4) var(--s2);
  font-size: var(--t11); font-weight: 650; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
  cursor: pointer; list-style: none; user-select: none;
}
details.rail-secc > summary::-webkit-details-marker { display: none; }
details.rail-secc > summary:hover { color: var(--ink-3); }
details.rail-secc > summary i { font-size: 11px; transition: transform var(--d2) var(--curva); }
details.rail-secc[open] > summary i { transform: rotate(90deg); }
.rail-nav a, .sidebar .nav-link {
  position: relative;
  display: flex; align-items: center; gap: var(--s5);
  height: 36px; padding: 0 var(--s5);
  font-size: var(--t13); font-weight: 500; color: var(--ink-2);
  border-radius: var(--r-ctl); text-decoration: none; white-space: nowrap;
}
.rail-nav a i, .sidebar .nav-link i { flex: none; width: 18px; font-size: 15.5px; color: var(--ink-3); text-align: center; }
.rail-nav a:hover, .sidebar .nav-link:hover { background: var(--hundido-2); color: var(--ink); text-decoration: none; }
.rail-nav a.active, .sidebar .nav-link.active {
  background: var(--marca-tinte); color: var(--marca); font-weight: 600;
}
.rail-nav a.active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; border-radius: var(--r-full);
  /* El filete del módulo activo lleva el degradado de la marca: azul arriba,
     verde abajo. Detalle chico, identidad inmediata. */
  background: linear-gradient(180deg, var(--marca), var(--verde-hondo));
}
.rail-nav a.active i, .sidebar .nav-link.active i { color: var(--marca); }
.rail-txt { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rail-n {
  flex: none; min-width: 20px; height: 18px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t11); font-weight: 600;
  color: var(--ink-2); background: var(--hundido-2); border-radius: var(--r-full);
}
.rail-nav a.active .rail-n { background: #fff; color: var(--marca); }
.nav-aviso {
  min-width: 18px; height: 18px; padding: 0 var(--s2); margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t11); font-weight: 600; border-radius: var(--r-full);
  background: var(--info); color: #fff;
}
.nav-aviso-vencidas { background: var(--riesgo); }

/* Pie del riel: la persona. Avatar con iniciales + nombre + rol. */
.rail-pie {
  margin-top: auto; padding: var(--s4) var(--s5);
  border-top: 1px solid var(--linea);
  display: flex; align-items: center; gap: var(--s4);
  font-size: var(--t12); color: var(--ink-3); white-space: nowrap;
}
.rail-pie .quien { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.rail-pie .quien b { display: block; color: var(--ink); font-weight: 600; font-size: var(--t13); }
.avatar-ini {
  flex: none; display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--marca-tinte); color: var(--marca);
  font-size: var(--t12); font-weight: 650; letter-spacing: .02em;
  text-transform: uppercase; user-select: none;
}
.avatar-ini.chico { width: 26px; height: 26px; font-size: 10.5px; }

/* ── Riel colapsado a 72 px ──
   El rótulo se oculta a la VISTA pero permanece en el árbol de accesibilidad;
   al pasar el ratón, aparece como tooltip flotante al lado del icono. */
body[data-riel="min"] .rail-txt {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
body[data-riel="min"] .rail-grupo { padding: var(--s5) 0 var(--s2); height: 14px; overflow: hidden; }
body[data-riel="min"] .rail-grupo::before { content: "···"; display: block; text-align: center; letter-spacing: .2em; }
body[data-riel="min"] .rail-grupo { font-size: 0; }
body[data-riel="min"] .rail-grupo::before { font-size: var(--t11); }
body[data-riel="min"] .rail-pie .quien { display: none; }
/* Las secciones colapsables (Gestión, Administración) también se encogen:
   queda solo su chevron centrado; el rótulo vive en el árbol de accesibilidad. */
body[data-riel="min"] details.rail-secc > summary { justify-content: center; padding: var(--s5) 0 var(--s2); font-size: 0; letter-spacing: 0; }
body[data-riel="min"] details.rail-secc > summary i { font-size: 11px; }
body[data-riel="min"] .rail-nav a { justify-content: center; padding: 0; gap: 0; }
body[data-riel="min"] .rail-marca { justify-content: center; padding: 0; gap: 0; }
body[data-riel="min"] .rail-marca .rail-txt { display: none; }
body[data-riel="min"] .rail-pie { flex-wrap: wrap; justify-content: center; gap: var(--s2); padding: var(--s4) var(--s2); }
body[data-riel="min"] .nav-aviso { position: absolute; margin: 0; transform: translate(11px, -9px); }
body[data-riel="min"] .rail-n { display: none; }
/* Tooltip CSS del riel colapsado: sale del data-tip que pone base.html.
   position:fixed A PROPÓSITO: escapa del overflow del riel (un absolute se
   recorta y deja una esquirla). Sin top/left, un fixed usa su posición
   estática — junto al icono — que es exactamente donde debe salir. */
body[data-riel="min"] .rail-nav a[data-tip]:hover::after,
body[data-riel="min"] .rail-nav a[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: fixed;
  margin-left: calc(var(--rail-min) / 2 + 10px);
  transform: translateY(-4px);
  z-index: 90; padding: var(--s3) var(--s5);
  font-size: var(--t12); font-weight: 500; white-space: nowrap;
  color: #fff; background: var(--ink); border-radius: var(--r-ctl);
  box-shadow: var(--sombra-pop); pointer-events: none;
}

/* Mostrar/ocultar por dispositivo. Declaradas aquí, invertidas en el bloque
   móvil del final: nunca al revés. */
.solo-movil { display: none !important; }
.solo-escritorio { display: inline-flex; }

/* Columna de trabajo */
.main-col { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }

/* ── BARRA SUPERIOR — 56 px que SÍ trabajan ──
   Búsqueda global siempre a la mano, la fecha del despacho, el dial de
   densidad y el acceso a la agenda. Nada de línea blanca vacía. */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--s4);
  height: var(--wb-h); padding: 0 var(--contenido-x);
  background: var(--papel);
  border-bottom: 1px solid var(--linea);
}
.topbar-fecha { font-size: var(--t12); color: var(--ink-3); white-space: nowrap; }
.topbar-sep { width: 1px; height: 22px; background: var(--linea); margin: 0 var(--s2); }
/* Campana de agenda: el aviso vive encima del icono. */
.topbar-campana { position: relative; }
.topbar-campana .nav-aviso {
  position: absolute; top: 2px; right: 2px; margin: 0;
  pointer-events: none;
}
/* Menú de acción rápida (popover nativo con <details>). */
.accion-rapida { position: relative; }
.accion-rapida > summary { list-style: none; }
.accion-rapida > summary::-webkit-details-marker { display: none; }
.accion-rapida .pop { min-width: 240px; }
.tecla-atajo {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 1px var(--s3);
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
  border: 1px solid var(--linea-2); border-radius: 5px; background: var(--papel);
}

/* ── ENCABEZADO DE PÁGINA — vive DENTRO del contenido, sobre el lienzo ──
   Título de 24 px, el conteo como pastilla, las acciones a la derecha.
   Las plantillas siguen escribiendo wb-titulo / wb-conteo / wb-acciones:
   el mismo markup, otra pieza. */
.wb {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s3) var(--s4);
  /* Alineado al riel, NO centrado: en un monitor ancho el hueco entre el menú
     y el contenido leía como error; el aire sobrante vive a la derecha. */
  width: 100%; max-width: var(--ancho-max); margin-inline: 0 auto;
  padding: var(--s7) var(--contenido-x) var(--s5);
  background: transparent;
}
.wb h1, .wb-titulo {
  font-size: var(--t24); font-weight: 650; color: var(--ink);
  letter-spacing: -.022em; line-height: 1.15;
}
.wb-conteo {
  align-self: center;
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 var(--s5);
  font-size: var(--t12); font-weight: 550; color: var(--ink-3);
  background: var(--papel); border: 1px solid var(--linea-2);
  border-radius: var(--r-full); white-space: nowrap;
}
.wb-sub { flex-basis: 100%; font-size: var(--t13); color: var(--ink-3); margin-top: -2px; }
.wb-acciones { display: flex; align-items: center; gap: var(--s3); margin-left: auto; }
.crecer { flex: 1 1 auto; min-width: 0; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* El contenido se acota en monitores anchos: a 2560 px el trabajo no se
   desparrama; el lienzo respira a los lados. */
.contenido {
  flex: 1 1 auto; min-width: 0; padding: 0;
  width: 100%; max-width: var(--ancho-max); margin-inline: 0 auto;
}
.zona:last-child { padding-bottom: var(--s10); }
/* Cuánto cromo pegajoso hay encima del thead. */
.contenido.sin-filtros { --thead-top: var(--wb-h); }
.contenido.con-vistas  { --thead-top: calc(var(--wb-h) + var(--vistas-h)); }
.contenido.con-filtros-y-vistas { --thead-top: calc(var(--wb-h) + var(--filtros-h) + var(--vistas-h)); }
.zona { padding: var(--s5) var(--contenido-x); }
.page-enter { animation: none; }

/* Búsqueda global: vive en la barra superior. El panel flota. */
.buscador-global { position: relative; flex: 0 1 360px; min-width: 180px; }
.buscador-global > i {
  position: absolute; left: var(--s5); top: 50%; transform: translateY(-50%);
  font-size: 13px; color: var(--ink-3); pointer-events: none;
}
.buscador-global input {
  /* !important: el reset global de inputs (línea ~233) tiene especificidad
     (0,5,1) por su cadena de :not() y pisaba este padding — la lupa quedaba
     ENCIMA de la primera letra y el chip Ctrl K sobre el final del texto. */
  width: 100%; padding-left: 32px !important; padding-right: 58px !important;
  font-size: var(--t12);
  background: var(--hundido); border-color: transparent;
}
.buscador-global input:hover:not(:focus) { border-color: var(--linea-2); }
.buscador-global input:focus { background: var(--papel); }
.buscador-global .tecla-atajo {
  position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%);
  pointer-events: none;
}
.resultados-busqueda {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  width: max(100%, 460px);
  max-height: 60vh; overflow: auto;
  background: var(--flotante); border: 1px solid var(--linea-2);
  border-radius: var(--r-caja); box-shadow: var(--sombra-pop);
  padding: var(--s2);
}
.resultados-busqueda .resultado {
  display: flex; flex-direction: column; gap: 1px;
  padding: var(--s4) var(--s5);
  border-radius: var(--r-ctl); color: var(--ink); text-decoration: none;
}
.resultados-busqueda .r-nombre { font-size: var(--t13); font-weight: 600; }
.resultados-busqueda .r-detalle { font-size: var(--t12); color: var(--ink-3); font-family: var(--mono); }
.resultados-busqueda .resultado:hover, .resultados-busqueda .resultado.activo {
  background: var(--hundido-2);
}
.resultados-busqueda .sin-resultados { padding: var(--s5); color: var(--ink-3); font-size: var(--t12); }

/* Barra inferior de navegación en teléfono. Se declara aquí y se muestra en
   el bloque móvil del final. */
.barra-inferior {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  height: calc(var(--barra-inf) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--papel); border-top: 1px solid var(--linea-2);
}
.barra-inferior a {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
  font-size: var(--t11); color: var(--ink-3); text-decoration: none;
}
.barra-inferior a i { font-size: 17px; }
.barra-inferior a.active { color: var(--marca); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────
   6 · FILTROS — 213 px en cuatro renglones → 40 px en uno
   Cuatro reglas: sin rótulos (el chip dice su nombre y su valor), sin botón
   «Filtrar» (se aplica al elegir), sin botón «Limpiar» fijo (cada chip trae
   su ✕), y los filtros vacíos viven detrás de un solo «+ Filtro».
   Los popovers son <details>/<summary> nativos: teclado y foco gratis, y
   cada opción es un <a href> con url_for, así que FILTRAN SIN JAVASCRIPT.
   ───────────────────────────────────────────────────────────────────────── */
.barra-filtros {
  position: sticky; top: var(--wb-h); z-index: 25;
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--filtros-h);
  width: 100%; max-width: var(--ancho-max); margin-inline: 0 auto;
  padding: var(--s3) var(--contenido-x);
  background: var(--lienzo);
  border-bottom: 0;
}
.buscar { position: relative; flex: 0 1 300px; min-width: 150px; display: flex; align-items: center; }
.buscar i { position: absolute; left: var(--s5); font-size: 13px; color: var(--ink-3); pointer-events: none; z-index: 1; }
.buscar input {
  /* !important: el reset global (0,5,1) pisaba el padding y la lupa quedaba
     encima de la primera letra. */
  width: 100%; padding-left: 32px !important;
  border-radius: var(--r-full); border-color: var(--linea-2);
  box-shadow: var(--sombra-1);
}

.filtro { position: relative; flex: none; }
.filtro > summary {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: var(--ctl-h); padding: 0 var(--s5);
  font-size: var(--t12); font-weight: 500; color: var(--ink-2);
  background: var(--papel);
  border: 1px solid var(--linea-2); border-radius: var(--r-full);
  box-shadow: var(--sombra-1);
  cursor: pointer; list-style: none; white-space: nowrap;
}
.filtro > summary::-webkit-details-marker { display: none; }
.filtro > summary:hover { background: var(--hundido); color: var(--ink); }
/* Filtro PUESTO: sólido, con tinte de marca, con su ✕ */
.filtro.puesto > summary {
  border-style: solid; border-color: var(--marca);
  background: var(--marca-tinte); color: var(--marca); font-weight: 500;
}
.filtro.puesto > summary b { font-weight: 600; }
.filtro .x {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; margin-right: -4px;
  border-radius: var(--r-full); font-size: 11px; color: var(--marca);
}
.filtro .x:hover { background: #fff; }

.pop {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 70;
  min-width: 216px; max-width: 320px; max-height: 60vh; overflow: auto;
  padding: var(--s2);
  background: var(--flotante); border: 1px solid var(--linea-2);
  border-radius: var(--r-caja); box-shadow: var(--sombra-pop);
}
.pop-der { left: auto; right: 0; }
.pop-titulo {
  padding: var(--s3) var(--s4) var(--s2);
  font-size: var(--t11); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.pop .opcion {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 26px; padding: var(--s2) var(--s4);
  font-size: var(--t13); color: var(--ink-2);
  border-radius: var(--r-ctl); text-decoration: none;
}
/* Una opción puede ser <a> o <button>: las dos se ven y se tocan igual. */
.pop button.opcion {
  width: 100%; text-align: left; font-family: inherit;
  background: transparent; border: 0; cursor: pointer;
}
.pop .opcion:hover { background: var(--hundido-2); color: var(--ink); text-decoration: none; }
.pop .opcion.marcada { background: var(--marca-tinte); color: var(--marca); font-weight: 600; }
.pop .opcion.peligro { color: var(--riesgo); }
.pop input, .pop select { width: 100%; }
.pop hr { margin: var(--s2) var(--s3); }

/* ─────────────────────────────────────────────────────────────────────────
   7 · TABLAS — la tabla ES una superficie: marco blanco con radio y sombra
   sutil sobre el lienzo. Su thead se pega DENTRO de su propio scroll.
   ───────────────────────────────────────────────────────────────────────── */
/* La tabla es su propio contenedor de scroll y el pie con la paginación se
   queda a la vista. Es `auto`, NUNCA `hidden`: si la cuenta de --thead-top
   falla, aparece una barra de scroll — nunca contenido inalcanzable, que es
   el modo de falla caro. En teléfono el tope se suelta para que el navegador
   pueda esconder su propia barra. */
.tabla-wrap {
  width: auto;
  margin: 0 var(--contenido-x);
  overflow: auto;
  max-height: calc(100dvh - var(--thead-top) - var(--pie-h) - var(--s8));
  overscroll-behavior: contain;
  /* Sombras de scroll: cuando la tabla sigue hacia la derecha, un degradado
     lo dice — sin él, un pill cortado a la mitad parece bug de render. */
  background:
    linear-gradient(to right, var(--papel) 35%, rgba(255, 255, 255, 0)) left / 48px 100% no-repeat local,
    linear-gradient(to left, var(--papel) 35%, rgba(255, 255, 255, 0)) right / 48px 100% no-repeat local,
    linear-gradient(to right, rgba(11, 15, 26, .10), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(11, 15, 26, .10), transparent) right / 14px 100% no-repeat scroll,
    var(--papel);
  border: 1px solid var(--linea);
  border-radius: var(--r-caja);
  box-shadow: var(--sombra-1);
}
/* Si la pantalla trae paginación pegada a la tabla, el pie se funde con la
   superficie: esquinas de abajo rectas en la tabla, redondas en el pie. */
.tabla-wrap:has(+ .paginacion), .tabla-wrap:has(+ .pie-tabla) {
  border-radius: var(--r-caja) var(--r-caja) 0 0; border-bottom: 0;
}
/* Las tablas van a 14 px por decisión, no por herencia: densidad de lectura
   sin caer en letra de hoja de cálculo. */
table.tabla, .table-crm { width: 100%; border-collapse: collapse; font-size: 14px; margin: 0; }

table.tabla thead th, .table-crm thead th {
  /* top:0 porque el ancla es .tabla-wrap, no la ventana: un sticky dentro de
     un contenedor con overflow se pega a ESE contenedor. */
  position: sticky; top: 0; z-index: 20;
  height: var(--thead-h); padding: 0 var(--s6);
  font-size: var(--t11); font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; text-align: left; white-space: nowrap;
  color: var(--ink-3); background: var(--hundido);
  border-bottom: 1px solid var(--linea-2);
}
table.tabla thead th a, .table-crm thead th a { color: inherit; text-decoration: none; }
table.tabla tbody td, .table-crm tbody td {
  height: var(--fila); padding: 0 var(--s6);
  border-bottom: 1px solid var(--linea);
  color: var(--ink-2); vertical-align: middle;
  /* line-height 1.15 y nowrap: una etiqueta que se parte en dos renglones
     estira la fila entera y rompe el ritmo de 34 px. Medido: con dos
     etiquetas envolviendo, la fila pasaba de 34 a 41 px. */
  line-height: 1.15; white-space: nowrap;
}
table.tabla tbody td.envuelve, .table-crm tbody td.envuelve { white-space: normal; }
table.tabla tbody tr:hover, .table-crm tbody tr:hover { background: var(--hundido-2); }
table.tabla tbody tr.marcada { background: var(--marca-tinte); }
.tabla-fija { table-layout: fixed; }
td.num, th.num, .num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }
/* Sin esto, `table.tabla thead th` (0,1,3) le gana a `th.num` (0,1,1) y el
   encabezado de toda columna numérica queda a la izquierda de su celda. */
table.tabla thead th.num, .table-crm thead th.num { text-align: right; }
.nombre-fila { font-weight: 600; color: var(--ink); }
.nombre-fila a { color: inherit; text-decoration: none; }
.celda-mono { font-family: var(--mono); font-size: var(--t12); color: var(--ink-3); }
/* El teléfono EN LA LISTA es texto, no pastilla. Diecinueve cajas verdes en
   una pantalla son diecinueve manchas de color que no dicen nada: el chip
   relleno vive en el expediente, donde hay uno solo y sí destaca. */
.tel-lista { font-family: var(--mono); font-size: var(--t12); color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.tel-lista i { color: var(--ok); margin-right: var(--s3); }
.tel-lista:hover { color: var(--marca); text-decoration: none; }
.tel-lista.quemado { color: var(--ink-3); text-decoration: line-through; }
.tel-lista.quemado i { color: var(--ink-4); }
.acciones-fila { display: flex; gap: var(--s2); justify-content: flex-end; }
/* Sin :hover no hay descubrimiento en pantalla táctil: las acciones se
   atenúan, no se esconden. */
.accion-hover { opacity: .55; transition: opacity var(--d1) var(--curva); }
tr:hover .accion-hover, .accion-hover:focus-within { opacity: 1; }

/* Barra de selección: FLOTA, no empuja la tabla. Cuando no hay selección
   cuesta cero píxeles. */
.barra-sel {
  position: fixed; left: 50%; bottom: var(--s7); transform: translateX(-50%);
  z-index: 55;
  display: flex; align-items: center; gap: var(--s4);
  max-width: calc(100vw - var(--s8));
  padding: var(--s3) var(--s5);
  background: var(--ink); color: #fff;
  border-radius: var(--r-caja); box-shadow: var(--sombra-modal);
  font-size: var(--t13);
}
.barra-sel select { height: 26px; }
.barra-sel .btn-fantasma { color: #fff; }
.barra-sel .btn-fantasma:hover { background: rgba(255, 255, 255, .14); color: #fff; }

/* ─────────────────────────────────────────────────────────────────────────
   8 · BLOQUES Y CAMPOS
   El expediente deja de ser formulario y vuelve a ser expediente: el rótulo
   AL LADO cuesta 32 px por dato; encima cuesta 64. En 34 campos son 1 088 px
   de scroll contra 544.
   ───────────────────────────────────────────────────────────────────────── */
.bloque {
  border: 1px solid var(--linea); border-radius: var(--r-caja);
  background: var(--papel); margin-bottom: var(--s6);
  box-shadow: var(--sombra-1);
}
.bloque > .cab {
  display: flex; align-items: center; gap: var(--s4);
  min-height: 44px; padding: 0 var(--s6);
  font-size: var(--t14); font-weight: 600; color: var(--ink);
  letter-spacing: -.01em;
  background: var(--papel); border-bottom: 1px solid var(--linea);
  border-radius: var(--r-caja) var(--r-caja) 0 0;
}
.bloque > .cab i { color: var(--ink-4); font-size: 14px; }
.bloque > .cab .der { margin-left: auto; font-weight: 400; font-size: var(--t12); color: var(--ink-3); }
.bloque > .cuerpo { padding: var(--s6); }
.bloque > .cuerpo.sin-relleno { padding: 0; }
.bloque details > summary { cursor: pointer; }

/* Rejilla de expediente: rótulo a la izquierda, campo a la derecha. */
.campos { display: grid; grid-template-columns: 152px minmax(0, 1fr); align-items: center; gap: var(--s3) var(--s5); }
.campos > label { font-size: var(--t12); color: var(--ink-3); margin: 0; text-align: left; }
.campos > input, .campos > select, .campos > textarea { width: 100%; }
.campos > .ancho { grid-column: 2 / -1; }
.campos-2 { grid-template-columns: 152px minmax(0, 1fr) 152px minmax(0, 1fr); }
.campo-nota { grid-column: 2 / -1; font-size: var(--t12); color: var(--ink-3); }

/* Renglón de estado de cuenta: rótulo a la izquierda, cifra a la derecha. */
.libro { display: grid; }
.libro .renglon {
  display: flex; align-items: baseline; gap: var(--s4);
  min-height: 26px; padding: var(--s2) 0;
  border-bottom: 1px solid var(--linea);
}
.libro .renglon:last-child { border-bottom: 0; }
.libro .rot { flex: 1 1 auto; font-size: var(--t12); color: var(--ink-3); }
.libro .val { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.libro .renglon.total { border-top: 2px solid var(--linea-2); border-bottom: 0; margin-top: var(--s2); padding-top: var(--s4); }

/* ─────────────────────────────────────────────────────────────────────────
   9 · ETIQUETAS — UN componente, seis tonos, cuatro densidades
   Sustituye a .pastilla+.cal-*, .badge-estado+.est-*, .foco+.foco-*,
   .nivel-* y .regimen: 24 clases de color reemplazadas por 6 tonos.
   El tono no dice EN QUÉ PASO va, dice CÓMO va.
   ───────────────────────────────────────────────────────────────────────── */
[data-tono="neutro"] { --tono: var(--neutro); --tono-t: var(--neutro-t); }
[data-tono="info"]   { --tono: var(--info);   --tono-t: var(--info-t); }
[data-tono="activo"] { --tono: var(--activo); --tono-t: var(--activo-t); }
[data-tono="marca"]  { --tono: var(--marca);  --tono-t: var(--marca-tinte); }
[data-tono="ok"]     { --tono: var(--ok);     --tono-t: var(--ok-t); }
[data-tono="alerta"] { --tono: var(--alerta); --tono-t: var(--alerta-t); }
[data-tono="riesgo"] { --tono: var(--riesgo); --tono-t: var(--riesgo-t); }
/* «vacío» = no lo hemos medido. Punto HUECO, que no es lo mismo que
   «lo medimos y salió gris». En este negocio esa distinción es dinero. */
[data-tono="vacio"]  { --tono: var(--ink-4);  --tono-t: transparent; }

/* El 90 % de los casos: punto + texto, sin caja. 18 px. */
.tag {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 18px; font-size: var(--t12); font-weight: 500;
  color: var(--ink-2); white-space: nowrap;
}
.tag::before {
  content: ""; flex: none; width: 6px; height: 6px;
  border-radius: var(--r-full); background: var(--tono);
}
[data-tono="vacio"].tag::before { background: transparent; border: 1.5px solid var(--ink-4); }

/* Sólido: SOLO el estado canónico del expediente y el chip de filtro puesto.
   Una sola etiqueta rellena por pantalla; si hay dos, ya nada destaca. */
.tag-solido {
  display: inline-flex; align-items: center;
  height: 20px; padding: 0 var(--s4);
  font-size: var(--t12); font-weight: 600; white-space: nowrap;
  background: var(--tono-t); color: var(--tono); border-radius: var(--r-full);
}
/* Con borde: lo que se puede pulsar (los pasos de la oferta). */
.tag-borde {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 var(--s4);
  font-size: var(--t12); font-weight: 500; white-space: nowrap;
  color: var(--tono); background: var(--papel);
  border: 1px solid currentColor; border-radius: var(--r-full); cursor: pointer;
}
.tag-borde.actual { background: var(--tono-t); font-weight: 600; }
/* Dato, no juicio: el régimen NUNCA se colorea. Pintar «Ley 97» de rojo le
   dice al cliente, que está viendo la pantalla, «usted es un caso malo».
   Ley 97 es un hecho de su historia laboral, no un veredicto. */
.tag-dato {
  display: inline-flex; align-items: center;
  height: 18px; padding: 0 var(--s3);
  font-family: var(--mono); font-size: var(--t11);
  color: var(--ink-2); background: var(--hundido-2); border-radius: var(--r-ctl);
}
/* Contador dentro de una pestaña o de una opción. */
.tag-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 16px; padding: 0 var(--s3);
  font-size: var(--t11); font-weight: 600;
  color: var(--ink-2); background: var(--hundido-2); border-radius: var(--r-full);
}

/* Semáforo que se lee de reojo en una tabla de 19 filas. */
.punto {
  display: inline-block; width: 8px; height: 8px;
  border-radius: var(--r-full); background: var(--tono);
}
[data-tono="vacio"].punto { background: transparent; border: 1.5px solid var(--ink-4); }

/* ─────────────────────────────────────────────────────────────────────────
   10 · CIFRAS — el producto es el número
   Tabular, cero rasgado, a la derecha. Los centavos y la unidad, atrás.
   El «menos» es U+2212, nunca un guion y nunca paréntesis: en México los
   paréntesis se leen como nota al pie. Nunca se abrevia en el expediente ni
   en la calculadora: al cliente se le enseña $47,900.00, no $47.9 K.
   ───────────────────────────────────────────────────────────────────────── */
.cifra {
  font-variant-numeric: tabular-nums slashed-zero;
  font-weight: 600; color: var(--ink); white-space: nowrap;
}
.cifra .dec { color: var(--ink-3); font-weight: 400; }
.cifra .uni { color: var(--ink-3); font-weight: 400; font-size: .78em; margin-left: 2px; }
.cifra-xl { font-size: var(--t26); letter-spacing: -.02em; line-height: 1.05; }
.cifra-neg { color: var(--riesgo); }
/* Sin dato: em dash, nunca un cero. Un 0 en semanas es una mentira. */
.vacio { color: var(--ink-3); }

/* La tira de cifras se vuelve TARJETAS DE MÉTRICA: número protagonista,
   rótulo discreto, cada una su propia superficie. */
.cifras {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  padding: 0 var(--contenido-x) var(--s6);
  font-size: var(--t12); color: var(--ink-3);
}
.cifras > * {
  display: inline-flex; flex-direction: column-reverse; gap: 2px;
  flex: 1 1 150px; max-width: 260px;
  padding: var(--s5) var(--s6);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-caja); box-shadow: var(--sombra-1);
  white-space: nowrap;
}
.cifras b { font-size: var(--t24); font-weight: 650; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.cifras a { color: var(--ink-3); }
.cifras a:hover { text-decoration: none; border-color: var(--marca); color: var(--marca); }
.cifras a:hover b { color: var(--marca); }

/* ─────────────────────────────────────────────────────────────────────────
   11 · PESTAÑAS Y VISTAS GUARDADAS
   Sustituyen a los chips 2×2 de 162 px de Mi día y al preset «Calificados».
   ───────────────────────────────────────────────────────────────────────── */
.vistas {
  /* Pegajosa bajo la aduana de filtros: las vistas guardadas no se pierden al
     bajar. .sola es para las pantallas que no tienen barra de filtros. */
  position: sticky; top: calc(var(--wb-h) + var(--filtros-h)); z-index: 22;
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--vistas-h);
  width: 100%; max-width: var(--ancho-max); margin-inline: 0 auto;
  padding: var(--s2) var(--contenido-x);
  background: var(--lienzo);
  overflow-x: auto; scrollbar-width: none;
}
.vistas.sola { top: var(--wb-h); }
.vistas::-webkit-scrollbar { display: none; }
/* Las vistas son PÍLDORAS, no subrayados: se ven como lo que son —
   segmentos de la misma cartera. */
.vista {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 30px; padding: 0 var(--s5);
  font-size: var(--t12); font-weight: 500; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  border: 1px solid transparent; border-radius: var(--r-full);
}
.vista:hover { color: var(--ink); background: var(--hundido-2); text-decoration: none; }
.vista.activa {
  color: var(--marca); font-weight: 600;
  background: var(--papel); border-color: var(--linea-2);
  box-shadow: var(--sombra-1);
}
.vista.activa .tag-num { background: var(--marca-tinte); color: var(--marca); }

/* Chip removible (filtro aplicado fuera de la barra). */
.chip {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 22px; padding: 0 var(--s2) 0 var(--s4);
  font-size: var(--t12); color: var(--marca);
  background: var(--marca-tinte); border: 1px solid var(--marca-tinte);
  border-radius: var(--r-full); text-decoration: none;
}
.chip .x { width: 18px; height: 18px; }

/* ─────────────────────────────────────────────────────────────────────────
   12 · EXPEDIENTE — el hero navy de 280 px se sustituye por 72 px
   44 de identidad + 28 de vitales. Cero botones «Guardar»: el autoguardado
   ya existía; lo que faltaba era decir que funcionó.
   ───────────────────────────────────────────────────────────────────────── */
.exp-id { display: flex; align-items: baseline; gap: var(--s4); min-width: 0; }
.exp-id h1 { font-size: var(--t20); font-weight: 600; letter-spacing: -.022em; }
.exp-id .clave { font-family: var(--mono); font-size: var(--t12); color: var(--ink-3); }

.vitales {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s6);
  min-height: 28px; padding: var(--s2) var(--contenido-x);
  background: var(--hundido); border-bottom: 1px solid var(--linea-2);
  font-size: var(--t12); color: var(--ink-3);
}
.vitales .v { display: inline-flex; align-items: center; gap: var(--s3); white-space: nowrap; }
.vitales .v b { font-weight: 600; color: var(--ink); }
.vitales .v.peligro, .vitales .v.peligro b { color: var(--riesgo); }

/* El stepper de 8 globos numerados (~60 px) se vuelve un medidor de 18 px. */
.medidor { display: inline-flex; align-items: center; gap: var(--s4); }
.medidor .barras { display: inline-flex; gap: 2px; }
.medidor .barras i {
  display: block; width: 16px; height: 5px;
  border-radius: 2px; background: var(--linea-2);
}
.medidor .barras i.hecho { background: var(--marca); }
.medidor .barras i.actual { background: var(--marca); box-shadow: 0 0 0 2px var(--marca-tinte); }

/* El acuse que sustituye a los CINCO botones «Guardar». */
.guardado { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--t12); color: var(--ink-3); }
.guardado::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--ok); }
.guardado[data-estado="guardando"]::before { background: var(--alerta); }
.guardado[data-estado="pendiente"] { color: var(--riesgo); }
.guardado[data-estado="pendiente"]::before { background: var(--riesgo); }
/* Sin conexión: el asesor está en la calle y la señal se cae. Autoguardado
   sin acuse de offline es la receta para perder la captura de una visita. */
.guardado[data-estado="offline"] { color: var(--alerta); font-weight: 600; }
.guardado[data-estado="offline"]::before { background: var(--alerta); }

.chip-tel {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 22px; padding: 0 var(--s4);
  font-family: var(--mono); font-size: var(--t12); font-weight: 500;
  color: var(--ok); background: var(--ok-t);
  border-radius: var(--r-full); text-decoration: none;
}
.chip-tel:hover { text-decoration: none; filter: brightness(.97); }
.chip-tel.quemado, .tel-quemado { color: var(--ink-3); background: var(--hundido-2); text-decoration: line-through; }

/* ─────────────────────────────────────────────────────────────────────────
   13 · MI DÍA — grupos de colonia y paradas numeradas
   La decisión pasa de «leer doce y elegir» a «la que sigue es la 1».
   ───────────────────────────────────────────────────────────────────────── */
.grupo-ruta { border-bottom: 1px solid var(--linea); }
.grupo-cabecera {
  position: sticky; top: calc(var(--wb-h) + var(--vistas-h)); z-index: 15;
  display: flex; align-items: center; gap: var(--s3);
  height: var(--thead-h); padding: 0 var(--contenido-x);
  font-size: var(--t11); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  background: var(--hundido); border-bottom: 1px solid var(--linea);
}
.grupo-cabecera i { color: var(--ink-4); }
.grupo-poblacion { font-weight: 400; text-transform: none; letter-spacing: 0; }
.grupo-conteo { margin-left: auto; }
.ruta-colonia { font-size: var(--t12); font-weight: 400; text-transform: none; letter-spacing: 0; }

.visita {
  display: flex; align-items: flex-start; gap: var(--s5);
  padding: var(--s4) var(--contenido-x);
  border-bottom: 1px solid var(--linea);
}
.visita:hover { background: var(--hundido-2); }
.visita:last-child { border-bottom: 0; }
.parada {
  flex: none; display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 2px;
  font-size: var(--t12); font-weight: 600;
  color: var(--marca); background: var(--marca-tinte);
  border-radius: var(--r-full);
}
.visita-cuerpo { flex: 1 1 auto; min-width: 0; }
.visita-nombre { font-size: var(--t14); font-weight: 600; color: var(--ink); text-decoration: none; }
.visita-nombre:hover { color: var(--marca); text-decoration: none; }
.visita-datos {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5);
  margin-top: 2px; font-size: var(--t12); color: var(--ink-3);
}
.visita-datos b { color: var(--ink); font-weight: 600; }
.visita-dom { margin-top: 2px; font-size: var(--t12); color: var(--ink-3); }
.visita-acciones { display: flex; align-items: center; gap: var(--s3); flex: none; }

/* ─────────────────────────────────────────────────────────────────────────
   14 · ESTADOS VACÍOS Y PAGINACIÓN
   ───────────────────────────────────────────────────────────────────────── */
.sin-datos, .vacio-caja {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  padding: var(--s10) var(--s6); text-align: center;
  color: var(--ink-3); font-size: var(--t13);
}
.sin-datos i, .vacio-caja i {
  display: grid; place-items: center;
  width: 48px; height: 48px; margin-bottom: var(--s3);
  font-size: 22px; color: var(--ink-3);
  background: var(--hundido); border-radius: var(--r-full);
}
.vacio-caja .titulo { font-size: var(--t16); font-weight: 600; color: var(--ink); }
.vacio-caja .btn { margin-top: var(--s4); }

.paginacion, .pie-tabla {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5);
  /* Alto FIJO, no mínimo: es el mismo número con el que .tabla-wrap calcula
     su tope. Si el pie crece, la cuenta se rompe y la paginación se sale de
     la pantalla — que es exactamente lo que pasó al medirlo. */
  height: var(--pie-h); padding: 0 var(--s6);
  margin: 0 var(--contenido-x) var(--s6);
  background: var(--papel);
  border: 1px solid var(--linea); border-top: 1px solid var(--linea);
  border-radius: 0 0 var(--r-caja) var(--r-caja);
  box-shadow: var(--sombra-1);
  font-size: var(--t12); color: var(--ink-3);
}
.paginacion .pagination { margin: 0; gap: 2px; }
.paginacion .page-link {
  min-width: 26px; height: 26px; padding: 0 var(--s3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--t12); color: var(--ink-2);
  background: var(--papel); border: 1px solid var(--linea-2); border-radius: var(--r-ctl);
}
.paginacion .page-link:hover { background: var(--hundido-2); color: var(--ink); }
.paginacion .page-item.active .page-link {
  background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600;
}
.paginacion .page-item.disabled .page-link { color: var(--ink-4); background: var(--hundido); }

/* ─────────────────────────────────────────────────────────────────────────
   15 · MODALES Y FICHA DE LLAMADA
   Los ÚNICOS elementos con sombra, junto con los popovers.
   ───────────────────────────────────────────────────────────────────────── */
.ficha-fondo {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6);
  background: rgba(11, 15, 26, .42);
}
.ficha-fondo[hidden] { display: none; }
/* Con la ficha abierta el fondo no scrollea (llamadas.js pone la clase). */
body.con-ficha { overflow: hidden; }
.ficha-caja {
  width: min(520px, 100%); max-height: 92vh; overflow: auto;
  background: var(--flotante); border-radius: var(--r-caja);
  box-shadow: var(--sombra-modal);
}
.ficha-cabecera {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s5) var(--s6);
  background: var(--papel); border-bottom: 1px solid var(--linea-2);
}
.ficha-quien { font-size: var(--t16); font-weight: 600; color: var(--ink); }
.ficha-numero { font-family: var(--mono); font-size: var(--t12); color: var(--ink-3); }
.ficha-cronometro {
  margin-left: auto; font-family: var(--mono); font-size: var(--t14);
  font-weight: 600; color: var(--ink-2);
}
.ficha-cerrar {
  width: var(--tap); height: var(--tap); margin: calc(var(--s4) * -1) calc(var(--s4) * -1) calc(var(--s4) * -1) 0;
  display: grid; place-items: center;
  font-size: 20px; line-height: 1; color: var(--ink-3);
  background: transparent; border: 0; border-radius: var(--r-ctl); cursor: pointer;
}
.ficha-cerrar:hover { background: var(--hundido-2); color: var(--ink); }
.ficha-cuerpo { padding: var(--s5) var(--s6); }
.ficha-instruccion { font-size: var(--t13); font-weight: 600; color: var(--ink); margin-bottom: var(--s4); }
.ficha-grupo { margin-bottom: var(--s5); }
.ficha-grupo-titulo {
  display: flex; align-items: center; gap: var(--s3);
  margin-bottom: var(--s3);
  font-size: var(--t11); font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tono);
}
.ficha-grupo-titulo::before {
  content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: var(--tono);
}
.ficha-opciones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s3); }
/* La tipificación se elige 200 veces al día: la tecla va IMPRESA en la opción. */
.opcion-tip {
  display: flex; align-items: center; gap: var(--s3);
  min-height: var(--tap); padding: 0 var(--s4);
  font-family: inherit; font-size: var(--t13); text-align: left;
  color: var(--ink-2); background: var(--papel);
  border: 1px solid var(--linea-2); border-radius: var(--r-ctl); cursor: pointer;
}
.opcion-tip:hover { border-color: var(--tono); background: var(--tono-t); color: var(--ink); }
.opcion-tip.elegida { border-color: var(--tono); background: var(--tono-t); color: var(--tono); font-weight: 600; }
.opcion-tip .tecla {
  flex: none; min-width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  font-family: var(--mono); font-size: var(--t11);
  color: var(--ink-3); background: var(--hundido-2); border-radius: var(--r-ctl);
}
.ficha-aviso {
  padding: var(--s4); margin: var(--s4) 0;
  font-size: var(--t12); color: var(--alerta);
  background: var(--alerta-t); border-radius: var(--r-ctl);
}
.ficha-obligatoria {
  font-size: var(--t11); font-weight: 600; color: var(--riesgo);
  background: var(--riesgo-t); border-radius: var(--r-full); padding: 0 var(--s3);
}
.ficha-rapidos { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.rapido {
  height: 26px; padding: 0 var(--s4);
  font-family: inherit; font-size: var(--t12); color: var(--ink-2);
  background: var(--papel); border: 1px solid var(--linea-2);
  border-radius: var(--r-full); cursor: pointer;
}
.rapido:hover { border-color: var(--marca); color: var(--marca); background: var(--marca-tinte); }
.ficha-pie {
  position: sticky; bottom: 0;
  display: flex; justify-content: flex-end; gap: var(--s4);
  padding: var(--s4) var(--s6);
  background: var(--papel); border-top: 1px solid var(--linea-2);
}

/* ─────────────────────────────────────────────────────────────────────────
   16 · LÍNEA DE TIEMPO, LLAMADAS Y BITÁCORA
   ───────────────────────────────────────────────────────────────────────── */
.llamada-fila { display: flex; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--linea); }
.llamada-fila:last-child { border-bottom: 0; }
.llamada-marca { flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: var(--r-full); background: var(--tono); }
.llamada-cuerpo { min-width: 0; }
.llamada-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-size: var(--t13); font-weight: 600; color: var(--ink); }
.llamada-comentario { font-size: var(--t13); color: var(--ink-2); margin-top: 2px; }
.llamada-meta { font-size: var(--t11); color: var(--ink-3); margin-top: 2px; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.timeline li:last-child { border-bottom: 0; }
.timeline .t-meta { font-size: var(--t11); color: var(--ink-3); }
.timeline .t-texto { font-size: var(--t13); color: var(--ink-2); }
.list-group-item { border-color: var(--linea); padding: var(--s4) var(--s5); font-size: var(--t13); }
.list-group-item:hover { background: var(--hundido-2); }

/* ─────────────────────────────────────────────────────────────────────────
   17 · AGENDA
   ───────────────────────────────────────────────────────────────────────── */
.agenda-barra {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--contenido-x);
  border-bottom: 1px solid var(--linea);
}
.agenda-titulo { font-size: var(--t14); font-weight: 600; color: var(--ink); }
.agenda-nav { display: flex; gap: var(--s2); margin-left: auto; }
.agenda-rejilla { display: grid; grid-template-columns: 52px repeat(auto-fit, minmax(0, 1fr)); border-top: 1px solid var(--linea); }
.col-horas { font-size: var(--t11); color: var(--ink-3); text-align: right; padding-right: var(--s3); }
.col-dia { border-left: 1px solid var(--linea); min-width: 0; }
.col-dia.es-hoy { background: var(--marca-tinte); }
.franja { min-height: 26px; border-bottom: 1px solid var(--linea); }
.franja.vacia { min-height: 18px; }
.cita {
  display: flex; gap: var(--s3); padding: var(--s2) var(--s3); margin: 2px;
  font-size: var(--t12); border-left: 3px solid var(--tono);
  background: var(--tono-t); border-radius: var(--r-ctl);
}
.cita.vencida { --tono: var(--riesgo); --tono-t: var(--riesgo-t); }
.cita-hora { font-family: var(--mono); font-size: var(--t11); color: var(--ink-3); }
.cita-quien { font-weight: 600; color: var(--ink); text-decoration: none; }
.cita-nota { color: var(--ink-3); }
.cita-acciones { display: flex; gap: var(--s2); margin-left: auto; }
.cita-alerta { color: var(--riesgo); }
.btn-cita { height: 22px; padding: 0 var(--s3); font-size: var(--t11); border-radius: var(--r-ctl); border: 1px solid var(--linea-2); background: var(--papel); color: var(--ink-2); cursor: pointer; }
.btn-cita:hover { border-color: var(--marca); color: var(--marca); }

/* ─────────────────────────────────────────────────────────────────────────
   18 · MAPA
   ───────────────────────────────────────────────────────────────────────── */
.lienzo-mapa, .mini-mapa {
  height: calc(100vh - var(--wb-h) - var(--filtros-h));
  min-height: 320px; width: 100%;
  border-top: 1px solid var(--linea-2); background: var(--hundido);
}
.mini-mapa { height: 220px; border: 1px solid var(--linea-2); border-radius: var(--r-caja); }
.leaflet-container { font-family: var(--fuente); font-size: var(--t12); }
.leaflet-popup-content { margin: var(--s4) var(--s5); font-size: var(--t12); color: var(--ink-2); }
.mapa-resumen {
  display: flex; flex-wrap: wrap; gap: var(--s5);
  padding: var(--s3) var(--contenido-x);
  font-size: var(--t12); color: var(--ink-3);
  border-bottom: 1px solid var(--linea);
}

/* ─────────────────────────────────────────────────────────────────────────
   19 · CALCULADORA
   La barra vive DENTRO del renglón, como fondo: sigue comunicando la
   proporción y devuelve una columna entera al ancho útil.
   ───────────────────────────────────────────────────────────────────────── */
.calc-marco { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: var(--s6); padding: var(--s5) var(--contenido-x); }
.calc-entrada { position: sticky; top: calc(var(--wb-h) + var(--s5)); align-self: start; }
.calc-modos { display: flex; gap: var(--s2); margin-bottom: var(--s5); }
.calc-modo {
  flex: 1 1 0; display: flex; align-items: center; justify-content: center;
  min-height: 30px; padding: 0 var(--s4);
  font-size: var(--t12); color: var(--ink-2);
  background: var(--papel); border: 1px solid var(--linea-2);
  border-radius: var(--r-ctl); cursor: pointer; text-align: center;
}
.calc-modo input { position: absolute; opacity: 0; pointer-events: none; }
.calc-modo:hover { border-color: var(--ink-3); }
.calc-modo.activo { background: var(--marca-tinte); border-color: var(--marca); color: var(--marca); font-weight: 600; }
.calc-modo:focus-within { outline: 2px solid var(--foco-anillo); outline-offset: 1px; }
.calc-campo { display: flex; align-items: center; gap: var(--s3); border: 1px solid var(--linea-control); border-radius: var(--r-ctl); padding: 0 var(--s4); background: var(--papel); }
.calc-campo:focus-within { border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-tinte); }
.calc-signo { font-size: var(--t14); color: var(--ink-3); }
.calc-input { flex: 1 1 auto; height: 34px; border: 0; padding: 0; font-size: var(--t20); font-weight: 600; }
.calc-input:focus { box-shadow: none; }
.calc-input::placeholder { color: var(--ink-4); font-weight: 400; }
.calc-etiqueta { font-size: var(--t12); color: var(--ink-3); margin-bottom: var(--s2); }
.calc-leyenda { font-size: var(--t13); color: var(--ink-3); margin-top: var(--s3); }
.calc-vacio .sin-datos { padding: var(--s9) 0; }

/* ─────────────────────────────────────────────────────────────────────────
   20 · AVISOS, TOASTS, BANNER
   ───────────────────────────────────────────────────────────────────────── */
#tops { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 95; display: flex; flex-direction: column; gap: var(--s3); }
.toast-crm {
  display: flex; align-items: center; gap: var(--s4);
  max-width: 360px; padding: var(--s4) var(--s5);
  font-size: var(--t13); color: var(--ink);
  background: var(--flotante); border: 1px solid var(--linea-2);
  border-left: 3px solid var(--tono);
  border-radius: var(--r-caja); box-shadow: var(--sombra-pop);
}
.toast-crm.ok    { --tono: var(--ok); }
.toast-crm.warn  { --tono: var(--alerta); }
.toast-crm.error { --tono: var(--riesgo); }
.toast-crm.info  { --tono: var(--info); }
.banner-offline {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--contenido-x);
  font-size: var(--t13); font-weight: 500;
  color: var(--alerta); background: var(--alerta-t);
  border-bottom: 1px solid var(--linea-2);
}
.alert { border-radius: var(--r-caja); font-size: var(--t13); padding: var(--s4) var(--s5); border: 1px solid var(--linea-2); }
.alert-success { background: var(--ok-t); color: var(--ok); border-color: var(--ok); }
.alert-danger  { background: var(--riesgo-t); color: var(--riesgo); border-color: var(--riesgo); }
.texto-muted-sm { font-size: var(--t12); color: var(--ink-3); }
.atajo-teclado {
  font-family: var(--mono); font-size: var(--t11); padding: 0 var(--s2);
  border: 1px solid var(--linea-2); border-radius: var(--r-ctl);
  background: var(--hundido); color: var(--ink-2);
}
.titulo-bloque { font-size: var(--t14); font-weight: 600; color: var(--ink); margin-bottom: var(--s4); }
.barra-pct { height: 6px; border-radius: var(--r-full); background: var(--hundido-2); overflow: hidden; }
.barra-pct span { display: block; height: 100%; width: var(--pct); background: var(--marca); }

/* Marca de guardado por fila (captura). */
.marca-guardado { display: inline-block; width: 14px; font-size: var(--t12); color: var(--ok); text-align: center; }
.marca-guardado.guardando { color: var(--ink-3); }
.marca-guardado.ok { color: var(--ok); }
.marca-guardado.error { color: var(--riesgo); font-weight: 700; }
.valor-calculado { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }

/* ─────────────────────────────────────────────────────────────────────────
   21 · LOGIN — papel, la marca, dos campos y un botón
   ───────────────────────────────────────────────────────────────────────── */
/* ── ACCESO — dos mitades: la marca y el formulario ──
   La marca vive en una superficie de degradado propio (el del logo), con el
   isotipo grande; el formulario respira en blanco a la derecha. En teléfono
   la marca se encoge a una franja y la tarjeta manda. */
.acceso { min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; }
.acceso-marca {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  gap: var(--s8); padding: var(--s10) clamp(32px, 5vw, 72px);
  color: #fff;
  background: linear-gradient(150deg, #0B4DA2 0%, #12639A 45%, #2E8B7A 75%, #4E9E52 100%);
}
/* Textura suave: dos halos del verde de marca, sin imágenes que cargar. */
.acceso-marca::before, .acceso-marca::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none;
}
.acceso-marca::before {
  width: 620px; height: 620px; right: -220px; top: -180px;
  background: radial-gradient(circle, rgba(140, 198, 63, .30), transparent 62%);
}
.acceso-marca::after {
  width: 520px; height: 520px; left: -200px; bottom: -220px;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), transparent 60%);
}
.acceso-marca-cont { position: relative; z-index: 1; max-width: 460px; }
.acceso-logo { width: 92px; height: 92px; display: block; filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .22)); }
.acceso-nombre { display: flex; flex-direction: column; line-height: 1; margin-top: var(--s6); }
.acceso-n1 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 600; letter-spacing: -.02em; }
.acceso-n2 { font-size: clamp(32px, 3.6vw, 46px); font-weight: 800; letter-spacing: .01em; }
.acceso-lema { margin: var(--s4) 0 0; font-size: var(--t14); color: rgba(255, 255, 255, .88); }
.acceso-lista { list-style: none; margin: var(--s9) 0 0; padding: 0; display: grid; gap: var(--s5); }
.acceso-lista li {
  display: flex; gap: var(--s5); align-items: flex-start;
  font-size: var(--t13); color: rgba(255, 255, 255, .92);
}
.acceso-lista i { flex: none; width: 22px; font-size: 17px; color: #C7E89B; }
.acceso-pie { position: relative; z-index: 1; margin: 0; font-size: var(--t12); color: rgba(255, 255, 255, .72); }

.acceso-forma { display: grid; place-items: center; padding: var(--s8); background: var(--papel); }
.acceso-card { width: min(400px, 100%); }
.acceso-card h1 { font-size: var(--t24); letter-spacing: -.02em; }
.acceso-sub { margin: var(--s2) 0 var(--s8); font-size: var(--t13); color: var(--ink-3); }
.acceso-logo-movil { display: none; width: 56px; height: 56px; margin-bottom: var(--s5); }
.acceso-card .form-label { font-size: var(--t13); color: var(--ink-2); font-weight: 500; }
.acceso-card .form-control { height: 48px; font-size: var(--t14); }
.acceso-card .btn-lg { height: 52px; font-size: var(--t14); font-weight: 600; }
.acceso-card .form-check-label { font-size: var(--t13); }
/* Ojo para revisar la contraseña: en la calle, con teclado chico, se agradece. */
.campo-clave { position: relative; }
.campo-clave .form-control { padding-right: 48px; }
.ver-clave {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--ink-3); background: none; border: 0; border-radius: var(--r-ctl);
  cursor: pointer;
}
.ver-clave:hover { color: var(--marca); background: var(--hundido-2); }
.acceso-volver {
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s7); font-size: var(--t13); color: var(--ink-3);
}
.acceso-volver:hover { color: var(--marca); }

@media (max-width: 860px) {
  .acceso { grid-template-columns: 1fr; }
  /* La marca se vuelve una franja: el logo y el nombre, nada más. */
  .acceso-marca { padding: var(--s8) var(--s6); gap: var(--s5); }
  .acceso-lista, .acceso-pie { display: none; }
  .acceso-logo { width: 60px; height: 60px; }
  .acceso-n1 { font-size: 26px; }
  .acceso-n2 { font-size: 28px; }
  .acceso-forma { padding: var(--s7) var(--s6) var(--s10); }
}

.login-bg { min-height: 100vh; display: grid; place-items: center; padding: var(--s6); background: var(--lienzo); }
.login-card {
  position: relative; overflow: hidden;
  width: min(380px, 100%); padding: var(--s9);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: 16px; box-shadow: var(--sombra-pop);
}
/* Filete de marca arriba de la tarjeta: azul que se abre al verde, como el
   logo. Es lo primero que ve un colaborador al entrar. */
.login-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px;
  background: var(--grad-marca);
}
.login-logo {
  display: grid; place-items: center; width: 44px; height: 44px;
  margin-bottom: var(--s6); border-radius: 12px;
  background: var(--grad-marca); color: #fff; font-size: 20px;
  box-shadow: 0 4px 12px rgba(11, 77, 162, .30);
}
.login-card h1 { font-size: var(--t20); margin-bottom: var(--s2); }
.login-sub { font-size: var(--t12); color: var(--ink-3); margin-bottom: var(--s6); }

/* ─────────────────────────────────────────────────────────────────────────
   21b · ANCLAS
   «Capturar visita» de Mi día apunta a #pension. Sin esto el destino queda
   debajo de la barra de trabajo pegajosa y el asesor cree que el enlace no
   funcionó. Se repone aquí porque el rediseño lo perdió.
   ───────────────────────────────────────────────────────────────────────── */
[id], [data-seccion] { scroll-margin-top: calc(var(--wb-h) + var(--s5)); }

/* ─────────────────────────────────────────────────────────────────────────
   21c · GANCHOS DE LA FASE 3
   Clases que las plantillas migradas ya usan y el sistema no traía. Cada una
   verificada contra su markup real; nada de CSS muerto.
   ───────────────────────────────────────────────────────────────────────── */

/* Agenda: las franjas libres consecutivas colapsan a una línea fina, y la
   franja de «ahora» lleva el filo de la marca (la pone un script comparando
   data-franja con la hora local). */
table.tabla tbody tr.franja-libre td { height: 22px; font-size: var(--t11); }
table.tabla tbody tr.franja-ahora td { border-top: 2px solid var(--marca); }

/* Por ubicar: la fila elegida — la clase la pone su script. */
.fila-ubicar.elegida { background: var(--marca-tinte); }

/* Limpieza: la vista previa de pantallas leídas, DOM construido por su JS. */
.pl-detalle > summary { font-size: var(--t12); color: var(--enlace); cursor: pointer; }
.pl-conceptos { margin: var(--s3) 0 0; padding-left: var(--s6); }
.pl-conceptos .extraordinario { color: var(--alerta); }
.pantalla-leida.aplicada { opacity: .55; }

/* Ancho contenido para formularios y texto de lectura: en un monitor de
   2560 px un formulario estirado a lo ancho es ilegible. Las TABLAS no lo
   llevan: ellas sí aprovechan todo el ancho. */
.angosto { max-width: 860px; }

/* ─────────────────────────────────────────────────────────────────────────
   21d · COMPONENTES ATRIO — las piezas nuevas del rediseño v5
   ───────────────────────────────────────────────────────────────────────── */

/* ── Workspace de dos columnas: principal + panel de contexto ──
   Mi día, Agenda y Dashboard se componen con esto. */
.ws { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; padding: 0 var(--contenido-x) var(--s8); }
.ws-ancha { grid-template-columns: minmax(0, 1fr) 380px; }
.ws-col { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }

/* ── Tarjetas de métrica: el número es el protagonista ── */
.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--s5); padding: 0 var(--contenido-x) var(--s6); }
.metricas.en-panel { padding: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.metrica {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s6);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-caja); box-shadow: var(--sombra-1);
  color: inherit; text-decoration: none;
}
a.metrica:hover { border-color: var(--marca); text-decoration: none; }
a.metrica:hover .metrica-valor { color: var(--marca); }
.metrica-rotulo {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t12); font-weight: 550; color: var(--ink-3);
}
.metrica-rotulo i { color: var(--ink-4); font-size: 13px; }
.metrica-valor {
  font-size: var(--t26); font-weight: 650; letter-spacing: -.025em;
  line-height: 1.05; color: var(--ink);
  font-variant-numeric: tabular-nums slashed-zero;
}
.metrica-valor .uni { font-size: .5em; font-weight: 500; color: var(--ink-3); margin-left: 2px; }
.metrica-pie { display: flex; align-items: center; gap: var(--s3); font-size: var(--t12); color: var(--ink-3); }
.metrica-delta {
  display: inline-flex; align-items: center; gap: 3px;
  height: 20px; padding: 0 var(--s3);
  font-size: var(--t11); font-weight: 600;
  color: var(--tono); background: var(--tono-t); border-radius: var(--r-full);
}
.metrica.alerta .metrica-valor { color: var(--riesgo); }
.metrica .spark { position: absolute; right: var(--s5); bottom: var(--s5); color: var(--marca); opacity: .85; }

/* ── Sparklines y gráfico de evolución (SVG propio, sin librerías) ── */
.spark { display: block; }
.grafico-linea { width: 100%; height: auto; display: block; }
.grafico-linea .eje { stroke: var(--linea); stroke-width: 1; }
.grafico-linea .serie { stroke: var(--marca); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.grafico-linea .area { fill: var(--marca-tinte); opacity: .7; }
.grafico-linea .punto-g { fill: var(--marca); }
.grafico-linea text { font-family: var(--fuente); font-size: 10px; fill: var(--ink-3); }

/* ── Embudo proporcional: un solo riel segmentado + leyenda ── */
.embudo-riel {
  display: flex; height: 14px; border-radius: var(--r-full); overflow: hidden;
  background: var(--hundido-2);
}
.embudo-riel > span { display: block; min-width: 3px; }
.embudo-leyenda { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin-top: var(--s5); }
.embudo-leyenda .el { display: inline-flex; align-items: center; gap: var(--s3); font-size: var(--t12); color: var(--ink-2); text-decoration: none; }
.embudo-leyenda .el:hover { color: var(--marca); text-decoration: none; }
.embudo-leyenda .el::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tono); }
.embudo-leyenda .el b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Fila de persona: avatar + quién + meta + acciones. LA unidad de las
   listas de trabajo (Mi día, atención, próximas llamadas). ── */
.fila-persona {
  display: flex; align-items: center; gap: var(--s5);
  min-height: 56px; padding: var(--s4) var(--s6);
  border-bottom: 1px solid var(--linea);
}
.fila-persona:last-child { border-bottom: 0; }
.fila-persona:hover { background: var(--hundido); }
.fp-cuerpo { flex: 1 1 auto; min-width: 0; }
.fp-nombre { display: block; font-size: var(--t13); font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-nombre:hover { color: var(--marca); text-decoration: none; }
.fp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: 1px; font-size: var(--t12); color: var(--ink-3); }
.fp-meta b { color: var(--ink); font-weight: 600; }
.fp-lado { flex: none; display: flex; align-items: center; gap: var(--s3); }
.fp-hora { flex: none; font-family: var(--mono); font-size: var(--t12); font-weight: 500; color: var(--ink-2); min-width: 44px; text-align: right; }

/* ── Cajón lateral (drawer) de detalle: ver sin perder el contexto ── */
.cajon-fondo {
  position: fixed; inset: 0; z-index: 85;
  background: rgba(11, 15, 26, .32);
  opacity: 1; transition: opacity var(--d3) var(--curva);
}
.cajon-fondo[hidden] { display: none; }
.cajon {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 86;
  width: min(440px, 94vw);
  display: flex; flex-direction: column;
  background: var(--flotante);
  border-left: 1px solid var(--linea-2);
  box-shadow: var(--sombra-modal);
  transform: translateX(0); transition: transform var(--d3) var(--curva);
}
.cajon[hidden] { display: none; }
.cajon-cab {
  flex: none; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s6) var(--s7);
  border-bottom: 1px solid var(--linea);
}
.cajon-cab .titulos { flex: 1 1 auto; min-width: 0; }
.cajon-cab h2 { font-size: var(--t16); font-weight: 650; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cajon-cab .clave { font-family: var(--mono); font-size: var(--t11); color: var(--ink-3); }
.cajon-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: var(--s6) var(--s7); }
.cajon-pie {
  flex: none; display: flex; gap: var(--s3);
  padding: var(--s5) var(--s7);
  border-top: 1px solid var(--linea); background: var(--papel);
}
.cajon-pie .btn { flex: 1 1 0; }
.cajon-secc { margin-bottom: var(--s7); }
.cajon-secc-titulo {
  margin-bottom: var(--s4);
  font-size: var(--t11); font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}

/* ── Control segmentado: Día / Semana / Lista ── */
.seg {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; background: var(--hundido-2); border-radius: var(--r-ctl);
}
.seg > a, .seg > button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  height: calc(var(--ctl-h) - 8px); padding: 0 var(--s5);
  font-family: inherit; font-size: var(--t12); font-weight: 550;
  color: var(--ink-2); background: transparent; border: 0;
  border-radius: calc(var(--r-ctl) - 2px);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.seg > .activo {
  color: var(--ink); background: var(--papel);
  box-shadow: var(--sombra-1); font-weight: 600;
}
.seg > a:hover:not(.activo), .seg > button:hover:not(.activo) { color: var(--ink); }

/* ── Mini-calendario del panel de agenda ── */
.mini-cal { width: 100%; border-collapse: collapse; table-layout: fixed; text-align: center; }
.mini-cal th { padding: var(--s2) 0; font-size: var(--t11); font-weight: 600; color: var(--ink-4); text-transform: uppercase; }
.mini-cal td { padding: 1px; }
.mini-cal td a, .mini-cal td span {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin: 0 auto;
  font-size: var(--t12); color: var(--ink-2);
  border-radius: var(--r-full); text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.mini-cal td span.fuera { color: var(--ink-4); }
.mini-cal td a:hover { background: var(--hundido-2); text-decoration: none; }
.mini-cal td a.hoy { font-weight: 650; color: var(--marca); background: var(--marca-tinte); }
.mini-cal td a.elegido { font-weight: 650; color: #fff; background: var(--marca); }
.mini-cal td a .puntito {
  position: absolute; margin-top: 20px;
  width: 4px; height: 4px; border-radius: var(--r-full); background: var(--marca);
}
.mini-cal td a { position: relative; }
.mini-cal td a.elegido .puntito { background: #fff; }

/* ── Línea de «ahora» de la agenda ── */
.linea-ahora { position: relative; }
.linea-ahora::before {
  content: ""; position: absolute; left: 0; right: 0; top: var(--ahora-y, 0);
  border-top: 2px solid var(--riesgo); z-index: 5; pointer-events: none;
}
.linea-ahora::after {
  content: ""; position: absolute; left: -4px; top: calc(var(--ahora-y, 0) - 4px);
  width: 10px; height: 10px; border-radius: var(--r-full);
  background: var(--riesgo); z-index: 5; pointer-events: none;
}

/* ── Piezas dentro de una superficie (bloque) ──
   Cuando las filas de trabajo viven en una tarjeta, su respiro lateral es el
   de la tarjeta, no el de la página; y las cabeceras pegajosas anclan bajo
   la barra superior. */
.vistas.suelta {
  position: static; max-width: none; margin: 0; padding: 0;
  background: transparent; min-height: 0;
}
.metrica.activa { border-color: var(--marca); }
.metrica.activa .metrica-valor { color: var(--marca); }
.bloque .grupo-cabecera { top: var(--wb-h); padding: 0 var(--s6); background: var(--hundido); }
.bloque .visita { padding: var(--s4) var(--s6); }
.bloque .fila-link, .bloque .fila-diagnostico, .bloque .fila-ubicar,
.bloque .visita-fila { padding: var(--s3) var(--s6); }
.bloque .grupo-ruta:last-child, .bloque .grupo-ruta:last-child .visita:last-child { border-bottom: 0; }

/* ── Lista de clientes: celda identidad de dos líneas (avatar + nombre, CURP
   debajo). Va dentro de td.principal.nombre-fila: el enlace hereda peso/color
   de .nombre-fila a. */
.celda-id { display: flex; align-items: center; gap: var(--s4); min-width: 0; padding: var(--s3) 0; }
.celda-id .id-textos { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.celda-id .id-textos a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El CURP no hereda el negrita del nombre */
.celda-id .celda-mono { font-weight: 400; }

/* ── Fila clicable: abre el cajón de resumen sin salir de la lista ── */
tr.js-fila { cursor: pointer; }
tr.js-fila:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }

/* ── Cajón de resumen: tira de tres datos (Semanas / Edad / Régimen) ── */
.cajon-datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
  margin: var(--s5) 0 var(--s7);
}
/* Los tags de etapa/derechos del cajón respiran entre sí */
#cajTags { flex-wrap: wrap; gap: var(--s3); margin-bottom: var(--s2); }
/* Los chips de teléfono del cajón envuelven si hay dos números largos */
#cajTels { flex-wrap: wrap; gap: var(--s3); }

/* ── Dashboard: separación entre segmentos del embudo ──
   Etapas contiguas comparten tono (nuevo/asignado = neutro, las dos rutas =
   marca): sin una junta de 2px se leen como un solo segmento. */
.embudo-riel { gap: 2px; }

/* ── Dashboard: tabla compacta embebida en un .bloque ──
   .tabla-wrap trae margen de página y tarjeta propia; dentro de un bloque
   del workspace duplicaría bordes y márgenes. Este envoltorio solo aporta
   scroll horizontal y limpia el borde de la última fila. */
.bloque > .cuerpo.sin-relleno .tabla-scroll {
  overflow-x: auto;
  /* Misma señal de scroll que .tabla-wrap: si la tabla sigue, se ve. */
  background:
    linear-gradient(to right, var(--papel) 35%, rgba(255, 255, 255, 0)) left / 48px 100% no-repeat local,
    linear-gradient(to left, var(--papel) 35%, rgba(255, 255, 255, 0)) right / 48px 100% no-repeat local,
    linear-gradient(to right, rgba(11, 15, 26, .10), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(to left, rgba(11, 15, 26, .10), transparent) right / 14px 100% no-repeat scroll,
    var(--papel);
}
.bloque > .cuerpo.sin-relleno .tabla-scroll table.tabla tbody tr:last-child td { border-bottom: 0; }

/* ── Calculadora v5 ──
   El modo dentro de un .seg: cada segmento es un <label> con su radio oculto
   porque el submit y los tests dependen de name="modo". El `.seg > .activo`
   existente pinta el estado elegido sin duplicar reglas. */
.seg > label {
  position: relative; margin: 0;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s3);
  height: calc(var(--ctl-h) - 8px); padding: 0 var(--s5);
  font-size: var(--t12); font-weight: 550; color: var(--ink-2);
  border-radius: calc(var(--r-ctl) - 2px); cursor: pointer; white-space: nowrap;
}
.seg > label:hover:not(.activo) { color: var(--ink); }
.seg > label:focus-within { outline: 2px solid var(--foco-anillo); outline-offset: 1px; }
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
/* El segmentado de la calculadora ocupa el ancho del panel, mitad y mitad. */
.calc-seg { display: flex; width: 100%; margin-bottom: var(--s5); }
.calc-seg > label { flex: 1 1 0; }

/* Tarjeta de recomendación: la ÚNICA superficie con acento de marca en la
   pantalla — el resultado que se le enseña al cliente. La tabla y el
   desglose quedan neutros para que el ojo llegue aquí primero. */
.calc-reco {
  background: var(--papel);
  border: 1px solid var(--marca); border-left-width: 4px;
  border-radius: var(--r-caja); box-shadow: var(--sombra-1);
  padding: var(--s5) var(--s6); margin: var(--s4) 0 var(--s5);
}
.calc-reco-rotulo {
  display: inline-flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s4); padding: 2px var(--s3);
  font-size: var(--t11); font-weight: 650; letter-spacing: .06em; text-transform: uppercase;
  color: var(--marca); background: var(--marca-tinte); border-radius: var(--r-full);
}
.calc-reco-datos { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s9); align-items: flex-end; }
.calc-reco-dato { display: grid; gap: 2px; }
.cr-rotulo { font-size: var(--t12); color: var(--ink-3); }
.calc-reco .cifra-xl { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-reco-sec { font-size: var(--t16); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-reco-razon { margin: var(--s4) 0 0; font-size: var(--t13); color: var(--ink-2); }

/* Modo monto: dos tarjetas gemelas y NEUTRAS — el intercambio se nombra
   (pago más bajo contra menor costo total), no se decide por el usuario. */
.calc-extremos {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5); margin: var(--s4) 0 var(--s5);
}
.calc-extremo {
  display: grid; gap: var(--s2); align-content: start;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-caja); box-shadow: var(--sombra-1);
  padding: var(--s5) var(--s6);
}
.calc-extremo .tag { justify-self: start; }
.calc-extremo .cifra-xl { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-extremo-pie { font-size: var(--t12); color: var(--ink-3); }
@media (max-width: 560px) {
  .calc-extremos { grid-template-columns: minmax(0, 1fr); }
}

/* «Cómo se calculó»: renglones con icono. Las advertencias (tope aplicado,
   regla de los 83 años) van en tono alerta para distinguirse de las notas
   fijas del motor; el tono lo decide el blueprint, no la plantilla. */
.calc-desglose { margin-top: var(--s5); }
.calc-desglose-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.calc-desglose-lista li { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--t12); color: var(--ink-2); }
.calc-desglose-lista li i { flex: none; color: var(--ink-4); }
.calc-desglose-lista li.alerta, .calc-desglose-lista li.alerta i { color: var(--alerta); }

/* ── PLANIFICADOR DE RUTAS (Mapa y rutas) ──────────────────────────────
   Tres zonas: selección | mapa | ruta. La tercera aparece cuando hay
   selección (rutas.js pone .con-ruta). El mapa manda: la herramienta llena
   el alto disponible y cada panel scrollea por dentro. */
.plan {
  display: grid; grid-template-columns: 360px minmax(0, 1fr);
  gap: var(--s5);
  height: calc(100dvh - var(--wb-h) - var(--filtros-h) - 118px);
  min-height: 520px;
  padding: 0 var(--contenido-x) var(--s6);
}
.plan.con-ruta { grid-template-columns: 360px minmax(0, 1fr) 380px; }
.plan-izq, .plan-der {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-caja); box-shadow: var(--sombra-1);
}
.plan-cab {
  flex: none; display: flex; align-items: center; gap: var(--s4);
  min-height: 56px; padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--linea);
}
.plan-cab b { font-size: var(--t14); }
.plan-vistas { margin: var(--s4) var(--s5) 0; display: flex; }
.plan-vistas > label { flex: 1 1 0; }
.plan-sel {
  flex: none; display: flex; align-items: center; gap: var(--s4);
  padding: var(--s4) var(--s5);
  font-size: var(--t12); color: var(--ink-2);
  border-bottom: 1px solid var(--linea);
}
.plan-aviso {
  margin: var(--s4) var(--s5); padding: var(--s4) var(--s5);
  font-size: var(--t12); color: var(--alerta);
  background: var(--alerta-t); border-radius: var(--r-ctl);
}
.plan-lista { flex: 1 1 auto; overflow-y: auto; list-style: none; margin: 0; padding: var(--s2) 0; }
.plan-fila {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s5);
  border-bottom: 1px solid var(--linea);
}
.plan-fila:last-child { border-bottom: 0; }
.plan-fila:hover { background: var(--hundido); }
.plan-fila input[type="checkbox"] { flex: none; }
.geo-punto { flex: none; width: 10px; height: 10px; border-radius: var(--r-full); }
.geo-punto[data-color="verde"] { background: var(--ok); }
.geo-punto[data-color="amarillo"] { background: var(--alerta); }
.geo-punto[data-color="rojo"] { background: var(--riesgo); }
/* El hover del marcador destaca su fila en la lista (rutas.js la ponía y la
   clase no existía: función muerta detectada en auditoría). */
.plan-fila.destacada { background: var(--marca-tinte); }
.plan-fila-txt { display: grid; gap: 1px; min-width: 0; font-size: var(--t12); }
.plan-fila-txt b { font-size: var(--t13); font-weight: 600; color: var(--ink); }
.plan-meta { color: var(--ink-3); }

.plan-centro { display: flex; flex-direction: column; gap: var(--s3); min-width: 0; min-height: 0; }
/* flex-wrap + select encogible: sin ellos, a 1281-1496px la barra desborda por
   debajo del panel de ruta y el bote de basura queda inalcanzable (auditado
   con elementFromPoint). */
.plan-mapa-barra { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); }
.plan-mapa-barra select { min-width: 120px; flex: 0 1 240px; }
.plan-mapa {
  flex: 1 1 auto; min-height: 0;
  border: 1px solid var(--linea-2); border-radius: var(--r-caja);
  background: var(--hundido);
}
.popup-acciones { display: flex; gap: var(--s3); margin-top: var(--s3); }

/* Pin para fijar una ubicación a mano (por-ubicar): gota de CSS puro en el
   color de la marca — sin PNG que se pueda perder. La punta es el ancla. */
.pin-ubicar { background: none; border: 0; }
.pin-ubicar::before {
  content: ""; position: absolute; left: 3px; top: 2px;
  width: 20px; height: 20px;
  background: var(--marca); border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgba(11, 15, 26, .35);
}
.pin-ubicar::after {
  content: ""; position: absolute; left: 10px; top: 9px;
  width: 6px; height: 6px; border-radius: 50%; background: #fff;
}

.plan-der-cuerpo { flex: 1 1 auto; overflow-y: auto; padding: var(--s5); }
.plan-paradas { list-style: none; margin: var(--s5) 0 0; padding: 0; }
/* OJO: la clase .parada ya existe en Mi día (el circulito numerado de 22 px).
   Estas reglas van SIEMPRE calificadas con .plan-paradas y resetean width /
   height / margin explícitamente: sin eso, el 22×22 del chip viejo se le
   pega a cada fila de la ruta y los nombres se enciman (bug real reportado
   en pantalla del dueño). */
.plan-paradas .parada {
  display: flex; align-items: flex-start; gap: var(--s4);
  width: auto; height: auto; margin: 0;
  padding: var(--s4) var(--s2);
  font-size: var(--t13); font-weight: 400;
  color: var(--ink-2); background: none; border-radius: 0;
  border-bottom: 1px solid var(--linea);
  cursor: grab;
}
.plan-paradas .parada:last-child { border-bottom: 0; }
.plan-paradas .parada.destino { outline: 2px dashed var(--marca); outline-offset: -2px; border-radius: var(--r-ctl); }
.plan-paradas .parada.visitada .parada-txt b { color: var(--ink-3); text-decoration: line-through; }
.parada-num {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; margin-top: 2px;
  font-size: var(--t12); font-weight: 650;
  color: var(--marca); background: var(--marca-tinte); border-radius: var(--r-full);
}
.parada-txt { display: grid; gap: 1px; min-width: 0; flex: 1 1 auto; font-size: var(--t12); }
.parada-txt b { font-size: var(--t13); color: var(--ink); }
.parada-dist { color: var(--ink-4); font-variant-numeric: tabular-nums; }
.parada-btns { flex: none; display: flex; gap: 2px; opacity: .5; }
.plan-paradas .parada:hover .parada-btns, .parada-btns:focus-within { opacity: 1; }
.js-visitada.hecha { color: var(--ok); }
.plan-totales {
  display: flex; gap: var(--s7); align-items: baseline;
  margin: var(--s5) 0;
  font-size: var(--t12); color: var(--ink-3);
}
.plan-totales b { color: var(--ink); font-size: var(--t14); font-variant-numeric: tabular-nums; }
.plan-totales i { color: var(--ink-4); }

@media (max-width: 1280px) {
  .plan, .plan.con-ruta { grid-template-columns: minmax(0, 1fr); height: auto; }
  .plan-izq { max-height: 340px; }
  .plan-lista { max-height: 200px; }
  .plan-mapa { height: 52vh; min-height: 320px; }
  .plan-der { max-height: none; }
}

/* ── MI DÍA · franja de indicadores ────────────────────────────────────
   No son cuatro tarjetas sueltas: es UNA banda segmentada donde cada
   segmento es a la vez contador y vista. El activo se marca con la marca. */
.franja-indicadores {
  display: flex; align-items: stretch;
  margin-bottom: var(--s6);
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--r-caja); box-shadow: var(--sombra-1);
  overflow-x: auto; scrollbar-width: none;
}
.franja-indicadores::-webkit-scrollbar { display: none; }
.franja-indicadores > a {
  flex: 1 1 0; min-width: 130px;
  display: flex; flex-direction: column; justify-content: center; gap: 1px;
  padding: var(--s4) var(--s6);
  border-right: 1px solid var(--linea);
  color: inherit; text-decoration: none;
  border-bottom: 2px solid transparent;
}
.franja-indicadores > a:last-child { border-right: 0; }
.franja-indicadores > a:hover { background: var(--hundido); text-decoration: none; }
.franja-indicadores > a.activo { border-bottom-color: var(--marca); background: var(--marca-tinte); }
.franja-indicadores .fi-num {
  font-size: var(--t20); font-weight: 650; line-height: 1.1;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.franja-indicadores > a.activo .fi-num { color: var(--marca); }
.franja-indicadores .fi-rot {
  display: flex; align-items: center; gap: var(--s3);
  font-size: var(--t12); color: var(--ink-3); white-space: nowrap;
}
.franja-indicadores .fi-rot i { font-size: 12px; color: var(--ink-4); }

/* ── CALCULADORA · panel «antes de calcular» ── */
.calc-antes-intro { font-size: var(--t14); color: var(--ink-2); margin: 0 0 var(--s5); max-width: 62ch; }
.calc-ejemplo {
  border: 1px dashed var(--marca); border-radius: var(--r-caja);
  background: var(--marca-tinte); padding: var(--s5) var(--s6);
  display: grid; gap: var(--s3); justify-items: start;
}
.calc-ejemplo-linea { display: flex; align-items: center; gap: var(--s6); flex-wrap: wrap; }
.calc-ejemplo-dato { display: grid; gap: 2px; }
.calc-ejemplo-dato .cifra-xl { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }
.calc-ejemplo-pie { font-size: var(--t12); color: var(--ink-3); }
.calc-ejemplo-flecha { font-size: 20px; color: var(--marca); }
.calc-ejemplo-nota { margin: 0; font-size: var(--t12); color: var(--ink-3); }
.calc-antes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s4); }
.calc-antes-lista li { display: flex; gap: var(--s4); align-items: baseline; font-size: var(--t13); color: var(--ink-2); }
.calc-antes-lista li i { flex: none; color: var(--ink-4); }

/* ── CALCULADORA · desglose expandible ──
   «Cómo se calculó» es <details class="bloque">: el summary reutiliza .cab y
   lleva un resumen de UNA línea que nombra las advertencias aunque el cajón
   esté cerrado (nunca se esconde una alerta detrás de un clic). */
.calc-desglose > summary { list-style: none; cursor: pointer; }
.calc-desglose > summary::-webkit-details-marker { display: none; }
.calc-desglose > summary:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 2px; border-radius: var(--r-caja); }
.calc-desglose:not([open]) > summary.cab { border-bottom: 0; border-radius: var(--r-caja); }
.calc-desglose-resumen {
  margin-left: auto; font-weight: 400; font-size: var(--t12); color: var(--ink-3);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calc-desglose-resumen.alerta { color: var(--alerta); font-weight: 600; }
.calc-desglose-flecha { flex: none; color: var(--ink-4); transition: transform .15s ease; }
.calc-desglose[open] > summary .calc-desglose-flecha { transform: rotate(180deg); }

/* El campo de dinero es el héroe de su pantalla: más alto que un control
   normal para que la cifra t20 respire. */
.calc-campo { height: 52px; }
.calc-input { height: 100%; }

/* ── MI DÍA · workspace 8/4, próxima actividad, progreso, menú por fila ── */
.ws.ws-8-4 { grid-template-columns: minmax(0, 2fr) minmax(320px, 1fr); }
@media (min-width: 1800px) {
  .ws.ws-8-4 { grid-template-columns: minmax(0, 3fr) minmax(340px, 1fr); }
}
.prox-act {
  display: flex; align-items: center; gap: var(--s5);
  padding: var(--s4) 0;
}
.prox-hora {
  flex: none; display: grid; place-items: center;
  min-width: 62px; height: 40px; padding: 0 var(--s4);
  font-family: var(--mono); font-size: var(--t14); font-weight: 600;
  color: var(--marca); background: var(--marca-tinte);
  border-radius: var(--r-ctl);
}
.progreso-dia { display: grid; gap: var(--s3); }
.progreso-texto { font-size: var(--t13); color: var(--ink-2); }
.progreso-riel {
  height: 8px; border-radius: var(--r-full);
  background: var(--hundido-2); overflow: hidden;
}
.progreso-riel > span { display: block; height: 100%; background: var(--ok); border-radius: var(--r-full); }

/* Menú ⋯ por fila: un botón fantasma que abre su .pop. El summary de mi_dia
   no trae clases de botón; se viste aquí. */
details.menu-fila { position: relative; }
details.menu-fila > summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--ink-3); border-radius: var(--r-ctl);
  cursor: pointer; list-style: none;
}
details.menu-fila > summary::-webkit-details-marker { display: none; }
details.menu-fila > summary:hover { background: var(--hundido-2); color: var(--ink); }
details.menu-fila .pop { min-width: 220px; }

/* ── CLIENTES · «Más filtros», chips aplicados, celda del menú, cajón ── */
/* Nunca más ancho que el viewport: a 1366 se salía 8px por la derecha. */
.pop.pop-filtros { min-width: min(420px, calc(100vw - 24px)); max-width: min(480px, calc(100vw - 24px)); }
.pop-filtros .rejilla {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s5);
}
.pop-filtros .ancho-total { grid-column: 1 / -1; }
.chips-filtros {
  display: flex; flex-wrap: wrap; gap: var(--s3);
  width: 100%; max-width: var(--ancho-max); margin-inline: 0 auto;
  padding: 0 var(--contenido-x) var(--s4);
}
td.td-menu, th.td-menu { width: 52px; }
.cajon-notas { display: grid; gap: var(--s3); font-size: var(--t12); color: var(--ink-2); }
.prox-linea { display: flex; align-items: center; gap: var(--s3); font-size: var(--t13); color: var(--ink-2); }

/* ── CALCULADORA · contenedor del «antes» ── */
.calc-antes { display: grid; gap: var(--s6); }

/* ── AGENDA · cuerpo de la cita ── */
.cita-cuerpo { display: grid; gap: 1px; min-width: 0; }

/* ── EXPEDIENTE · pestañas, panel derecho fijo y vitales pegajosas ──
   El expediente ya no enseña todo a la vez: Resumen primero, la captura por
   pestañas, y el resumen del caso siempre a la derecha. */
.vitales { position: sticky; top: var(--wb-h); z-index: 24; }
.exp-tabs {
  position: sticky; top: calc(var(--wb-h) + 44px); z-index: 23;
  display: flex; gap: var(--s2); align-items: center;
  width: 100%; max-width: var(--ancho-max); margin-inline: 0 auto;
  padding: var(--s3) var(--contenido-x);
  background: var(--lienzo);
  overflow-x: auto; scrollbar-width: none;
}
.exp-tabs::-webkit-scrollbar { display: none; }
.exp-tab {
  flex: none;
  height: 34px; padding: 0 var(--s5);
  font-family: inherit; font-size: var(--t13); font-weight: 500;
  color: var(--ink-2); background: transparent;
  border: 1px solid transparent; border-radius: var(--r-full);
  cursor: pointer; white-space: nowrap;
}
.exp-tab:hover { color: var(--ink); background: var(--hundido-2); }
.exp-tab.activo {
  color: var(--marca); font-weight: 600;
  background: var(--papel); border-color: var(--linea-2);
  box-shadow: var(--sombra-1);
}
.tab-panel[hidden] { display: none; }
.exp-rail { position: sticky; top: calc(var(--wb-h) + 96px); align-self: start; }

/* ── AGENDA · fila elegida y resultados del cajón de agendar ── */
.fila-persona.elegida { background: var(--marca-tinte); box-shadow: inset 3px 0 0 var(--marca); }
.fila-persona.elegida:hover { background: var(--marca-tinte); }
.res-cliente { display: flex; width: 100%; text-align: left; font: inherit; background: none; border: 0; border-radius: var(--r-ctl); cursor: pointer; }
.res-cliente:focus-visible { outline: 2px solid var(--foco-anillo); outline-offset: 1px; }

/* ── MESAS DE CAPTURA · modo enfoque (uno por uno) ── */
.enfoque-quien { margin-bottom: var(--s6); padding-bottom: var(--s6); border-bottom: 1px solid var(--linea); }
.enfoque-nombre { display: inline-block; font-size: 20px; font-weight: 650; letter-spacing: -.01em; text-decoration: none; }
.enfoque-nombre:hover { color: var(--marca); text-decoration: none; }
.enfoque-contexto { margin-top: var(--s2); flex-wrap: wrap; }
.enfoque-tels { margin-top: var(--s4); flex-wrap: wrap; }
.enfoque-campos { row-gap: var(--s4); max-width: 640px; }
.enfoque-campos .form-control, .enfoque-campos .form-select { max-width: 420px; }
.enfoque-pie { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--linea); }
a.fila-persona { text-decoration: none; color: inherit; }
.fila-persona.enfoque-actual,
.fila-persona.enfoque-actual:hover { background: var(--marca-tinte); box-shadow: inset 3px 0 0 var(--marca); }

/* ── LIMPIEZA · ejemplo real de pantalla amarilla (paso 1) ── */
.ejemplo-pantalla {
  margin: var(--s3) 0 var(--s2);
  padding: var(--s4) var(--s5);
  background: var(--hundido);
  border: 1px solid var(--linea);
  border-radius: var(--r-ctl);
  font-size: var(--t12);
  line-height: 1.5;
  color: var(--ink-2);
  white-space: pre;
  overflow: auto;
  tab-size: 12;
  max-height: 260px;
}

/* ── LA BASE · riel de productos clicable y diagnóstico accionable ── */
.embudo-riel > a { display: block; min-width: 3px; }
.fila-diagnostico .fd-ver { flex: none; font-size: var(--t12); color: var(--marca); white-space: nowrap; }
.fila-diagnostico:hover .fd-ver { text-decoration: underline; }
.fila-link .fd-n { min-width: 4ch; text-align: right; }

/* ── Paleta de comandos (Ctrl+K): separadores y filas de comando ──
   Conviven con los resultados de clientes dentro de .resultados-busqueda. */
.resultados-busqueda .resultado-sep {
  padding: var(--s3) var(--s5) var(--s2);
  font-size: 11px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
  user-select: none;
}
.resultados-busqueda .resultado-sep:not(:first-child) {
  margin-top: var(--s2); padding-top: var(--s4);
  border-top: 1px solid var(--linea);
}
.resultados-busqueda .resultado-cmd { flex-direction: row; align-items: center; gap: var(--s4); }
.resultados-busqueda .resultado-cmd > i {
  flex: 0 0 auto; width: 18px; text-align: center;
  font-size: 14px; color: var(--ink-3);
}
.resultados-busqueda .resultado-cmd .r-nombre {
  flex: 1 1 auto; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.resultados-busqueda .cmd-rotulo {
  flex: 0 0 auto; padding: 1px var(--s3);
  font-size: 10.5px; font-weight: 550; color: var(--ink-3);
  background: var(--papel); border: 1px solid var(--linea-2);
  border-radius: 5px;
}

/* ── Pausas del panel de ruta (rutas-extra.js) — solo de la sesión ──
   Borde punteado = "no es una parada real". */
.lista-pausas { list-style: none; margin: var(--s3) 0 0; padding: 0; }
.pausa-ruta {
  display: flex; align-items: center; gap: var(--s4);
  padding: var(--s3) var(--s2);
  font-size: var(--t13); color: var(--ink-2);
  border-bottom: 1px dashed var(--linea);
}
.pausa-ruta:last-child { border-bottom: 0; }
.pausa-ruta > i {
  flex: none; display: grid; place-items: center;
  width: 26px; height: 26px; font-size: var(--t13);
  color: var(--ink-3); background: var(--hundido); border-radius: var(--r-full);
}
.pausa-ruta select {
  flex: none; width: auto; height: 32px; line-height: 30px;
  padding: 0 var(--s6) 0 var(--s3); font-size: var(--t13);
}
#zonaPausas { margin-top: var(--s3); }
#btnAgregarPausa { margin-top: var(--s2); }

/* «Recientes» del riel: el grupo lo inyecta crm-recientes.js solo con el riel
   extendido; si el usuario lo encoge en vivo, aquí se esconde sin recargar. */
body[data-riel="min"] .rail-reciente { display: none; }

/* ── Cálculos (Ley 73 / M40): cifras protagonistas del resultado dentro del
   cuerpo de un bloque. ── */
.datos-clave { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s9); align-items: flex-end; }
.datos-clave > div { display: grid; gap: 2px; }
.datos-clave .pie { font-size: var(--t12); color: var(--ink-3); }
.datos-clave .cifra-xl { font-weight: 650; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ── Esqueletos de carga ── */
.skeleton {
  display: block; height: 14px; border-radius: var(--r-ctl);
  background: linear-gradient(90deg, var(--hundido-2) 25%, var(--hundido) 50%, var(--hundido-2) 75%);
  background-size: 200% 100%;
  animation: skeleton-brillo 1.4s ease infinite;
}
@keyframes skeleton-brillo { to { background-position: -200% 0; } }

/* ─────────────────────────────────────────────────────────────────────────
   22 · PUENTE DE CLASES LEGADAS
   Las 17 plantillas que todavía no se migran tienen que verse bien HOY.
   Cada regla de aquí muere cuando su plantilla se migra; el mapa de
   migración dice con qué se sustituye. NO agregar nada nuevo a esta sección.
   ───────────────────────────────────────────────────────────────────────── */

/* Contenedores viejos → bloque */
.card-crm { border: 1px solid var(--linea-2); border-radius: var(--r-caja); background: var(--papel); box-shadow: none; margin-bottom: var(--s5); }
.card-crm .card-head {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 32px; padding: 0 var(--s5);
  font-size: var(--t12); font-weight: 600; color: var(--ink);
  background: var(--hundido); border-bottom: 1px solid var(--linea-2);
}
.card-crm .card-head i { color: var(--ink-4); font-size: 13px; }
.card-crm .card-body-crm { padding: var(--s5); }

/* Botones viejos → primario / secundario */
.btn-brand { background: var(--marca); color: #fff; border-color: var(--marca); }
.btn-brand:hover { background: var(--marca-hover); color: #fff; border-color: var(--marca-hover); }
.btn-suave { background: var(--marca-tinte); color: var(--marca); border-color: var(--marca-tinte); }
.btn-suave:hover { background: var(--papel); border-color: var(--marca); color: var(--marca); }

/* Las CINCO familias de pastilla → un punto y un tono */
.pastilla, .badge-estado, .foco, .regimen {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 18px; font-size: var(--t12); font-weight: 500;
  color: var(--ink-2); background: none; border: 0; padding: 0; white-space: nowrap;
}
.pastilla::before, .badge-estado::before, .foco .foco-punto {
  content: ""; flex: none; width: 6px; height: 6px;
  border-radius: var(--r-full); background: var(--tono); display: inline-block;
}
.regimen { color: var(--ink); font-weight: 600; }   /* el régimen es dato, no estado */
.foco { gap: var(--s3); }

.est-nuevo, .est-asignado { --tono: var(--neutro); --tono-t: var(--neutro-t); }
.est-visitado, .est-cerrado { --tono: var(--info); --tono-t: var(--info-t); }
.est-validado { --tono: var(--activo); --tono-t: var(--activo-t); }
.est-con_semanas { --tono: var(--ok); --tono-t: var(--ok-t); }
.est-ruta_pension, .est-ruta_credito { --tono: var(--marca); --tono-t: var(--marca-tinte); }
.est-descartado { --tono: var(--riesgo); --tono-t: var(--riesgo-t); }

.cal-alta { --tono: var(--ok); --tono-t: var(--ok-t); }
.cal-media, .cal-baja { --tono: var(--neutro); --tono-t: var(--neutro-t); }
.cal-descarta { --tono: var(--riesgo); --tono-t: var(--riesgo-t); }

.foco-verde { --tono: var(--ok); --tono-t: var(--ok-t); }
.foco-naranja { --tono: var(--alerta); --tono-t: var(--alerta-t); }
.foco-rojo { --tono: var(--riesgo); --tono-t: var(--riesgo-t); }
.foco-gris { --tono: var(--ink-4); --tono-t: transparent; }
.foco-gris .foco-punto { background: transparent; border: 1.5px solid var(--ink-4); }

.nivel-avance { --tono: var(--ok); --tono-t: var(--ok-t); }
.nivel-reintento { --tono: var(--info); --tono-t: var(--info-t); }
.nivel-numero { --tono: var(--alerta); --tono-t: var(--alerta-t); }
.nivel-baja { --tono: var(--riesgo); --tono-t: var(--riesgo-t); }
.r-ley73, .r-ley97 { --tono: var(--neutro); --tono-t: var(--neutro-t); }
.r-alerta { --tono: var(--riesgo); --tono-t: var(--riesgo-t); color: var(--riesgo); }

/* Hero del expediente: se aplana hasta que expediente.html se migre */
.expediente-head {
  background: var(--papel); color: var(--ink);
  border: 0; border-bottom: 1px solid var(--linea-2);
  border-radius: 0; box-shadow: none;
  padding: var(--s5) var(--contenido-x);
}
.expediente-head::before { content: none; }
.expediente-head h1, .expediente-head .text-white { color: var(--ink) !important; font-size: var(--t20); }
.expediente-head .curp-mono { font-family: var(--mono); font-size: var(--t12); color: var(--ink-3); }
.expediente-head .btn-light, .expediente-head .btn-outline-light {
  background: var(--papel); color: var(--ink); border-color: var(--linea-control);
}
.expediente-head .btn-light:hover, .expediente-head .btn-outline-light:hover { background: var(--hundido); color: var(--ink); }
.veredicto-hero { font-size: var(--t13); color: var(--ink-2); margin-top: var(--s4); }
.dato-mini { font-size: var(--t11); color: var(--ink-3); }
.dato-mini b { display: block; font-size: var(--t14); color: var(--ink); }

/* Stepper viejo → medidor plano */
.stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); font-size: var(--t11); color: var(--ink-3); }
.stepper .paso { display: inline-flex; align-items: center; gap: var(--s2); }
.stepper .paso .punto {
  display: grid; place-items: center; width: 16px; height: 16px;
  font-size: 9px; border-radius: var(--r-full);
  background: var(--hundido-2); color: var(--ink-3);
}
.stepper .paso.hecho .punto, .stepper .paso.actual .punto { background: var(--marca); color: #fff; }
.stepper .paso.actual { color: var(--marca); font-weight: 600; }
.stepper .union { width: 10px; height: 2px; background: var(--linea-2); }
.stepper .union.hecha { background: var(--marca); }

/* KPI viejos → tira de cifras */
.kpi-grid { display: flex; flex-wrap: wrap; gap: var(--s4) var(--s7); padding: var(--s3) 0; }
.kpi {
  display: inline-flex; align-items: baseline; gap: var(--s3);
  padding: 0; min-height: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; animation: none;
}
.kpi::after { content: none; }
.kpi .kpi-ico { display: none; }
.kpi .kpi-num { font-size: var(--t20); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.kpi .kpi-lbl { font-size: var(--t12); color: var(--ink-3); }
.kpi-alerta .kpi-num { color: var(--riesgo); }

/* Mi día viejo */
.dia-cabecera { display: flex; align-items: center; gap: var(--s5); }
.dia-fecha { font-size: var(--t16); font-weight: 600; color: var(--ink); }
.dia-resumen, .dia-conteo, .dia-nombre { font-size: var(--t12); color: var(--ink-3); }
.chips-dia { display: flex; gap: var(--s2); border-bottom: 1px solid var(--linea); overflow-x: auto; }
.chip-dia {
  display: inline-flex; align-items: center; gap: var(--s3);
  min-height: var(--vistas-h); padding: 0 var(--s5); margin-bottom: -1px;
  font-size: var(--t13); color: var(--ink-2); text-decoration: none;
  background: none; border: 0; border-bottom: 2px solid transparent; white-space: nowrap;
}
.chip-dia:hover { color: var(--ink); text-decoration: none; }
.chip-dia.activo { color: var(--marca); font-weight: 600; border-bottom-color: var(--marca); }
.chip-dia i { color: var(--ink-4); }
.chip-dia .chip-n { font-weight: 600; }
.chip-dia .chip-t { font-weight: inherit; }
.tarjeta-visita { padding: var(--s4) 0; border-bottom: 1px solid var(--linea); background: none; border-radius: 0; box-shadow: none; }
.tarjeta-visita:hover { background: var(--hundido-2); }
.tv-encabezado { display: flex; align-items: center; gap: var(--s4); }
.tv-nombre { font-size: var(--t14); font-weight: 600; color: var(--ink); text-decoration: none; }
.tv-nombre:hover { color: var(--marca); text-decoration: none; }
.tv-datos { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font-size: var(--t12); color: var(--ink-3); }
.tv-datos b { color: var(--ink); }
.tv-motivo, .tv-domicilio { font-size: var(--t12); color: var(--ink-3); }
.tv-domicilio i { color: var(--ink-4); }
.tv-acciones { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s3); }
.btn-accion {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: var(--ctl-h); padding: 0 var(--s4);
  font-size: var(--t12); color: var(--ink-2); text-decoration: none;
  background: var(--papel); border: 1px solid var(--linea-control);
  border-radius: var(--r-ctl); cursor: pointer;
}
.btn-accion:hover { background: var(--hundido); color: var(--ink); text-decoration: none; }
.btn-accion.principal { background: var(--marca); border-color: var(--marca); color: #fff; }
.btn-accion.principal:hover { background: var(--marca-hover); color: #fff; }
.btn-ruta {
  display: inline-flex; align-items: center; gap: var(--s3);
  height: 30px; padding: 0 var(--s5);
  font-size: var(--t13); font-weight: 600; color: #fff; text-decoration: none;
  background: var(--marca); border-radius: var(--r-ctl);
}
.btn-ruta:hover { background: var(--marca-hover); color: #fff; text-decoration: none; }
.btn-ruta small { font-weight: 400; opacity: .85; }
.agendar-envoltura { position: relative; display: inline-flex; }
.fecha-agenda { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.btn-quitar-agenda {
  width: var(--ctl-h); height: var(--ctl-h); margin-left: var(--s2);
  display: grid; place-items: center;
  color: var(--ink-3); background: transparent;
  border: 1px solid var(--linea-2); border-radius: var(--r-ctl); cursor: pointer;
}
.btn-quitar-agenda:hover { color: var(--riesgo); border-color: var(--riesgo); }

/* Oferta */
.oferta-elegida { display: flex; flex-wrap: wrap; gap: var(--s5) var(--s7); margin-bottom: var(--s5); }
.oe-dato { min-width: 88px; }
.oe-et { font-size: var(--t11); color: var(--ink-3); }
.oe-val { font-size: var(--t16); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.oe-dato.destacado .oe-val { color: var(--marca); }
.oe-margen { font-size: var(--t12); color: var(--ink-3); }
.pasos-oferta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.paso-oferta {
  display: inline-flex; align-items: center; height: 22px; padding: 0 var(--s4);
  font-family: inherit; font-size: var(--t12);
  color: var(--tono); background: var(--papel);
  border: 1px solid currentColor; border-radius: var(--r-full); cursor: pointer;
}
.paso-oferta.actual { background: var(--tono-t); font-weight: 600; }
.paso-oferta:hover:not(.actual), .tag-borde:hover:not(.actual) { background: var(--tono-t); }

/* Paneles de diagnóstico, embudo y por-ubicar */
.embudo-fila { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--linea); }
.embudo-num { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.embudo-barra { flex: 1 1 auto; height: 6px; border-radius: var(--r-full); background: var(--hundido-2); overflow: hidden; }
.embudo-barra > div { height: 100%; background: var(--marca); }
.fila-diagnostico, .fila-ubicar, .visita-fila, .fila-link {
  display: flex; align-items: center; gap: var(--s4);
  min-height: var(--fila); padding: var(--s2) var(--contenido-x);
  border-bottom: 1px solid var(--linea); color: var(--ink-2); text-decoration: none;
}
.fila-diagnostico:hover, .fila-ubicar:hover, .visita-fila:hover, .fila-link:hover { background: var(--hundido-2); text-decoration: none; }
.fila-doble { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.fu-dir, .fu-motivo, .tel-motivo, .cm-detalle, .ge-mensaje, .tp-detalle, .fd-et, .mr-dato { font-size: var(--t12); color: var(--ink-3); }
.cm-titulo, .ge-cabecera, .tp-et { font-size: var(--t12); font-weight: 600; color: var(--ink); }
.ge-n, .tp-n, .fd-n, .mr-dato b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums slashed-zero; }
.grupo-error { border-bottom: 1px solid var(--linea); padding: var(--s4) 0; }
.grupo-error.manana .ge-n { color: var(--alerta); }
.ge-accion, .fd-accion { margin-left: auto; }
.ge-clientes { font-size: var(--t12); color: var(--ink-3); }
.tarjeta-producto, .tarjeta-vencidas {
  display: block; padding: var(--s5);
  border: 1px solid var(--linea-2); border-radius: var(--r-caja);
  background: var(--papel); color: var(--ink-2); text-decoration: none;
}
.tarjeta-producto:hover, .tarjeta-vencidas:hover { border-color: var(--marca); text-decoration: none; }
.tarjeta-producto i { color: var(--ink-4); }
.vencidas-titulo { font-size: var(--t12); font-weight: 600; color: var(--riesgo); }
.vencidas-lista { font-size: var(--t12); color: var(--ink-2); }
.visitas-dia { border-bottom: 1px solid var(--linea); }
.visitas-fecha { font-size: var(--t11); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.tabla-opciones { width: 100%; border-collapse: collapse; font-size: var(--t13); }
.tabla-opciones td, .tabla-opciones th { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--linea); }
.rol-chip { font-size: var(--t11); font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }
.estado-guardado { margin-left: auto; font-size: var(--t11); font-weight: 500; color: var(--ink-3); }
.estado-guardado.guardado { color: var(--ok); }
.estado-guardado.guardando { color: var(--alerta); }
.estado-guardado.pendiente { color: var(--riesgo); }
.tabla-captura td { padding: var(--s2) var(--s4); }
.tabla-captura tr:focus-within { background: var(--marca-tinte); }
.tabla-captura .texto-num { text-align: right; font-variant-numeric: tabular-nums slashed-zero; }

/* ─────────────────────────────────────────────────────────────────────────
   23 · UTILIDADES PROPIAS (las de Bootstrap se siguen usando)
   ───────────────────────────────────────────────────────────────────────── */
.der { margin-left: auto; }
.mudo { color: var(--ink-3); }
.fuerte { font-weight: 600; color: var(--ink); }
.pila { display: flex; flex-direction: column; gap: var(--s2); }
.linea { display: flex; align-items: center; gap: var(--s4); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
.oculto { display: none !important; }

/* ═════════════════════════════════════════════════════════════════════════
   23b · RESPIRO EN PANTALLAS ANCHAS
   Con el contenido alineado al riel, en monitores grandes todo se apretaba
   arriba-izquierda («se siente amontonado»). A partir de 1600 px crecen los
   márgenes laterales, el aire bajo el encabezado y el hueco entre columnas:
   el espacio sobrante se reparte, no se acumula en una esquina.
   ═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1600px) {
  :root { --contenido-x: 40px; }
  .wb { padding-top: var(--s9); padding-bottom: var(--s6); }
  .ws { gap: var(--s7); }
  .ws-col { gap: var(--s7); }
  .metricas { gap: var(--s6); }
  .zona { padding: var(--s6) var(--contenido-x); }
}

/* ═════════════════════════════════════════════════════════════════════════
   24 · MÓVIL — AL FINAL DE LA CASCADA, A PROPÓSITO
   De 320 px a 767 px. Regla: se compacta, NO se recorta. Todo lo que hay en
   escritorio sigue estando aquí; cambia la forma, no el inventario.
   ═════════════════════════════════════════════════════════════════════════ */

/* Cualquier pantalla táctil: el objetivo mínimo es el pulgar. Se acota a
   anchos de teléfono y tableta a propósito: una laptop Windows con pantalla
   táctil NO debe perder la densidad sin que nadie se lo haya pedido. */
@media (pointer: coarse) and (max-width: 1024px) {
  .btn, .btn-accion, .opcion-tip, .rapido, .btn-quitar-agenda, .btn-cita { min-height: var(--tap); }
  .btn-ico { width: var(--tap); height: var(--tap); }
  .filtro > summary, .vista, .chip-dia { min-height: 36px; }
  .pop .opcion { min-height: 38px; }
  /* Los objetivos que más se tocan en el negocio: teléfonos, la cita y el
     checkbox de selección. El área crece; la caja visible no. */
  .tel-lista, .chip-tel { min-height: var(--tap); display: inline-flex; align-items: center; }
  .btn-cita { min-width: var(--tap); }
  .form-check-input { width: 20px; height: 20px; }
}

@media (max-width: 1199.98px) {
  /* .ws.ws-8-4 (0,2,0) le ganaba al apilado (0,1,0) y en móvil la columna
     principal de Mi día colapsaba a 34px con el texto en vertical. */
  .ws, .ws-ancha, .ws.ws-8-4 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1440px) {
  /* En la calculadora a 1366 no cabían Tasa Y Edad al liquidar: la Tasa cede
     (vive completa en «Cómo se calculó»); la edad es la que decide plazos.
     Y el relleno de celdas se aprieta para que la Edad entre COMPLETA sin
     deslizar (medido: 782px de tabla en 700px de marco). */
  .calc-salida th:nth-child(5), .calc-salida td:nth-child(5) { display: none; }
  .calc-salida table.tabla th, .calc-salida table.tabla td { padding: 0 var(--s4); }
}

/* En columnas angostas (workspace a 1366) las acciones de la visita bajan a
   su propio renglón en vez de estrujar el nombre. */
@media (max-width: 1500px) {
  .ws .visita { flex-wrap: wrap; }
  .ws .visita-acciones { width: 100%; justify-content: flex-end; margin-top: var(--s3); }
}

@media (max-width: 991.98px) {
  .dos-col, .fila-doble, .calc-marco { grid-template-columns: minmax(0, 1fr); }
  .calc-entrada { position: static; }
  .campos-2 { grid-template-columns: 152px minmax(0, 1fr); }
}

/* Tableta incluida: en SISEC la aduana de filtros ya no cabe a 768–1024 y el
   primario colgaba fuera del documento. La barra SIGUE SIENDO UNA LÍNEA y se
   desliza; nunca vuelve a ser un formulario de cuatro renglones. */
@media (max-width: 1024px) {
  .barra-filtros { overflow-x: auto; scrollbar-width: none; }
  .barra-filtros::-webkit-scrollbar { display: none; }
  /* El popover queda ATRAPADO dentro del scroller si es absolute: se fija a
     la ventana. Ningún ancestro lleva transform, así que fixed funciona. */
  .filtro[open] > .pop {
    position: fixed; left: var(--s5); right: var(--s5); top: auto;
    min-width: 0; max-width: none; max-height: 50vh;
  }
}

@media (max-width: 767.98px) {
  :root { --contenido-x: var(--s5); --fila: 52px; --ctl-h: 44px; }
  .solo-movil { display: inline-flex !important; }
  .solo-escritorio { display: none !important; }
  /* En el cajón el riel siempre va completo, aunque esté «encogido» en PC. */
  body[data-riel="min"] .rail-txt { position: static; width: auto; height: auto; clip: auto; clip-path: none; }
  body[data-riel="min"] .rail-grupo, body[data-riel="min"] .buscador-global,
  body[data-riel="min"] .rail-pie .quien { display: block; }
  body[data-riel="min"] .rail-nav a { justify-content: flex-start; padding: 0 var(--s4); gap: var(--s4); }

  /* El riel se vuelve cajón + barra inferior. El cajón conserva los mismos
     enlaces con los mismos rótulos: nada de navegación escondida tras ⌘K. */
  .app-shell { display: block; }
  .sidebar, .rail {
    position: fixed; inset: 0 auto 0 0; z-index: 80;
    width: 260px; min-width: 260px; height: 100dvh;
    transform: translateX(-100%);
    /* visibility además del transform: si la transición se queda a medias
       (pestaña en segundo plano, rAF estrangulado), el cajón cerrado no debe
       poder recibir toques. El transform solo no lo garantiza. */
    visibility: hidden;
    box-shadow: var(--sombra-modal);
    transition: transform var(--d3) var(--curva), visibility 0s linear var(--d3);
  }
  .sidebar.abierta, .rail.abierta {
    transform: none; visibility: visible;
    transition: transform var(--d3) var(--curva), visibility 0s;
  }
  .main-col { min-height: 100dvh; }
  .contenido { padding-bottom: calc(var(--barra-inf) + var(--s9)); }
  .barra-inferior { display: flex; }

  .topbar { padding: 0 var(--s5); }
  .topbar-fecha, .buscador-global .tecla-atajo { display: none; }
  .buscador-global { flex: 1 1 auto; }
  .buscador-global input { padding-right: var(--s4); }
  .wb { gap: var(--s2) var(--s3); padding: var(--s5) var(--s5) var(--s4); }
  .wb h1, .wb-titulo { font-size: var(--t20); }
  /* Las acciones del encabezado envuelven: en Agenda medían 573px y el botón
     primario quedaba fuera de pantalla con 195px de scroll horizontal. */
  .wb-acciones { flex-wrap: wrap; justify-content: flex-start; margin-left: 0; width: 100%; }
  .tabla-wrap { margin: 0; border-radius: 0; border-left: 0; border-right: 0; }
  .paginacion, .pie-tabla { margin: 0 0 var(--s5); border-radius: 0; border-left: 0; border-right: 0; }
  .metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .metrica { padding: var(--s5); }
  .metrica-valor { font-size: var(--t24); }
  .ws { padding: 0 var(--s5) var(--s7); gap: var(--s5); }

  /* El deslizamiento y el popover fijo viven en el bloque de 1024; aquí solo
     se aprieta el respiro. */
  .barra-filtros { padding: var(--s2) var(--s5); }
  .buscar { flex: 1 0 190px; }

  /* En teléfono el documento fluye: sin tope de alto y sin scroller propio.
     Un scroller anidado en un móvil es la forma más rápida de dejar a alguien
     atrapado dentro de una tabla. */
  .tabla-wrap { max-height: none; overscroll-behavior: auto; }

  /* Tabla → lista de dos líneas. Solo las tablas marcadas .tabla-lista:
     las demás siguen desplazándose en horizontal dentro de .tabla-wrap. */
  /* OJO CON LA ESPECIFICIDAD: la regla base es `table.tabla tbody td` (0,1,3).
     Escrito como `.tabla-lista tbody td` (0,1,2) PIERDE, el td conserva
     height:var(--fila) y cada registro se infla a 259 px. Medido. Por eso
     todas las reglas de este bloque llevan el prefijo `table.tabla`. */
  table.tabla.tabla-lista,
  table.tabla.tabla-lista tbody,
  table.tabla.tabla-lista tr,
  table.tabla.tabla-lista td { display: block; width: auto; }
  table.tabla.tabla-lista thead { display: none; }
  table.tabla.tabla-lista tbody tr {
    position: relative;
    padding: var(--s4) var(--contenido-x);
    border-bottom: 1px solid var(--linea);
  }
  table.tabla.tabla-lista tbody td {
    height: auto; min-height: 0; padding: 0; border: 0;
    display: flex; align-items: baseline; gap: var(--s4);
    font-size: var(--t12); line-height: 1.35; white-space: normal;
  }
  table.tabla.tabla-lista tbody td::before {
    content: attr(data-etq);
    flex: none; width: 78px;
    font-size: var(--t11); color: var(--ink-3);
  }
  table.tabla.tabla-lista tbody td[data-etq=""]::before { content: none; }
  table.tabla.tabla-lista td.principal {
    font-size: var(--t14); font-weight: 600; color: var(--ink);
    margin-bottom: 2px; padding-right: 34px;
  }
  table.tabla.tabla-lista td.principal::before { content: none; }
  /* Los datos cortos van EN UNA LÍNEA, no uno por renglón: así el registro
     baja de 122 px a ~72 px y caben 8 personas en un teléfono en vez de 5. */
  table.tabla.tabla-lista td.compacta-movil {
    display: inline-flex; width: auto; margin-right: var(--s5);
  }
  table.tabla.tabla-lista td.compacta-movil::before { content: none; }
  table.tabla.tabla-lista td.compacta-movil[data-etq="Semanas"]::after {
    content: " sem"; color: var(--ink-3);
  }
  table.tabla.tabla-lista td.tira { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  table.tabla.tabla-lista td.tira::before { content: none; }
  table.tabla.tabla-lista td.sel { position: absolute; top: var(--s4); right: var(--contenido-x); display: block; }

  .barra-sel { left: var(--s5); right: var(--s5); bottom: calc(var(--barra-inf) + var(--s4)); transform: none; max-width: none; flex-wrap: wrap; }
  /* Los toasts también suben: si no, caen encima de la barra de navegación. */
  #tops { bottom: calc(var(--barra-inf) + var(--s4)); }

  /* Mi día: la densidad cede donde se usa con una mano y bajo el sol.
     Los rótulos NO se vuelven glifos: «Llamar», «Mapa», «Capturar». */
  .visita { flex-wrap: wrap; padding: var(--s5); }
  .visita-acciones { width: 100%; margin-top: var(--s4); gap: var(--s3); }
  .visita-acciones .btn { flex: 1 1 0; min-width: 0; }
  .grupo-cabecera { top: calc(var(--wb-h) + var(--vistas-h)); }

  /* Expediente: los campos vuelven a rótulo-encima solo aquí, donde no hay
     ancho para dos columnas. */
  .campos, .campos-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s1) 0; }
  .campos > label { margin-top: var(--s4); }
  .campos > .ancho { grid-column: auto; }
  .vitales { gap: var(--s2) var(--s5); }
  .exp-id { flex-wrap: wrap; gap: var(--s2) var(--s4); }
  .exp-id h1 { font-size: var(--t16); }

  .ficha-fondo { padding: 0; align-items: flex-end; }
  .ficha-caja { width: 100%; max-height: 92dvh; border-radius: var(--r-caja) var(--r-caja) 0 0; }
  .ficha-opciones { grid-template-columns: minmax(0, 1fr); }
  .ficha-pie .btn { flex: 1 1 0; }

  .cifras { gap: var(--s3) var(--s5); font-size: var(--t12); }
  .lienzo-mapa { height: 58dvh; }
  .paginacion, .pie-tabla { flex-wrap: wrap; gap: var(--s3); justify-content: center; }
  /* Calculadora en teléfono: la Tasa (columna 5) ya cede desde 1440px; la
     Edad al liquidar (columna 6) SE QUEDA — es la que aplica la regla de los
     83 y ocultarla aquí la mataba en móvil (hallazgo alto de auditoría). */
  .calc-salida table.tabla { min-width: 480px; }
  /* Agenda en vista Semana: 7 días no caben en 360 px; la tabla conserva un
     ancho legible y desliza. La vista Día no se toca. */
  table.tabla.agenda-semana { min-width: 640px; }
}

@media (max-width: 399.98px) {
  :root { --contenido-x: var(--s4); }
  .visita-acciones { flex-wrap: wrap; }
  .visita-acciones .btn { flex: 1 1 44%; }
  .tabla-lista tbody td::before { width: 66px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   25 · IMPRESIÓN — el expediente se le deja al cliente en papel
   ═════════════════════════════════════════════════════════════════════════ */
@media print {
  @page { margin: 12mm; }
  html { font-size: 11pt; }
  body { background: #fff; color: #000; font-size: 10pt; }
  .sidebar, .rail, .topbar, .barra-inferior, .wb-acciones, .barra-filtros,
  .vistas, .barra-sel, #tops, .ficha-fondo, .paginacion, .btn, .no-imprimir,
  .rail-buscar, .banner-offline, .accion-hover, .cajon, .cajon-fondo { display: none !important; }
  .app-shell { display: block; }
  .contenido, .zona { padding: 0; }
  .wb { position: static; height: auto; border-bottom: 2px solid #000; padding: 0 0 6pt; }
  .bloque, .card-crm { border: 1px solid #999; break-inside: avoid; box-shadow: none; }
  .bloque > .cab, .card-crm .card-head { background: #fff; border-bottom: 1px solid #999; }
  .tabla-wrap { max-height: none; overflow: visible; }
  table.tabla thead th, .table-crm thead th { position: static; background: #fff; color: #000; border-bottom: 1px solid #000; }
  table.tabla tbody td, .table-crm tbody td { border-bottom: 1px solid #ddd; }
  tr, .visita, .libro .renglon { break-inside: avoid; }
  a { color: #000; text-decoration: none; }
  .tag, .tag-solido, .pastilla, .badge-estado, .foco { color: #000; background: none; }
  .cifra .dec, .cifra .uni { color: #444; }
}

/* ═════════════════════════════════════════════════════════════════════════
   26 · MOVIMIENTO REDUCIDO — va al final para que gane siempre
   ═════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}