/* ============================================================
   luzgasia — colaborador.css
   Área PRIVADA del colaborador (referidos): acceso + dashboard.
   Vanilla, CSP-safe. Consume tokens de tokens.css; reutiliza los
   componentes de base.css (.campo, .boton__spinner, .alerta). Estética
   v2 (papel + navy + gota); ámbar SOLO en la cifra de dinero y el CTA
   primario. Movimiento tras prefers-reduced-motion.
   ============================================================ */

.co-cuerpo {
  --co-linea: var(--lz-linea);
  --co-carta: #ffffff;
  background: var(--lz-papel);
  color: var(--lz-tinta);
}
.co-main { min-height: 100vh; position: relative; isolation: isolate; }
.co-cuerpo *,
.co-cuerpo *::before,
.co-cuerpo *::after { box-sizing: border-box; }

/* ============================================================
   `hidden` DEBE GANAR SIEMPRE  (§6.36 y §6.70 — ya explotó DOS veces)
   El `[hidden] { display: none }` del navegador lo pisa CUALQUIER
   `display:` de autor, por poca especificidad que tenga. En `area.css`
   costó un campo fantasma; en `funnel.css` costó enseñar y REGISTRAR dos
   consentimientos de otra vía — un fallo legal, no de maqueta.
   Aquí la regla es GENÉRICA a propósito: una lista de clases hay que
   acordarse de ampliarla y esto se rompe EN SILENCIO (sin error de
   consola, sin test rojo).
   REGLA PARA QUIEN EDITE DESPUÉS: si un bloque se oculta por atributo y
   necesita `display:`, escríbelo con `:not([hidden])` — como ya hacen
   `.co-tabs__panel:not([hidden])` y `[data-tickets-vista]:not([hidden])`.
   Un selector posterior de la misma especificidad ganaría por orden.
   ============================================================ */
.co-panel [hidden],
.co-panel[hidden],
.co-expediente [hidden],
.co-expediente[hidden],
/* La barra de pestañas va aparte porque NO está dentro de ningún panel, y
   su badge de novedades nace vacío y `hidden`: sin esta línea saldría un
   pill vacío encendido en el menú desde la primera carga. */
.co-nav [hidden] { display: none; }

/* Fondo navy para las puertas de acceso (login/registro/verificar/reset). */
.co-cuerpo--acceso {
  /* Navy PLANO. Llevaba un domo radial de luz arriba y, encima, las «auroras»
     circulares del fondo compartido — al dueño no le gustó el efecto de luz
     circular en esta puerta (2026-08-15) y se retira ENTERO aquí: fuera el
     domo, fuera las auroras y fuera el resplandor de esquina del panel navy.
     La malla de puntos se queda: es textura, no un foco. Las puertas del área
     y del panel no cambian (el parcial es compartido; esto es un ámbito). */
  background: var(--c-marino-950);
  color: var(--c-texto-inverso);
}
.co-cuerpo--acceso .acceso-fondo__aurora,
.co-cuerpo--acceso .acceso-fondo__haz { display: none; }
/* Alineada ARRIBA, no flotando en el centro (petición del dueño 2026-08-15:
   «que use mejor el espacio también de arriba abajo»). El centrado partía el
   alto sobrante en dos bloques muertos, y el padding superior de hasta 8rem
   los agrandaba. El mínimo de 5rem sigue ahí para librar la cabecera fija. */
.co-cuerpo--acceso .co-main {
  display: grid;
  justify-items: center;
  align-items: start;
  padding: clamp(5rem, 8vh, 6rem) 1.25rem clamp(2rem, 5vh, 3rem);
}

/* =================== BOTONES (co-*) =================== */
.co-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--fuente-marca);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  padding: 0.85rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: var(--radius-gota-s);
  cursor: pointer;
  transition: transform var(--dur-v2-1) var(--ease-gota),
              box-shadow var(--dur-v2-2) var(--ease-salida-v2),
              border-radius var(--dur-v2-2) var(--ease-salida-v2),
              background var(--trans-rapida);
}
.co-boton:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 3px; }
.co-cuerpo--acceso .co-boton:focus-visible { outline-color: var(--c-foco-inverso); }
.co-boton--ancho { width: 100%; }
.co-boton--primario {
  background: var(--c-amarillo-500);
  color: var(--c-marino-950);
  box-shadow: var(--sombra-2);
}
.co-boton--primario:hover:not([disabled]) {
  transform: translateY(-2px);
  border-radius: var(--radius-vivo);
  box-shadow: var(--sombra-3);
}
.co-boton--primario:active { transform: translateY(0); }
.co-boton--sutil {
  background: var(--c-marino-50);
  color: var(--c-marino-700);
  border-color: var(--c-borde);
  padding: 0.55rem 0.9rem;
  font-size: var(--texto-s);
}
.co-boton--sutil:hover:not([disabled]) { border-color: var(--c-borde-fuerte); border-radius: var(--radius-vivo); }
.co-boton--sutil.es-copiado { background: var(--c-exito-fondo); color: var(--c-exito); border-color: var(--c-exito); }
.co-boton--peligro {
  background: transparent;
  color: var(--c-error);
  border-color: var(--c-error);
}
.co-boton--peligro:hover:not([disabled]) { background: var(--c-error-fondo); border-radius: var(--radius-vivo); }
.co-boton[disabled], .co-boton.cargando { opacity: 0.7; cursor: not-allowed; transform: none; box-shadow: none; }
/* Spinner reutilizando la marca de base.css (co-boton no es .boton). */
.co-boton .boton__spinner {
  display: none; width: 1.05em; height: 1.05em;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
}
.co-boton.cargando .boton__spinner { display: inline-block; animation: nz-girar 0.8s linear infinite; }

/* =================== ALERTAS (co-*) ===================
   Mismo rediseno que .alerta de base.css (2026-08-13): borde fino completo +
   punto de estado + texto en tinta. La banda izquierda con fondo pastel era
   el cliche de IA que el dueno pidio quitar de toda la web. */
.co-alerta {
  position: relative;
  margin: 0.85rem 0 0;
  padding: 0.7rem 0.95rem 0.7rem 2.2rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  color: var(--c-marino-900);
  font-size: var(--texto-s);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  box-shadow: 0 1px 3px rgba(6, 16, 31, 0.06);
}
.co-alerta::before {
  content: "";
  position: absolute; left: 0.9rem; top: 0.95rem;
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--c-borde-fuerte);
}
.co-alerta--error { border-color: #eecdca; }
.co-alerta--error::before { background: var(--c-error); }
.co-alerta--aviso { border-color: #ecdcbe; }
.co-alerta--aviso::before { background: var(--c-aviso); }
.co-alerta--exito { border-color: #c8e6d8; }
.co-alerta--exito::before { background: var(--c-exito); }

.co-nota-seguridad {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  margin: 1rem 0 0; text-align: left;
}
.co-cuerpo--acceso .co-nota-seguridad { color: var(--lg-text-muted); }
.co-nota-seguridad svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; }
.co-nota-seguridad--compacta { margin-top: 0.75rem; }

.co-enlace-sutil {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--c-marino-600); font: inherit; font-size: var(--texto-s); font-weight: 600;
  text-decoration: none;
}
.co-cuerpo--acceso .co-enlace-sutil { color: var(--lg-blue-light); }
.co-enlace-sutil:hover { text-decoration: underline; }
/* Variante para un <button> DENTRO de un parrafo de ayuda (reenviar
   verificacion): subrayado siempre, para que se lea como accion y no como
   texto; hereda el tamano pequeno del parrafo que lo envuelve. */
.co-enlace-boton { text-decoration: underline; font-size: inherit; }
.co-enlace-boton:disabled { opacity: 0.6; cursor: wait; }

.co-sub { font-family: var(--fuente-marca); font-weight: 600; font-size: var(--texto-l); margin: 0 0 0.8rem; }
.campo__area { min-height: 6rem; resize: vertical; font: inherit; }

/* =================== ACCESO =================== */
.co-acceso { width: 100%; max-width: 30rem; }
.co-acceso__tarjeta {
  background: var(--co-carta);
  color: var(--lz-tinta);
  border-radius: var(--radius-gota);
  padding: clamp(1.75rem, 5vw, 2.75rem);
  box-shadow: var(--sombra-4);
  text-align: center;
}

/* Puerta ANCHA en dos paneles (rediseño 2026-08-09, solo el acceso
   principal — reset/verificar siguen con la tarjeta compacta), sobre el
   fondo compartido de acceso.css. El registro reparte su contenido en
   columnas en vez de scrollear en una tira estrecha. */
.co-acceso--puerta { max-width: 68rem; }
.co-acceso--puerta .co-acceso__tarjeta {
  padding: 0;
  overflow: clip;
  display: grid;
  text-align: left;
  /* El lienzo de la puerta es NAVY con borde AZUL (2026-08-10): con el
     fondo claro de la tarjeta base asomaba un filo blanco alrededor de
     la zona azul. La columna clara la pinta .co-acceso__forma. */
  background: var(--c-marino-900);
  border: 1px solid color-mix(in srgb, var(--lg-blue) 45%, transparent);
}
.co-acceso--puerta .co-acceso__forma { background: var(--co-carta); }
/* El alto de la tarjeta lo fija el lado NAVY; con Entrar (dos campos) o
   Recuperar (uno) el panel claro dejaba ~190 px muertos. El primer intento fue
   centrar el bloque (`margin-block: auto`) y el dueño lo rechazó con razón:
   dos bloques de aire arriba y abajo (2026-08-15, «debería usar uniforme todo
   el alto, contenido espaciado»). Ahora el bloque de pestañas LLENA la columna
   y el sobrante se reparte DENTRO del panel activo, entre sus bloques —
   botonera arriba, formulario respirando por el medio, ayuda al fondo.

   Con «Crear cuenta» (más alta que el lado navy) no hay sobrante: todo fluye
   desde arriba y la tarjeta crece, como siempre. Ojo con la ANIMACIÓN de
   escaneo: los retardos van por :nth-child de los hijos del panel — este
   reparto no añade, envuelve ni reordena ningún hijo, solo los separa. */
.co-acceso--puerta .co-acceso__forma { display: flex; flex-direction: column; }
.co-acceso--puerta .co-acceso__forma > .co-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.co-acceso--puerta .co-tabs__panel:not([hidden]) {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: 0.4rem;
}
/* El formulario del panel también reparte SUS filas cuando le sobra alto
   (email/contraseña arriba, botón abajo). SIN tocar su `display`: el login a
   pantalla ancha es una rejilla de dos columnas (regla de más abajo) y
   convertirlo en flex-columna la desharía — `align-content` reparte filas
   igual en rejilla que en flujo normal (navegadores actuales); donde no
   exista, el formulario simplemente queda arriba, que es lo de hoy. */
.co-acceso--puerta .co-tabs__panel:not([hidden]) > .co-forma:not([hidden]) {
  flex: 1;
  align-content: space-evenly;
}
@media (min-width: 60rem) {
  .co-acceso--puerta .co-acceso__tarjeta { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
}
.co-acceso__lado {
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.8rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  /* Sin el resplandor radial de la esquina: mismo veto del efecto de luz
     circular que el fondo de esta puerta. */
  background: var(--c-marino-900);
  color: var(--c-blanco);
}
.co-acceso__lado .co-acceso__sello { margin: 0; background: rgba(255, 255, 255, 0.1); color: var(--c-amarillo-400); }
.co-acceso__lado .co-nota-seguridad {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.82);
}
.co-acceso__forma { padding: clamp(1.5rem, 4vw, 2.5rem); }
.co-acceso__tarjeta--centro { display: grid; gap: 0.4rem; justify-items: stretch; }
.co-acceso__sello {
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem; margin: 0 auto 1rem;
  border-radius: 50% 50% 50% 0.4rem;
  background: var(--c-marino-50); color: var(--c-marino-700);
}
.co-acceso__sello svg { width: 1.7rem; height: 1.7rem; }
.co-acceso__titulo { font-family: var(--fuente-marca); font-size: var(--texto-2xl); margin: 0 0 0.4rem; }
.co-acceso__intro { color: var(--lz-tinta-suave); margin: 0 0 1.2rem; font-size: var(--texto-s); }
.co-acceso__pies { display: flex; justify-content: center; gap: 1.2rem; margin-top: 1.2rem; flex-wrap: wrap; }
.co-acceso__lado .co-acceso__titulo { margin: 0; color: inherit; }
.co-acceso__lado .co-acceso__intro { margin: 0; color: rgba(255, 255, 255, 0.78); max-width: 26rem; }
.co-acceso__lado .co-acceso__pies { justify-content: flex-start; margin-top: 0.6rem; }
.co-acceso__lado .co-nota-seguridad { margin-top: 0.4rem; padding: 0.6rem 0.8rem; border-radius: var(--radio-m); }
.co-acceso__lado .co-enlace-sutil { color: var(--c-amarillo-400); }

/* El login también reparte en dos columnas cuando hay sitio. */
@media (min-width: 56rem) {
  .co-acceso--puerta [data-co-login] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.4rem; align-items: start; }
  .co-acceso--puerta [data-co-login] .co-boton { grid-column: 1 / -1; }
  /* El reto (Turnstile) a lo ancho como el botón; si no, queda en media
     columna con hueco a la derecha bajo "Contraseña" (lo mismo que ya hacen
     el login de área y el registro de colaborador). */
  .co-acceso--puerta [data-co-login] .reto-captcha { grid-column: 1 / -1; }
}

/* Registro en DOS columnas con sitio: campos y consentimiento a la
   izquierda, la información de privacidad (capa 1 RGPD, SIEMPRE a la
   vista antes de la casilla) y la regla del programa a la derecha. */
.co-forma__campos { display: grid; gap: 0.9rem; align-content: start; }
.co-forma__info { display: grid; gap: 0.9rem; margin-block: var(--esp-3); align-content: start; }
.co-forma__info .co-privacidad, .co-forma__info .co-regla { margin-block: 0; }
@media (min-width: 56rem) {
  .co-forma--registro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 1.4rem;
    row-gap: 0.9rem;
    align-items: start;
  }
  .co-forma--registro .co-forma__campos { grid-column: 1; grid-row: 1; }
  .co-forma--registro .co-forma__info { grid-column: 2; grid-row: 1 / span 2; margin-block: 0; }
  .co-forma--registro .co-consent { grid-column: 1; grid-row: 2; align-self: end; }
  /* El reto (Turnstile) va a lo ancho bajo las dos columnas, antes del botón;
     así no descuadra la rejilla ni queda en media columna. Solo aparece con el
     captcha encendido (apagado, el parcial no pinta nada). */
  .co-forma--registro .reto-captcha { grid-column: 1 / -1; grid-row: 3; }
  .co-forma--registro .co-boton { grid-column: 1 / -1; grid-row: 4; margin-top: 0.4rem; }

  /* La capa 1 RGPD queda A LA VISTA junto a los campos (nunca detrás de
     un enlace), pero con su propio scroll interno: la tarjeta no se
     estira más que la columna de campos. */
  .co-forma--registro .co-privacidad {
    max-height: 24rem;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.co-tabs__lista {
  display: flex; gap: 0.25rem; padding: 0.28rem;
  background: var(--c-marino-50); border-radius: var(--radio-pill); margin-bottom: 1.3rem;
}
.co-tabs__tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--texto-s); color: var(--c-texto-suave);
  padding: 0.55rem 0.4rem; border-radius: var(--radio-pill);
  transition: background var(--trans-rapida), color var(--trans-rapida);
}
.co-tabs__tab.es-activa { background: var(--co-carta); color: var(--c-marino-900); box-shadow: var(--sombra-1); }
.co-tabs__tab:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }

/* Cambio de opción con el gesto de la CASA (2026-08-10): el barrido
   láser del escáner recorre el panel y los bloques se van imprimiendo
   tras él — importa aquí más que en ningún sitio porque los formularios
   cambian mucho de tamaño (login vs registro). La píldora activa asienta
   con la firma gota. Todo tras la puerta de motion. */
@media (prefers-reduced-motion: no-preference) {
  .co-tabs__tab { transition: background 0.25s ease, color 0.25s ease, scale 0.15s ease; }
  .co-tabs__tab:active { scale: 0.96; }
  .co-tabs__tab.es-activa { animation: co-pill-asienta 0.35s var(--ease-gota); }
  @keyframes co-pill-asienta {
    0% { scale: 0.92; }
    100% { scale: 1; }
  }

  .co-tabs__panel { position: relative; }
  .co-tabs__panel:not([hidden])::after {
    content: "";
    position: absolute;
    inset-inline: -0.5rem;
    top: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--lg-blue-light), transparent);
    box-shadow: 0 0 14px color-mix(in srgb, var(--lg-blue-light) 65%, transparent);
    pointer-events: none;
    animation: co-laser 0.65s ease-out both;
  }
  @keyframes co-laser {
    0% { top: 0; opacity: 1; }
    80% { opacity: 1; }
    100% { top: calc(100% - 2px); opacity: 0; }
  }

  .co-tabs__panel:not([hidden]) > * { animation: co-imprime 0.4s cubic-bezier(0.22, 0.7, 0.35, 1) both; }
  .co-tabs__panel:not([hidden]) > :nth-child(2) { animation-delay: 0.08s; }
  .co-tabs__panel:not([hidden]) > :nth-child(3) { animation-delay: 0.16s; }
  .co-tabs__panel:not([hidden]) > :nth-child(n+4) { animation-delay: 0.24s; }
  @keyframes co-imprime {
    from { opacity: 0; translate: 0 10px; }
    to { opacity: 1; translate: 0 0; }
  }

  /* Dentro del registro, los bloques grandes también entran por orden. */
  .co-forma--registro > * { animation: co-imprime 0.4s cubic-bezier(0.22, 0.7, 0.35, 1) both; }
  .co-forma--registro > :nth-child(2) { animation-delay: 0.12s; }
  .co-forma--registro > :nth-child(3) { animation-delay: 0.22s; }
  .co-forma--registro > :nth-child(n+4) { animation-delay: 0.3s; }
}

.co-forma { text-align: left; }
.co-forma .campo:last-of-type { margin-bottom: 1.1rem; }
.co-2fa-paso { margin-top: 0.4rem; }
.co-2fa-paso__intro { font-size: var(--texto-s); color: var(--lz-tinta-suave); margin: 0 0 0.8rem; }
.co-codigo-otp { font-family: var(--fuente-marca); letter-spacing: 0.35em; text-align: center; font-size: 1.3rem; }

.co-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem;
  align-items: start; margin: 0 0 1.1rem; text-align: left;
  font-size: var(--texto-s); color: var(--lz-tinta-suave);
}
.co-consent__check { width: 1.15rem; height: 1.15rem; margin-top: 0.15rem; accent-color: var(--c-marino-700); }
.co-consent a { color: var(--c-marino-600); font-weight: 600; }

/* =================== DASHBOARD: cabecera =================== */
.co-cab {
  position: relative;
  z-index: 2; /* por delante del fondo animado del área */
  background: var(--c-marino-950);
  color: var(--c-texto-inverso);
  padding: clamp(1.1rem, 3vw, 1.6rem) 0;
}
.co-cab__marco {
  max-width: var(--ancho-contenido);
  margin: 0 auto; padding: 0 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.co-cab__saludo { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-xl); margin: 0; }
.co-cab__sub { display: flex; align-items: center; gap: 0.6rem; margin: 0.3rem 0 0; font-size: var(--texto-s); color: var(--lg-text-muted); flex-wrap: wrap; }
.co-cab__pseudo { font-family: var(--fuente-marca); color: var(--c-amarillo-400); letter-spacing: 0.04em; }
.co-salir {
  display: inline-flex; align-items: center; gap: 0.45rem;
  color: var(--c-texto-inverso-suave); text-decoration: none; font-weight: 600; font-size: var(--texto-s);
  padding: 0.5rem 0.85rem; border-radius: var(--radio-pill); border: 1px solid var(--lg-border);
  transition: background var(--trans-rapida), border-color var(--trans-rapida);
}
.co-salir:hover { background: rgba(255,255,255,0.06); border-color: var(--c-texto-inverso-suave); }
.co-salir svg { width: 1.1rem; height: 1.1rem; }

/* =================== DASHBOARD: navegación =================== */
.co-nav {
  position: sticky; top: var(--altura-cabecera); z-index: 2; /* sobre paneles y fondo */
  background: color-mix(in srgb, var(--lz-papel) 92%, transparent);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--co-linea);
}
.co-nav__lista {
  max-width: var(--ancho-contenido); margin: 0 auto; padding: 0 0.75rem;
  display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: thin;
}
.co-nav__paso {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--texto-s); color: var(--lz-tinta-suave);
  padding: 0.95rem 0.9rem; white-space: nowrap;
  border-bottom: 2.5px solid transparent;
  transition: color var(--trans-rapida), border-color var(--trans-rapida);
}
.co-nav__paso:hover { color: var(--lz-tinta); }
.co-nav__paso.es-activa { color: var(--c-marino-900); border-color: var(--c-amarillo-500); }
.co-nav__paso:focus-visible { outline: 2px solid var(--c-foco); outline-offset: -3px; border-radius: var(--radio-s); }
.co-nav__icono svg { width: 1.15rem; height: 1.15rem; display: block; }
/* Badge de novedades (§D6): cuántas cosas le esperan en esa pestaña. Lo
   enciende el sondeo; nace vacío y `hidden` (ver la regla genérica de
   arriba, que incluye `.co-nav [hidden]` justamente por esto). */
.co-nav__badge {
  display: inline-grid; place-items: center;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.35rem;
  border-radius: var(--radio-pill);
  background: var(--c-error); color: var(--c-blanco);
  font-size: var(--texto-xs); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* =================== DASHBOARD: paneles =================== */
.co-paneles { position: relative; z-index: 1; max-width: var(--ancho-contenido); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 1.25rem 4rem; }
.co-panel:focus { outline: none; }
.co-panel__cab { margin-bottom: 1.5rem; }
.co-panel__titulo { font-family: var(--fuente-marca); font-size: var(--texto-2xl); margin: 0; }
.co-panel__intro { color: var(--lz-tinta-suave); margin: 0.5rem 0 0; max-width: 52ch; }

.co-tarjeta {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: clamp(1.25rem, 3vw, 1.75rem);
}
/* Cabecera de tarjeta. Estaban EN USO en la zona Contratos y sin definir:
   el título salía con el tamaño y el margen de un <h3> del navegador. */
.co-tarjeta__titulo {
  font-family: var(--fuente-marca); font-weight: 600; font-size: var(--texto-m);
  margin: 0 0 0.35rem;
}
.co-tarjeta__ayuda { margin: 0 0 1rem; color: var(--lz-tinta-suave); font-size: var(--texto-s); max-width: 62ch; }
.co-tarjeta__titulo + .co-tarjeta__ayuda { margin-top: -0.1rem; }
/* Cabecera con acción a la derecha (filtros, «ver todos»). */
.co-tarjeta__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.co-tarjeta__cab .co-tarjeta__titulo,
.co-tarjeta__cab .co-tarjeta__ayuda { margin: 0; }
.co-vacio {
  padding: 1.5rem; text-align: center; color: var(--lz-tinta-suave);
  background: var(--lz-papel-2); border: 1px dashed var(--co-linea); border-radius: var(--radius-gota-s);
}
.co-vacio--mini { padding: 1rem; font-size: var(--texto-s); }

/* =================== RESUMEN: KPIs =================== */
.co-kpis {
  display: grid; gap: 1rem; margin-bottom: 1.75rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 52rem) { .co-kpis { grid-template-columns: repeat(4, 1fr); } }
.co-kpi {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota-s); padding: 1.1rem 1.25rem;
  display: grid; gap: 0.3rem; align-content: start;
}
.co-kpi--destacada {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--c-marino-900), var(--c-marino-950));
  border-color: var(--lg-border); color: var(--c-texto-inverso);
  border-radius: var(--radius-gota);
  position: relative; overflow: clip;
}
@media (min-width: 52rem) { .co-kpi--destacada { grid-column: span 1; } }
.co-kpi--destacada::after {
  content: ""; position: absolute; inset: auto -20% -60% auto; width: 70%; height: 130%;
  background: radial-gradient(closest-side, rgba(255,138,30,0.28), transparent 70%);
}
.co-kpi__etiqueta { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lz-tinta-suave); font-weight: 700; }
.co-kpi--destacada .co-kpi__etiqueta { color: var(--lg-text-muted); }
.co-kpi__cifra { font-family: var(--fuente-marca); font-weight: 700; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.co-kpi__cifra small { font-size: 0.55em; font-weight: 600; }
.co-kpi__cifra--dinero { color: var(--c-amarillo-400); position: relative; z-index: 1; }
.co-kpi__pie { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
.co-kpi--destacada .co-kpi__pie { color: var(--c-texto-inverso-suave); position: relative; z-index: 1; }

/* =================== RESUMEN: gráficas =================== */
/* Composición "recuadro completo": las dos gráficas igualan altura (sin columna
   coja) y su contenido se centra para llenar la caja sin aire muerto. */
.co-graficas { display: grid; gap: 1.25rem; }
@media (min-width: 52rem) { .co-graficas { grid-template-columns: 1.2fr 1fr; align-items: stretch; } }
.co-grafica {
  margin: 0; background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: 1.25rem 1.5rem;
  display: flex; flex-direction: column;
}
.co-grafica__titulo { font-family: var(--fuente-marca); font-weight: 600; font-size: var(--texto-m); margin-bottom: 1rem; }
.co-grafica > .co-vacio,
.co-grafica > .co-donut,
.co-grafica > .co-embudo { flex: 1; align-content: center; }
/* `:not([hidden])` obligatorio: este `display` tiene la misma especificidad
   que la regla genérica del principio y, por ir después, le ganaría (§6.70). */
.co-grafica > .co-vacio:not([hidden]) { display: grid; place-items: center; }
.co-embudo { width: 100%; height: auto; margin: auto 0; }
.co-embudo__txt { font-family: var(--fuente); font-size: 13px; font-weight: 600; }
.co-embudo__txt--c { fill: #0b1a33; }

.co-donut { display: grid; gap: 1.25rem; align-items: center; grid-template-columns: auto 1fr; }
.co-donut__svg { width: 8.5rem; height: 8.5rem; }
.co-donut__seg { transition: stroke-dasharray var(--dur-v2-3) var(--ease-salida-v2); }
.co-donut__seg--aprobada { stroke: var(--lg-blue); }
.co-donut__seg--pagada { stroke: var(--c-exito); }
.co-donut__seg--pendiente { stroke: var(--lg-blue-light); }
.co-donut__seg--retrocedida { stroke: var(--c-borde-fuerte); }
.co-donut__seg--rechazada { stroke: var(--c-borde); }
.co-donut__total { font-family: var(--fuente-marca); font-weight: 700; font-size: 20px; fill: var(--lz-tinta); }
.co-donut__sub { font-size: 10px; fill: var(--lz-tinta-suave); text-transform: uppercase; letter-spacing: 0.05em; }
.co-leyenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--texto-s); }
.co-leyenda li { display: flex; align-items: center; gap: 0.5rem; }
.co-leyenda strong { margin-left: auto; font-variant-numeric: tabular-nums; }
.co-leyenda__punto { width: 0.75rem; height: 0.75rem; border-radius: 3px 3px 3px 0; flex: none; }
.co-leyenda__punto--aprobada { background: var(--lg-blue); }
.co-leyenda__punto--pagada { background: var(--c-exito); }
.co-leyenda__punto--pendiente { background: var(--lg-blue-light); }
.co-leyenda__punto--retrocedida { background: var(--c-borde-fuerte); }
.co-leyenda__punto--rechazada { background: var(--c-borde); }

/* =================== PASTILLAS DE ESTADO (.co-chip) ===================
   Estilo de la casa (§6.5, petición expresa del dueño): superficie clara,
   borde fino APENAS teñido y UN PUNTO de color como única marca; el texto,
   en tinta. Nada de pastilla rellena de color ni de banda pastel.

   El color viaja en una sola variable (`--chip`): el punto lo pinta y el
   borde lo mezcla. Añadir un estado = UNA línea, y el tema no se puede
   descuadrar por olvidar el borde.

   CINCO familias, y el prefijo importa porque «pendiente» NO significa lo
   mismo en cada una:
     .co-chip--<estado>       estados compartidos (códigos, cuenta, cobro)
     .co-chip--exp-<estado>   los 14 estados del EXPEDIENTE (zona Contratos)
     .co-chip--doc-<estado>   los 4 de UN DOCUMENTO (falta/pendiente/validado/
                              rechazado) — F2. Los pintaba ya la plantilla del
                              detalle y NO tenían regla: los cuatro salían con
                              el mismo punto gris, así que un documento
                              RECHAZADO se veía igual que uno validado en la
                              única pantalla donde eso hay que distinguir.
     .co-chip--tk-<estado>    los 4 estados de un TICKET (Soporte)
     .co-chip--com-<estado>   la COMISIÓN; `.co-chip--pl-<estado>`, el PLAZO
   `.co-badge` es la pastilla rellena anterior: se conserva SOLO como
   compatibilidad mientras la maqueta migra a `.co-chip` (contradice §6.5),
   y comparte ya el aspecto nuevo para que no queden dos estéticas. */
.co-chip,
.co-badge {
  --chip: var(--c-borde-fuerte);
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.15rem 0.65rem 0.15rem 0.5rem;
  border: 1px solid var(--c-borde);
  border-color: color-mix(in srgb, var(--chip) 42%, var(--c-borde));
  border-radius: var(--radio-pill);
  background: var(--c-blanco);
  color: var(--c-texto);
  font-family: var(--fuente); font-weight: 700; font-size: var(--texto-xs);
  line-height: 1.55; white-space: nowrap;
}
.co-chip::before,
.co-badge::before {
  content: ""; flex: none;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--chip);
}

/* Azul = está pasando algo y no hay nada que hacer todavía. */
.co-chip--activo, .co-chip--abierto, .co-chip--aprobada, .co-chip--en_curso,
.co-chip--analizando,
.co-chip--exp-en_curso, .co-chip--exp-analizando,
.co-chip--rot-enviado,
/* Un documento subido está esperando a que LO REVISEMOS NOSOTROS: azul, no
   ámbar. El ámbar de esta pantalla significa «te toca a ti». */
.co-chip--doc-pendiente,
.co-chip--tk-abierto, .co-chip--tk-en_curso,
.co-chip--com-aprobada, .co-chip--pl-programado,
.co-badge--activo, .co-badge--aprobada, .co-badge--abierto { --chip: var(--lg-blue); }

/* Verde = hecho / cobrado. */
.co-chip--pagada, .co-chip--enviado, .co-chip--resuelto,
.co-chip--completo, .co-chip--finalizado, .co-chip--tramitado,
.co-chip--exp-completo, .co-chip--exp-finalizado, .co-chip--exp-tramitado,
.co-chip--rot-aceptado,
.co-chip--doc-validado,
.co-chip--tk-resuelto,
.co-chip--com-pagada, .co-chip--pl-enviado,
.co-badge--pagada, .co-badge--enviado { --chip: var(--c-exito); }

/* Ámbar = está esperando a alguien (y casi siempre a ÉL). */
.co-chip--pendiente, .co-chip--sospechosa,
.co-chip--pendiente_autorizacion, .co-chip--por_valorar, .co-chip--con_reparos,
/* `exp-borrador` es la fase 1: el expediente existe y todavía no se ha dicho de
   quién es. Va en ámbar con los demás porque es lo mismo — está parado
   esperando algo que solo puede hacer él. */
.co-chip--exp-pendiente_autorizacion, .co-chip--exp-borrador,
.co-chip--exp-por_valorar, .co-chip--exp-con_reparos,
.co-chip--rot-pendiente_rellenar, .co-chip--rot-pendiente_documentacion,
.co-chip--doc-falta,
.co-chip--com-pendiente, .co-chip--com-sospechosa, .co-chip--pl-pendiente,
.co-badge--pendiente, .co-badge--sospechosa, .co-badge--en_curso { --chip: var(--c-aviso); }

/* Rojo = alguien ha dicho que NO… o el dinero se ha pasado de fecha.
   `pl-vencido` NO es un estado de la BD (es «pendiente + la fecha ya pasó»,
   derivado con el reloj): va en rojo porque es lo ÚNICO de esta zona sobre lo
   que el colaborador tiene que hacer algo — reclamarlo. */
.co-chip--rechazado, .co-chip--rechazada, .co-chip--exp-rechazado,
.co-chip--rot-cancelado, .co-chip--rot-baja,
.co-chip--doc-rechazado,
.co-chip--com-rechazada, .co-chip--pl-vencido { --chip: var(--c-error); }

/* Gris (el defecto, sin regla): cerrado · anulado · revocado · caducado ·
   pausado · cancelado · retrocedida · inactivo, y sus gemelos exp-/tk-/com-/pl-.
   Una comisión RETROCEDIDA es gris, no roja, a propósito: no es un rechazo,
   es un alta que se cayó después — el porqué lo explica el texto de al lado. */

/* Un chip que el JS todavía no ha rellenado no puede salir como una pastilla
   vacía: mientras no tenga texto, no existe. */
.co-chip:empty { display: none; }

/* Tipo de ticket (consulta/incidencia/cobro/contrato/cuenta): NO es un
   estado, así que no lleva punto ni color — solo clasifica. */
.co-chip--tipo {
  gap: 0; padding-inline: 0.55rem;
  background: var(--c-marino-50);
  color: var(--c-marino-700);
  border-color: var(--c-marino-100);
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.co-chip--tipo::before { display: none; }

/* =================== SUBPESTAÑAS Y PAGINACIÓN ===================
   COMPARTIDAS por las tres zonas paginadas (Contratos `exp_`, Soporte `tk_`
   y Comisiones `com_`): un solo vocabulario para el mismo gesto. Sirven
   igual a un <a href="?exp_estado=…"> del SSR que a un <button> del JS, así
   que el estado activo se reconoce por CUALQUIERA de las tres marcas.
   Con contador dentro: una pastilla a cero se sigue viendo y se puede
   pulsar — esconderla dejaría al colaborador sin saber que existe. */
.co-subtabs {
  display: flex; gap: 0.3rem; flex-wrap: wrap;
  margin: 0 0 1.1rem;
  padding-bottom: 0.15rem;
}
/* En estrecho, en vez de partirse en tres filas, se desliza. */
@media (max-width: 46rem) {
  .co-subtabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
  .co-subtab { scroll-snap-align: start; }
}
.co-subtab {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1px solid var(--co-linea); background: var(--co-carta);
  color: var(--lz-tinta-suave); text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 600; font-size: var(--texto-s);
  padding: 0.42rem 0.85rem; border-radius: var(--radio-pill);
  white-space: nowrap;
  transition: color var(--trans-rapida), border-color var(--trans-rapida), background var(--trans-rapida);
}
.co-subtab:hover { color: var(--lz-tinta); border-color: var(--c-borde-fuerte); }
.co-subtab:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-subtab.es-activa,
.co-subtab[aria-current],
.co-subtab[aria-selected="true"] {
  background: var(--c-marino-900); border-color: var(--c-marino-900);
  color: var(--c-texto-inverso);
}
/* El contador va DENTRO de la pastilla y con ancho tabular: al cambiar de
   filtro los números no bailan. */
.co-subtab__n {
  font-variant-numeric: tabular-nums;
  color: var(--lz-tinta-suave); font-weight: 700;
}
.co-subtab.es-activa .co-subtab__n,
.co-subtab[aria-current] .co-subtab__n,
.co-subtab[aria-selected="true"] .co-subtab__n { color: var(--c-amarillo-400); }
/* Pastilla que reclama algo: punto de aviso, nunca fondo rojo (§6.5). */
.co-subtab--accion::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--c-aviso); flex: none;
}
@media (prefers-reduced-motion: no-preference) {
  .co-subtab { transition: color var(--trans-rapida), border-color var(--trans-rapida), background var(--trans-rapida), scale var(--dur-v2-1) var(--ease-gota); }
  .co-subtab:active { scale: 0.97; }
}

.co-paginacion {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.6rem 1rem; flex-wrap: wrap;
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--co-linea);
}
.co-paginacion__info { margin: 0; font-size: var(--texto-s); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.co-paginacion__botones { display: flex; gap: 0.5rem; align-items: center; }
/* Un extremo de la lista se DESACTIVA, no desaparece: un botón que se va
   mueve los de al lado justo cuando se está pulsando. */
.co-paginacion [aria-disabled="true"] {
  opacity: 0.45; pointer-events: none; cursor: default;
}

/* =================== CÓDIGOS =================== */
.co-crear-codigo {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
}
/* Acción por defecto = generar aleatorio (sin teclear): etiqueta opcional +
   botón primario. El slug se teclea solo si el colaborador "Personaliza". */
.co-crear-codigo__campos { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 44rem) { .co-crear-codigo__campos { grid-template-columns: 1fr auto; } }
.co-crear-codigo .campo { margin-bottom: 0; }
.co-crear-codigo button { margin-bottom: 0; }

/* Bloque de personalización del slug (oculto por defecto). */
.co-crear-codigo__personalizar { margin-top: 1rem; }
.co-crear-codigo__personalizar .campo { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  .co-crear-codigo__personalizar:not([hidden]) {
    animation: co-entra var(--dur-v2-2) var(--ease-salida-v2) both;
  }
}
.co-crear-codigo__pie {
  display: flex; align-items: center; gap: 0.75rem 1.1rem; flex-wrap: wrap;
  margin-top: 0.9rem;
}
.co-crear-codigo__toggle { display: inline-flex; align-items: center; gap: 0.4rem; }
.co-crear-codigo__toggle svg { width: 1rem; height: 1rem; transition: transform var(--trans-media); }
.co-crear-codigo__toggle[aria-expanded="true"] svg { transform: rotate(45deg); }
.co-crear-codigo__nota {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin: 0; font-size: var(--texto-s); color: var(--lz-tinta-suave);
}
.co-crear-codigo__nota svg { width: 1rem; height: 1rem; flex: none; color: var(--c-marino-600); }

/* `minmax(0, 1fr)` + `min-width: 0`, y no es cosmética: un track IMPLÍCITO de
   grid se dimensiona `auto`, y un track `auto` NO PUEDE encoger por debajo del
   min-content de su hijo más ancho (§6.76). Medido a 390 px: la tarjeta salía
   362 px dentro de un contenedor de 350 y se derramaba 12 px fuera. */
.co-codigos { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.co-codigo {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: 1.1rem 1.35rem;
  display: grid; gap: 0.85rem; min-width: 0;
  grid-template-columns: minmax(0, 1fr);
  transition: box-shadow var(--dur-v2-2) var(--ease-salida-v2), opacity var(--trans-media);
}
.co-codigo > * { min-width: 0; }
/* El `<input>` tiene ancho INTRÍNSECO por su atributo `size` implícito (~20
   caracteres): sin esto arrastra a toda la tarjeta en pantallas estrechas. */
.co-codigo__url { width: 100%; }
.co-codigo:hover { box-shadow: var(--sombra-2); }
.co-codigo.es-inactivo { opacity: 0.6; }
.co-codigo__cab { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.co-codigo__slug { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); }
.co-codigo__etiqueta { font-size: var(--texto-s); color: var(--lz-tinta-suave); }
.co-codigo__enlace { display: flex; gap: 0.5rem; align-items: center; }
.co-codigo__url {
  flex: 1; min-width: 0; padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--co-linea); border-radius: var(--radio-s);
  background: var(--lz-papel-2); color: var(--lz-tinta-suave);
  font-size: var(--texto-s); font-family: var(--fuente);
}
.co-codigo__pie { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; font-size: var(--texto-s); color: var(--lz-tinta-suave); }
.co-codigo__metrica strong { color: var(--lz-tinta); font-variant-numeric: tabular-nums; }
.co-codigo__desactivar { color: var(--c-error); margin-left: auto; }

/* =================== COMISIONES =================== */
.co-comisiones { display: grid; gap: 1.25rem; }
.co-comision {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: 1.25rem 1.5rem;
}
.co-comision__cab { display: flex; align-items: center; gap: 0.5rem 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.co-comision__importe { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-xl); color: var(--c-amarillo-500); }
.co-comision__fecha { font-size: var(--texto-s); color: var(--lz-tinta-suave); margin-left: auto; }
/* De dónde sale esta comisión: un expediente que él tramitó (con el nombre que
   ÉL aportó y enlace al detalle) o un alta por su enlace de referido, que es
   progreso ANÓNIMO — ahí no hay nombre que enseñar (§6.25). */
.co-comision__origen {
  display: flex; align-items: center; gap: 0.5rem 0.75rem; flex-wrap: wrap;
  margin: 0 0 0.9rem; font-size: var(--texto-s); color: var(--lz-tinta-suave);
}
.co-comision__origen strong { color: var(--lz-tinta); font-weight: 600; overflow-wrap: anywhere; }
.co-comision__progreso { margin-inline-start: auto; font-variant-numeric: tabular-nums; }
/* Un retroceso se EXPLICA, y sin cifra de meses (la ventana de retroceso es
   dato interno del contrato con la comercializadora, §6.8). */
.co-comision__nota {
  margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--co-linea);
  font-size: var(--texto-s); color: var(--lz-tinta-suave);
}
.co-plazos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 44rem) { .co-plazos { grid-template-columns: repeat(3, 1fr); } }
.co-plazo {
  display: grid; gap: 0.15rem; justify-items: center; text-align: center;
  padding: 0.9rem 0.75rem; border-radius: var(--radius-gota-s);
  border: 1px solid var(--co-linea); background: var(--lz-papel-2);
}
.co-plazo--enviado { border-color: var(--c-exito); background: var(--c-exito-fondo); }
.co-plazo--cancelado { opacity: 0.65; }
.co-plazo__marca { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--co-carta); border: 1.5px solid var(--co-linea); margin-bottom: 0.25rem; }
.co-plazo--enviado .co-plazo__marca { color: var(--c-exito); border-color: var(--c-exito); }
.co-plazo--cancelado .co-plazo__marca { color: var(--c-error); }
.co-plazo__marca svg { width: 1.05rem; height: 1.05rem; }
.co-plazo__punto { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c-borde-fuerte); }
.co-plazo__num { font-size: var(--texto-xs); color: var(--lz-tinta-suave); text-transform: uppercase; letter-spacing: 0.04em; }
.co-plazo__importe { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); font-variant-numeric: tabular-nums; }
.co-plazo__fecha { font-size: var(--texto-s); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.co-plazo__estado { font-size: var(--texto-xs); font-weight: 700; color: var(--lz-tinta-suave); }
.co-plazo--enviado .co-plazo__estado { color: var(--c-exito); }
/* VENCIDO no es un estado de la BD: es «pendiente + la fecha ya pasó», y lo
   deriva el JS con el reloj del navegador (el SSR no tiene «hoy» en su
   contexto). Por eso vive en una clase aparte y NO en la familia
   `--<estado>`: el día que el servidor mande el dato, se calca aquí y el JS
   deja de tocarlo. */
.co-plazo--vencido { border-color: var(--c-error); background: var(--c-error-fondo); }
.co-plazo--vencido .co-plazo__marca { color: var(--c-error); border-color: var(--c-error); }
.co-plazo--vencido .co-plazo__estado { color: var(--c-error); }

/* ============================================================
   COMISIONES / COBRO CON PROFUNDIDAD  (spec nivel2-fase2 §D8, F3)

   MISMA COMPOSICIÓN QUE FINANZAS → COBROS DEL PANEL DE ADMIN (§6.74), que es
   la que aprobó el dueño: **la respuesta arriba, el tiempo en medio y la tabla
   abajo**. Y sus dos reglas, que aquí se respetan a la letra:

   · ÁMBAR SOLO EN EL DINERO Y EN LA ACCIÓN, y en el elemento de la CIFRA
     (`.co-resumen__num.es-clave`), NUNCA en su contenedor. En Finanzas el
     `es-clave` estaba en el nodo de fuera y el ámbar no se pintó NUNCA: la
     comisión estimada salió en tinta desde el día uno sin que nadie lo viera.
   · LA FORMA DICE LA CALIDAD DEL DATO Y EL COLOR DE QUIÉN ES. Son DOS
     dimensiones y fundirlas hace que una fecha estimada se lea como exacta:
       FORMA  → `.co-linea__marca` (anillo) = fecha PROGRAMADA · `--real`
                (punto lleno) = fecha de ingreso confirmada por el pagador.
                Hoy TODAS son anillos porque el único dato que llega al
                colaborador es `fecha_programada`; el día que viaje `enviado_at`
                las enviadas se rellenan solas y la leyenda ya lo explica.
       COLOR  → `--co-marca`, el ESTADO del plazo (programado/ingresado/
                vencido/cancelado).

   Un hueco viaja como «—», jamás un 0 (§6.26): en dinero un 0 se lee «no se
   cobra» y aquí eso sería decirle a alguien que no le deben nada.

   OJO CON EL NOMBRE: `.co-linea` (la clase, el eje de tiempo) NO tiene nada
   que ver con `--co-linea` (el token del color de borde, arriba del fichero).
   El prefijo lo fija la spec; el token es anterior. No los mezcles.
   ============================================================ */

/* ---- 1) LA RESPUESTA: la banda de totales ------------------------------- */
.co-resumen-cobros {
  display: grid; gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota);
  padding: clamp(1.1rem, 3vw, 1.5rem);
  margin-bottom: 1.5rem;
  position: relative; overflow: clip;
}
/* Seis cifras: 2×3 en estrecho y 3×2 en cuanto hay sitio. RECTÁNGULO COMPLETO
   en las dos (§6.5), y nunca una fila coja — nada de `auto-fit` con un número
   CONOCIDO de celdas (§6.44/§6.51).
   SEIS EN UNA FILA SE PROBÓ Y SE DESCARTÓ: el carril del área mide 72rem, así
   que a 1366 px cada cifra se quedaba en ~185 px y «Ya debería haber entrado»
   se partía en tres líneas. La media query mira el VIEWPORT, no la caja: aquí
   ese es justo el error que se paga. */
@media (min-width: 46rem) { .co-resumen-cobros { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.co-resumen__dato { display: grid; gap: 0.15rem; align-content: start; min-width: 0; }
@media (min-width: 46rem) {
  .co-resumen__dato + .co-resumen__dato { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--co-linea); }
  /* La primera de CADA fila no lleva regla a la izquierda. */
  .co-resumen-cobros > .co-resumen__dato:nth-child(3n+1) { padding-inline-start: 0; border-inline-start: 0; }
}
.co-resumen__num {
  font-family: var(--fuente-marca); font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); line-height: 1.05;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
/* EL ÁMBAR VA AQUÍ, en la cifra. `es-clave` = el dinero en juego (lo que
   todavía tiene que entrar); `es-atencion` = lo que ya debería haber entrado. */
.co-resumen__num.es-clave { color: var(--c-amarillo-500); }
.co-resumen__num.es-atencion { color: var(--c-error); }
.co-resumen__etq {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--lz-tinta-suave);
}
.co-resumen__sub { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

/* ---- 2) EL TIEMPO: el eje de los plazos --------------------------------- */
.co-tiempo { margin-bottom: 1.5rem; }
.co-tiempo__leyenda {
  margin: 0.25rem 0 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; align-items: center;
}
.co-tiempo__leyenda i { font-style: normal; display: inline-flex; align-items: center; gap: 0.35rem; }
.co-leyenda-pip { display: inline-block; width: 0.8rem; height: 2px; background: var(--c-amarillo-500); }
.co-leyenda-marca {
  display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 2px var(--lz-tinta-suave);
}
.co-leyenda-marca--real { background: var(--lz-tinta-suave); box-shadow: none; }
/* Alturas: «hoy» arriba, los importes pegados a su marca (alternando) y los
   meses en el borde inferior. Tres franjas separadas, para que el día 1 de mes
   —cuando «hoy» y el tick del mes caen en la misma x— no se pisen (§6.74). */
/* Los márgenes laterales NO son decoración: una marca puede caer en el 0 % o
   en el 100 % y su etiqueta de importe va centrada sobre ella (`translateX
   -50%`), así que sin ese hueco la cifra del primer y del último pago se
   cortarían contra el borde de la tarjeta. */
/* El eje tiene ancho MÍNIMO y su propio scroller: en un móvil de 390 px, seis
   meses en 290 px dejaban «JUN 2026» y «JUL» montados. Lo que scrollea es esta
   caja, jamás la página (§6.34). En escritorio nunca llega a desbordar. */
.co-linea-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.co-linea {
  position: relative; height: 9.5rem;
  min-width: 30rem;
  margin: 1.4rem 2rem 0.6rem;
}
.co-linea__eje {
  position: absolute; left: 0; right: 0; top: 50%;
  height: 2px; border-radius: 2px; background: var(--co-linea);
}
.co-linea__mes {
  position: absolute; bottom: 0; transform: translateX(-50%);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--lz-tinta-suave);
  white-space: nowrap; line-height: 1;
}
.co-linea__mes i {
  position: absolute; left: 50%; bottom: 100%;
  width: 1px; height: 3.6rem; margin-bottom: 0.25rem; background: var(--co-linea);
}
/* Un tick pegado al borde se apoya en él en vez de centrarse fuera del eje y
   cortarse por la mitad. */
.co-linea__mes.es-borde-i { transform: translateX(-0.4rem); }
.co-linea__mes.es-borde-i i { left: 0.4rem; }
.co-linea__mes.es-borde-d { transform: translateX(calc(-100% + 0.4rem)); }
.co-linea__mes.es-borde-d i { left: auto; right: 0.4rem; }
.co-linea__hoy {
  position: absolute; top: 1.1rem; bottom: 1.4rem;
  width: 2px; border-radius: 2px; background: var(--c-amarillo-500);
  transform: translateX(-50%); z-index: 0;
}
.co-linea__hoy em {
  position: absolute; top: -1rem; left: 50%; transform: translateX(-50%);
  font-style: normal; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-amarillo-500);
}
/* Cada plazo, clavado en su fecha. COLOR por estado (variable propia con
   respaldo neutro: un estado nuevo sale gris, no descolorido). */
/* LA CAJA DE LA MARCA ES EL PUNTO, Y NADA MÁS. El rótulo FLOTA por encima o por
   debajo (`position: absolute`), no forma parte del flujo.
   Lo contrario —una columna flex con el rótulo dentro— parece igual y no lo es:
   la caja crece con el texto, se centra en el eje, y el PUNTO acaba desplazado
   media etiqueta arriba o abajo. Se vio en el navegador: los puntos quedaban
   repartidos a los dos lados de la línea en vez de clavados sobre ella, que es
   lo único que un eje de tiempo tiene que garantizar. Además, así el rótulo
   nunca comparte franja con los puntos de los vecinos. */
.co-linea__marca {
  --co-marca: var(--c-borde-fuerte);
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 0.9rem; height: 0.9rem;
  z-index: 1;
}
/* Una marca ROTULADA se pone por delante: su etiqueta puede solaparse con la
   de un vecino a tres días de distancia, y la que tiene que ganar es la que
   lleva una decisión detrás (el próximo cobro, lo vencido). */
.co-linea__marca.es-proximo,
.co-linea__marca--vencido { z-index: 2; }
.co-linea__marca--programado { --co-marca: var(--lg-blue); }
.co-linea__marca--enviado { --co-marca: var(--c-exito); }
.co-linea__marca--vencido { --co-marca: var(--c-error); }
/* FORMA: anillo = fecha programada (lo único que hoy conoce el colaborador).
   `--real` la rellena, y solo se pinta cuando viaja una fecha de ingreso
   confirmada. */
.co-linea__punto {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--co-carta);
  box-shadow: 0 0 0 2px var(--co-carta), inset 0 0 0 2.5px var(--co-marca);
}
.co-linea__marca--real .co-linea__punto {
  background: var(--co-marca);
  box-shadow: 0 0 0 2px var(--co-carta);
}
/* El rótulo FLOTA sobre el punto (arriba, o abajo con `es-abajo`): así todos
   los puntos quedan clavados en el eje y las etiquetas ocupan dos franjas
   propias. Fondo OPACO —no translúcido— porque puede caer sobre la línea de
   «hoy», sobre la guía de un mes o sobre el punto de un vecino a tres días de
   distancia, y ahí lo que tiene que leerse es la cifra. */
.co-linea__eur {
  position: absolute; left: 50%; bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.4rem;
  font-size: 0.7rem; font-weight: 800; color: var(--lz-tinta);
  font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1;
  padding: 0.1rem 0.3rem; border-radius: 4px;
  background: var(--co-carta);
}
.co-linea__marca.es-abajo .co-linea__eur {
  bottom: auto; top: 100%;
  margin: 0.4rem 0 0;
}
.co-linea__marca.es-pasado { opacity: 0.55; }
.co-linea__marca.es-proximo .co-linea__eur { color: var(--c-amarillo-500); }
.co-linea__marca.es-proximo .co-linea__punto {
  box-shadow: 0 0 0 2px var(--co-carta), inset 0 0 0 2.5px var(--co-marca),
              0 0 0 5px color-mix(in srgb, var(--c-amarillo-500) 40%, transparent);
}
/* El próximo respira. Reposo = el anillo fijo de arriba; el movimiento entero
   vive DENTRO de la puerta (regla de la casa). */
@media (prefers-reduced-motion: no-preference) {
  .co-linea__marca.es-proximo .co-linea__punto { animation: co-latido 2.6s ease-in-out infinite; }
  @keyframes co-latido {
    0%, 100% { box-shadow: 0 0 0 2px var(--co-carta), inset 0 0 0 2.5px var(--co-marca), 0 0 0 5px color-mix(in srgb, var(--c-amarillo-500) 40%, transparent); }
    50%      { box-shadow: 0 0 0 2px var(--co-carta), inset 0 0 0 2.5px var(--co-marca), 0 0 0 9px color-mix(in srgb, var(--c-amarillo-500) 12%, transparent); }
  }
}

/* ---- 3) LA TABLA: agrupación por mes ------------------------------------ */
.co-mes + .co-mes { margin-top: 1.5rem; }
.co-mes__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; flex-wrap: wrap;
  padding: 0.35rem 0 0.5rem; margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--co-linea);
}
.co-mes__titulo {
  margin: 0; font-family: var(--fuente-marca); font-weight: 700;
  font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--lz-tinta-suave);
}
.co-mes__resumen { font-size: var(--texto-xs); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.co-mes__lista { display: grid; gap: 0.75rem; }
/* Un mes cuyas filas ha escondido el filtro no puede quedarse con su cabecera
   suelta: el JS le pone `hidden` y la genérica de arriba lo apaga. */

/* ---- Filtros (Comisiones y Cobro) --------------------------------------- */
.co-filtros {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.6rem 1rem;
  margin-bottom: 1rem;
}
.co-filtros__campo { display: grid; gap: 0.25rem; min-width: 0; }
.co-filtros__etq {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--lz-tinta-suave);
}
.co-filtros select {
  font: inherit; font-size: var(--texto-s);
  padding: 0.45rem 0.7rem; border-radius: var(--radio-m);
  border: 1px solid var(--co-linea); background: var(--co-carta); color: var(--lz-tinta);
}
.co-filtros select:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
/* Sin JS el filtro por año es un formulario normal y su botón tiene que verse.
   Con JS se esconde: el cambio del `select` ya aplica, y un botón que no hace
   falta pulsar acaba pulsándose dos veces. */
.co-filtros__enviar { margin-inline-start: auto; }
/* NO hay «aviso de filtro puesto» propio aquí, y es a propósito: lo que avisa
   es la PASTILLA marcada con su contador al lado (§6.61 se cumple con el mismo
   patrón que Contratos y Soporte). Un segundo cartel diciendo lo mismo por
   escrito, encima de seis pastillas que ya lo dicen, es ruido. El estado vacío
   del filtro sí lleva su enlace de salida: nadie puede quedarse encerrado. */

/* =================== RANKING =================== */
.co-premio {
  display: flex; gap: 1rem; align-items: center;
  background: linear-gradient(120deg, var(--c-marino-900), var(--c-marino-950));
  color: var(--c-texto-inverso); border-radius: var(--radius-gota);
  padding: 1.1rem 1.4rem; margin-bottom: 1.25rem;
}
.co-premio__icono { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50% 50% 50% 0.4rem; background: rgba(255,138,30,0.15); color: var(--c-amarillo-400); flex: none; }
.co-premio__icono svg { width: 1.5rem; height: 1.5rem; }
.co-premio__titulo { font-family: var(--fuente-marca); font-weight: 600; margin: 0; }
.co-premio__texto { margin: 0.2rem 0 0; font-size: var(--texto-s); color: var(--c-texto-inverso-suave); }

.co-tu-posicion {
  display: flex; align-items: center; gap: 1rem;
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: 1.1rem 1.4rem; margin-bottom: 1.25rem;
}
.co-tu-posicion__num { font-family: var(--fuente-marca); font-weight: 700; font-size: 2.4rem; line-height: 1; color: var(--c-marino-700); }
.co-tu-posicion__num--vacio { color: var(--c-borde-fuerte); }
.co-tu-posicion__label { margin: 0; font-weight: 700; }
.co-tu-posicion__sub { margin: 0.15rem 0 0; font-size: var(--texto-s); color: var(--lz-tinta-suave); }

.co-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; counter-reset: none; }
.co-ranking__fila {
  display: grid; grid-template-columns: 2.2rem 1fr auto auto; gap: 0.75rem; align-items: center;
  padding: 0.75rem 1rem; border-radius: var(--radius-gota-s);
  background: var(--co-carta); border: 1px solid var(--co-linea);
}
.co-ranking__fila.es-tuyo { border-color: var(--c-amarillo-500); box-shadow: 0 0 0 1px var(--c-amarillo-500); }
.co-ranking__fila.es-podio .co-ranking__pos { color: var(--c-marino-900); }
.co-ranking__pos { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); text-align: center; color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.co-ranking__fila.es-podio .co-ranking__pos { position: relative; }
.co-ranking__fila:nth-child(1) .co-ranking__pos { color: #b8860b; }
.co-ranking__pseudo { font-family: var(--fuente-marca); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.co-ranking__tu { font-size: var(--texto-xs); font-weight: 700; color: var(--c-marino-900); background: var(--c-amarillo-100); padding: 0.05rem 0.4rem; border-radius: var(--radio-pill); }
.co-ranking__premio { display: inline-grid; place-items: center; color: var(--c-amarillo-500); }
.co-ranking__premio svg { width: 1.05rem; height: 1.05rem; }
.co-ranking__total { font-variant-numeric: tabular-nums; font-weight: 700; }

/* =================== SOPORTE (tickets) ===================
   Reescrito (§D7). Tres defectos que el dueño VIO en pantalla:

   1. «Se ve todo»: la lista y el detalle se pintaban a la vez porque el
      único conmutador era la clase `es-con-detalle`, que NO TENÍA NI UNA
      REGLA en esta hoja. Ahora son dos hermanos `[data-tickets-vista]`
      EXCLUYENTES por `hidden`, y quien los oculta es el atributo (la regla
      genérica del principio de la hoja). Nada de clases de estado para
      esconder cosas: `hidden` es la única verdad y además lo lee el
      lector de pantalla.
   2. Hueco muerto: `.co-tickets` es una rejilla que recibía altura de más
      (`flex:1`) y, con `align-content` en su valor normal, ESTIRABA sus
      filas — cada tarjeta de ticket medía ~151 px con dos franjas vacías
      de ~57 px. `align-content: start` es el arreglo: las filas miden lo
      que miden y el sobrante se queda abajo.
   3. Móvil: el formulario iba PRIMERO y la lista debajo, así que quien
      entra desde el correo a leer una respuesta se encontraba un
      formulario vacío a pantalla completa.

   Y desde 2026-09-04 son DOS PESTAÑAS INTERNAS (§6.34), lo que se lleva por
   delante los dos carriles y con ellos el defecto 3: crear una consulta y
   leer una respuesta son dos cosas distintas y ninguna estorba a la otra.
   Cada una usa el ancho entero.
   ================================================================= */
.co-soporte__vistas { min-width: 0; }
/* Las dos vistas (lista / detalle) ocupan el mismo sitio y solo hay una.
   `:not([hidden])` es obligatorio aquí: sin él este `display` le ganaría
   al `hidden` y volveríamos al defecto 1 (§6.70). */
.co-soporte__vistas > [data-tickets-vista]:not([hidden]) { display: block; min-width: 0; }

.co-nuevo-ticket {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.co-nuevo-ticket > .co-tarjeta__titulo { font-size: var(--texto-l); }
/* El formulario NO se estira a los 76rem del carril: una caja de texto de
   un metro de ancho se lee peor y parece un error de maqueta. Los tres
   selectores cortos van en rejilla y el asunto y el mensaje, a lo ancho. */
.co-nuevo-ticket__form { margin-top: 1rem; max-width: 54rem; }
.co-nuevo-ticket__form .co-ticket-campos {
  display: grid; gap: 0 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
}

.co-tickets__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem 1rem; flex-wrap: wrap; }
.co-tickets__cab .co-sub { margin: 0 0 0.6rem; }

.co-tickets {
  display: grid; gap: 0.5rem;
  /* EL arreglo del hueco de 57 px: sin esto las filas se estiran. */
  align-content: start;
}
.co-ticket {
  display: grid; gap: 0.25rem; align-content: start;
  text-align: left; width: 100%;
  background: var(--co-carta); border: 1px solid var(--co-linea); cursor: pointer;
  border-radius: var(--radius-gota-s); padding: 0.7rem 1rem; font: inherit;
  color: inherit; text-decoration: none;
  transition: box-shadow var(--dur-v2-2) var(--ease-salida-v2), border-color var(--trans-rapida);
}
.co-ticket:hover { box-shadow: var(--sombra-2); border-color: var(--c-borde-fuerte); }
.co-ticket:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-ticket__linea { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.co-ticket__asunto {
  font-weight: 600; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.co-ticket__meta {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
}
/* La fecha empuja al final: los chips quedan alineados entre filas. */
.co-ticket__fecha { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* «Te han contestado»: punto de color delante del asunto, que es lo primero
   que se lee, y el borde apenas teñido. Nada de fondo de color (§6.5). */
.co-ticket__punto {
  flex: none;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--lg-blue);
}
.co-ticket.es-no-leido { border-color: color-mix(in srgb, var(--lg-blue) 38%, var(--co-linea)); }
.co-ticket.es-no-leido .co-ticket__asunto { font-weight: 700; }

.co-ticket-detalle {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: 1.25rem 1.5rem;
}
/* «← Volver» a la lista: es la única salida del detalle en móvil, así que va
   arriba del todo y con sitio para el dedo. */
.co-ticket-detalle__volver { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0; }
.co-ticket-detalle__cab { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.co-ticket-detalle__asunto { font-family: var(--fuente-marca); font-size: var(--texto-l); margin: 0.6rem 0 1rem; overflow-wrap: anywhere; }
/* EL HILO ES UN SCROLLER, y eso ya costó un susto: se abría por ARRIBA, así
   que con tres mensajes la respuesta nueva quedaba fuera de una caja que no
   parece que tenga scroll — «no se puede leer la contestación». Ahora al abrir
   se baja al final (`pintarTicket` con `forzar`) y la caja es más alta: 22rem
   daban para dos mensajes y medio. `min()` para que en un portátil bajito no se
   coma la pantalla entera. */
.co-hilo {
  display: grid; gap: 0.75rem; margin-bottom: 1rem;
  max-height: min(58vh, 32rem); overflow-y: auto; overscroll-behavior: contain;
  scroll-padding-block-end: 0.5rem;
}
.co-mensaje { padding: 0.75rem 1rem; border-radius: var(--radius-gota-s); max-width: 90%; }
.co-mensaje--colab { background: var(--c-marino-50); justify-self: end; border-bottom-right-radius: 0.25rem; }
.co-mensaje--admin { background: var(--lz-papel-2); justify-self: start; border-bottom-left-radius: 0.25rem; }
.co-mensaje__autor { display: block; font-size: var(--texto-xs); font-weight: 700; color: var(--lz-tinta-suave); margin-bottom: 0.2rem; }
.co-mensaje__cuerpo { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Cronología (§D7): cuándo se dijo cada cosa, no solo quién. */
.co-mensaje__fecha {
  display: block; margin-top: 0.3rem;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* Responder: separado del hilo por una regla, para que no parezca otro
   mensaje más de la conversación. */
.co-responder { padding-top: var(--esp-3); border-top: 1px solid var(--co-linea); }
.co-responder .campo:last-of-type { margin-bottom: var(--esp-3); }
.co-ticket-detalle__cerrado { font-size: var(--texto-s); color: var(--lz-tinta-suave); font-style: italic; }

/* =================== COBRO =================== */
/* LA RESPUESTA ARRIBA (§6.74): lo primero que se pregunta quien abre esta
   pestaña es «¿cuándo me llega el próximo?». Va en una tarjeta propia, a
   ancho completo, con el importe en ámbar — es dinero. */
.co-proximo {
  display: flex; align-items: center; gap: 0.75rem 1.75rem; flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.co-proximo__bloque { display: grid; gap: 0.15rem; min-width: 0; }
.co-proximo__etq {
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--lz-tinta-suave);
}
/* El ámbar, en la CIFRA (§6.74). Sin próximo ingreso el nodo dice «—» y no se
   pinta en ámbar: no hay dinero en juego que destacar. */
.co-proximo__cifra {
  font-family: var(--fuente-marca); font-weight: 700;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.co-proximo__cifra.es-clave { color: var(--c-amarillo-500); }
.co-proximo__fecha { font-size: var(--texto-s); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.co-proximo__sub { font-size: var(--texto-xs); color: var(--lz-tinta-suave); max-width: 46ch; }

/* Dos columnas, y `align-items: start`. NO se estiran a la misma altura: con
   los pagos agrupados por mes, la lista de la derecha mide varias pantallas y
   estirar la izquierda dejaba la tarjeta de la cuenta con más de mil píxeles
   de blanco debajo — el «hueco muerto» que la regla de composición prohíbe
   (§6.5). Cada tarjeta ocupa lo suyo.
   La de la cuenta se queda PEGADA arriba mientras se recorre la lista: es el
   dato que hay que corregir si un pago no llega. */
.co-cobro { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 56rem) {
  .co-cobro { grid-template-columns: minmax(0, 21rem) minmax(0, 1fr); }
  .co-cobro__datos { position: sticky; top: 1rem; }
}
.co-cobro > .co-tarjeta { display: flex; flex-direction: column; }
.co-cobro__depositos .co-depositos { flex: 1; }
.co-cobro__depositos .co-mes__lista { align-content: start; }
.co-cobro__depositos .co-vacio:not([hidden]) { flex: 1; display: grid; place-items: center; }
.co-mascara {
  display: grid; gap: 0.15rem;
  background: var(--lz-papel-2); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota-s); padding: 0.85rem 1.1rem; margin: 0 0 1.1rem;
}
.co-mascara__label { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--lz-tinta-suave); font-weight: 700; }
.co-mascara__valor { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); letter-spacing: 0.06em; }
.co-mascara__titular { font-size: var(--texto-s); color: var(--lz-tinta-suave); }
.co-depositos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
/* Rejilla nombrada: marca · importe · fecha · chip de estado · justificante.
   El justificante ocupa su propia fila en estrecho — truncar una referencia
   bancaria la deja inservible justo para lo que sirve (reclamar un pago). */
.co-deposito {
  display: grid; gap: 0.35rem 0.75rem; align-items: center;
  grid-template-columns: 1.8rem minmax(0, 1fr) auto;
  grid-template-areas:
    "marca importe estado"
    "marca fecha   estado"
    ".     ref     ref";
  padding: 0.7rem 0.9rem; border-radius: var(--radius-gota-s);
  border: 1px solid var(--co-linea); background: var(--lz-papel-2);
  font-size: var(--texto-s);
}
@media (min-width: 34rem) {
  .co-deposito {
    grid-template-columns: 1.8rem auto auto auto minmax(0, 1fr);
    grid-template-areas: "marca importe fecha estado ref";
  }
}
.co-deposito--enviado { border-color: var(--c-exito); background: var(--c-exito-fondo); }
/* Vencido = pendiente cuya fecha ya pasó; lo deriva el JS (ver `.co-plazo--vencido`). */
.co-deposito--vencido { border-color: var(--c-error); background: var(--c-error-fondo); }
.co-deposito--cancelado { opacity: 0.7; }
.co-deposito__marca { grid-area: marca; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--co-carta); border: 1.5px solid var(--co-linea); }
.co-deposito--enviado .co-deposito__marca { color: var(--c-exito); border-color: var(--c-exito); }
.co-deposito--vencido .co-deposito__marca { color: var(--c-error); border-color: var(--c-error); }
.co-deposito__marca svg { width: 1rem; height: 1rem; }
.co-deposito__punto { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-borde-fuerte); }
.co-deposito__importe { grid-area: importe; font-family: var(--fuente-marca); font-weight: 700; font-variant-numeric: tabular-nums; }
.co-deposito__fecha { grid-area: fecha; color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
/* «plazo 2 de 3» pegado a su fecha: es el dato que convierte un importe suelto
   en una parte de algo. En estrecho baja de línea en vez de estrechar la fecha. */
.co-deposito__fecha small { font-size: var(--texto-xs); opacity: 0.85; }
@media (min-width: 34rem) { .co-deposito__fecha small { display: block; } }
/* El estado es un `.co-chip` (§6.5): esta clase solo lo coloca en la rejilla. */
.co-deposito__estado { grid-area: estado; justify-self: start; }
/* La referencia es un dato que se copia: se parte, no se corta (§6.34). */
.co-deposito__ref {
  grid-area: ref; justify-self: start; min-width: 0;
  color: var(--lz-tinta-suave); font-size: var(--texto-xs);
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
@media (min-width: 34rem) { .co-deposito__ref { justify-self: end; text-align: end; } }
.co-deposito__ref b { font-weight: 700; color: var(--lz-tinta); }

/* =================== CUENTA =================== */
.co-cuenta { display: grid; gap: 1.25rem; }
@media (min-width: 56rem) { .co-cuenta { grid-template-columns: 1fr 1fr; align-items: start; } .co-dosfa { grid-column: 1 / -1; } }
.co-datos { display: grid; gap: 0.75rem; margin: 0; }
/* `1fr` no es `minmax(0,1fr)`: el segundo track no encogía por debajo del
   min-content de un correo o un CUPS largo y la fila se salía de la tarjeta. */
.co-datos > div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 0.5rem; }
.co-datos dt { color: var(--lz-tinta-suave); font-size: var(--texto-s); }
.co-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.co-dosfa__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.4rem; }
.co-dosfa__cab .co-sub { margin: 0; }
.co-dosfa__setup { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--co-linea); }
.co-dosfa__paso { font-weight: 600; margin: 0 0 0.6rem; }
.co-secreto, .co-dosfa__otpauth { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 0 0 0.9rem; }
.co-secreto__label { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--lz-tinta-suave); font-weight: 700; width: 100%; }
.co-secreto__valor { font-family: var(--fuente-marca); font-weight: 700; letter-spacing: 0.18em; font-size: var(--texto-l); background: var(--lz-papel-2); padding: 0.5rem 0.8rem; border-radius: var(--radio-s); border: 1px solid var(--co-linea); }
.co-secreto__uri { font-size: var(--texto-xs); color: var(--lz-tinta-suave); overflow-wrap: anywhere; background: var(--lz-papel-2); padding: 0.5rem 0.8rem; border-radius: var(--radio-s); border: 1px solid var(--co-linea); width: 100%; }
.co-recovery { margin-top: 1rem; padding: 1rem; border: 1px dashed var(--c-aviso); border-radius: var(--radius-gota-s); background: var(--c-aviso-fondo); }
.co-recovery__aviso { margin: 0 0 0.75rem; font-weight: 700; color: var(--c-aviso); font-size: var(--texto-s); }
.co-recovery__lista { list-style: none; margin: 0 0 0.75rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.4rem; }
.co-recovery__item { font-family: var(--fuente-marca); font-weight: 600; letter-spacing: 0.1em; background: var(--co-carta); padding: 0.4rem 0.6rem; border-radius: var(--radio-s); text-align: center; }

/* =================== TOASTS =================== */
.co-toasts { position: fixed; right: 1rem; bottom: 1rem; z-index: var(--capa-flotante); display: grid; gap: 0.5rem; max-width: min(22rem, calc(100vw - 2rem)); }
.co-toast {
  position: relative;
  padding: 0.8rem 1.1rem 0.8rem 2.2rem; border-radius: var(--radius-gota-s);
  background: var(--c-marino-950); color: var(--c-texto-inverso);
  box-shadow: var(--sombra-3); font-size: var(--texto-s); font-weight: 600;
}
/* Punto de estado en vez de la banda izquierda (cliche de IA, 2026-08-13). */
.co-toast::before {
  content: ""; position: absolute; left: 0.9rem; top: 1.05rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--c-marino-600);
}
.co-toast--ok::before { background: var(--c-exito-claro); }
.co-toast--error::before { background: #ff8a80; }
@media (prefers-reduced-motion: no-preference) {
  .co-toast { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-v2-2) var(--ease-salida-v2), transform var(--dur-v2-2) var(--ease-gota); }
  .co-toast.entra { opacity: 1; transform: translateY(0); }
  .co-toast.sale { opacity: 0; transform: translateY(8px); }
}

/* =================== ENTRADAS reveladas (gated) =================== */
@media (prefers-reduced-motion: no-preference) {
  .co-kpi, .co-grafica, .co-codigo, .co-comision, .co-ranking__fila {
    animation: co-entra var(--dur-v2-3) var(--ease-salida-v2) both;
  }
  @keyframes co-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

/* ============================================================
   FONDO ANIMADO DEL ÁREA — "campo de energía / blueprint de gotas"
   Identidad PROPIA del panel del colaborador (no el skyline del
   funnel): retícula técnica azul + glows de profundidad + gotas de
   marca flotando + trazas de circuito con pulsos de corriente.
   Decorativo (aria-hidden), absolute inset:0 dentro de .co-main (no
   añade altura), z-index 0 detrás del contenido. TODO en CSS/SVG
   (CSP-safe, sin librerías) y SOLO azules/navy/papel (el ámbar queda
   reservado a la cifra y al CTA). Con reduced-motion la lámina queda
   estática y agradable: el movimiento vive entero tras la puerta.
   ============================================================ */
.co-fondo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* Profundidad: papel frío + glows fríos en las esquinas (energía sin ámbar). */
  background: var(--lz-papel); /* fallback sin color-mix */
  background:
    radial-gradient(120% 85% at 6% -10%, color-mix(in srgb, var(--lg-blue) 15%, transparent), transparent 55%),
    radial-gradient(90% 70% at 100% 4%, color-mix(in srgb, var(--lg-blue-light) 12%, transparent), transparent 52%),
    radial-gradient(160% 130% at 50% 118%, color-mix(in srgb, var(--c-marino-800) 14%, transparent), transparent 62%),
    linear-gradient(var(--lz-papel), var(--lz-papel-2));
}

/* Retícula blueprint: dos gradientes finos tramados a 46 px. Se apaga hacia el
   centro-alto (donde caen las cifras) con una máscara radial, para que las
   tarjetas se lean impecables encima. */
.co-fondo__malla {
  position: absolute;
  inset: -2px;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--lg-blue) 20%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--lg-blue) 20%, transparent) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.45;
  -webkit-mask: radial-gradient(115% 80% at 50% 22%, transparent 8%, #000 78%);
  mask: radial-gradient(115% 80% at 50% 22%, transparent 8%, #000 78%);
}

/* Trazas de circuito (energía): quietas de fondo, con un pulso de corriente que
   las recorre. Ancladas arriba-derecha; se retiran en móvil para no recargar. */
.co-fondo__circuito {
  position: absolute;
  top: clamp(1.5rem, 7vh, 6rem);
  right: -2.5rem;
  width: min(44rem, 62%);
  height: auto;
  color: color-mix(in srgb, var(--lg-blue) 34%, transparent);
  opacity: 0.5;
}
.co-fondo__traza path { stroke: currentColor; stroke-width: 1.4; fill: none; vector-effect: non-scaling-stroke; }
.co-fondo__traza circle { fill: currentColor; }
.co-fondo__pulso {
  stroke: var(--lg-blue-light); stroke-width: 2.6; fill: none; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 5 95; stroke-dashoffset: 30;
}
@media (max-width: 48rem) { .co-fondo__circuito { display: none; } }

/* Gotas de marca flotando: distintos tamaños/opacidad = parálaje de profundidad.
   Sólo azul (identidad de marca, sin ámbar decorativo). */
.co-fondo__gotas { position: absolute; inset: 0; }
.co-gota { position: absolute; width: 3rem; opacity: 0.1; will-change: transform; }
.co-gota path { fill: var(--lg-blue); }
.co-gota--claro path { fill: var(--lg-blue-light); }
.co-gota--1 { top: 11%; left: 5%;  width: 3.4rem; opacity: 0.11; }
.co-gota--2 { top: 27%; left: 84%; width: 5rem;   opacity: 0.08; }
.co-gota--3 { top: 63%; left: 12%; width: 4rem;   opacity: 0.09; }
.co-gota--4 { top: 80%; left: 70%; width: 2.6rem; opacity: 0.13; }
.co-gota--5 { top: 44%; left: 47%; width: 6.5rem; opacity: 0.05; }
.co-gota--6 { top: 90%; left: 32%; width: 3rem;   opacity: 0.1;  }

/* Grano de marca por encima de las capas (mismo asset que los momentos navy v2). */
.co-fondo__grano {
  position: absolute;
  inset: 0;
  background-image: url("/static/img/noise.svg");
  background-size: 220px;
  mix-blend-mode: soft-light;
  opacity: 0.04;
}

/* ---------- Movimiento del fondo (TODO dentro de la puerta) ----------
   Ambiente lento: deriva de la retícula, flotación de las gotas y pulsos de
   corriente. Sólo transform / opacity / stroke-dashoffset (GPU). Con
   reduced-motion la lámina queda quieta y completa (nada oculto fuera). */
@media (prefers-reduced-motion: no-preference) {
  .co-fondo__malla { animation: co-malla-deriva 42s linear infinite; }
  @keyframes co-malla-deriva { to { background-position: 46px 46px; } }

  .co-gota { animation: co-gota-flota var(--co-dur, 14s) ease-in-out var(--co-delay, 0s) infinite alternate; }
  @keyframes co-gota-flota {
    from { transform: translateY(6px)  rotate(var(--co-rot, 0deg)); }
    to   { transform: translateY(-18px) rotate(var(--co-rot, 0deg)); }
  }
  .co-gota--1 { --co-dur: 13s; --co-rot: -8deg; }
  .co-gota--2 { --co-dur: 18s; --co-delay: -3s; --co-rot: 6deg; }
  .co-gota--3 { --co-dur: 15s; --co-delay: -6s; }
  .co-gota--4 { --co-dur: 11s; --co-delay: -1.5s; --co-rot: 10deg; }
  .co-gota--5 { --co-dur: 22s; --co-delay: -8s; }
  .co-gota--6 { --co-dur: 16s; --co-delay: -4s; --co-rot: -6deg; }

  .co-fondo__pulso { animation: co-corriente 6s linear infinite; }
  .co-fondo__pulso--b { animation-duration: 8.5s; animation-delay: -1.4s; }
  @keyframes co-corriente { from { stroke-dashoffset: 100; } to { stroke-dashoffset: -100; } }
}

/* ---- Baja / supresión de datos (RGPD art. 17) ---- */
.co-baja > summary { list-style: none; cursor: pointer; }
.co-baja > summary::-webkit-details-marker { display: none; }

.co-baja__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  font-weight: 700;
  color: var(--c-texto-suave);
}

.co-baja__toggle:hover,
.co-baja[open] .co-baja__toggle { color: var(--c-error); }

.co-baja__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  margin-top: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--c-borde);
}

.co-baja__sub { margin: 0; font-weight: 700; font-size: var(--texto-s); }

.co-baja__lista {
  margin: 0;
  padding-inline-start: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-s);
  color: var(--c-texto-suave);
}

.co-baja__cuerpo .co-boton--peligro { align-self: flex-start; }

/* ---- Aviso de privacidad de capa 1 en el registro (art. 13 RGPD) ---- */
.co-privacidad {
  margin-block: var(--esp-3);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-marino-50);
}

.co-privacidad__titulo {
  margin: 0 0 var(--esp-2);
  font-weight: 700;
  font-size: var(--texto-s);
}

.co-privacidad__lista {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  font-size: var(--texto-xs);
}

.co-privacidad__lista > div { display: grid; gap: 0.1rem; }
.co-privacidad__lista dt { font-weight: 700; }
.co-privacidad__lista dd { margin: 0; color: var(--c-texto-suave); }

.co-privacidad__pie {
  margin: var(--esp-3) 0 0;
  font-size: var(--texto-xs);
  color: var(--c-texto-suave);
}

/* Regla de no aportar contactos: destacada, no es letra pequeña.
   REESCRITA (§6.5): tenía EXACTAMENTE el cliché que el dueño vetó en toda
   la web — banda gruesa a la izquierda + fondo pastel + texto del mismo
   color. Ahora es el estilo de la casa, el mismo de `.co-alerta` y de los
   toasts: superficie blanca, borde fino COMPLETO apenas teñido y un PUNTO
   de color como única marca; el texto, en tinta. El icono opcional se
   queda: es un dibujo, no una banda de color. */
.co-regla {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-2);
  margin-block: var(--esp-3);
  padding: var(--esp-3) var(--esp-3) var(--esp-3) 2.1rem;
  border: 1px solid color-mix(in srgb, var(--c-aviso) 32%, var(--c-borde));
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  color: var(--c-texto);
  font-size: var(--texto-xs);
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 1px 3px rgba(6, 16, 31, 0.06);
}
.co-regla::before {
  content: "";
  position: absolute; left: 0.85rem; top: 1.05rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--c-aviso);
}

.co-regla svg { flex: none; margin-top: 0.1rem; color: var(--c-aviso); }

/* ==========================================================================
   ZONA «CONTRATOS» — colaborador de NIVEL 2 (2026-09-01)
   Tramitar en nombre de otra persona: sus expedientes y el alta de uno nuevo.
   Reutiliza .co-tarjeta / .co-boton / .co-vacio; aquí solo lo propio.
   Todos los colores por token: sin hex literales, o el tema se rompe.
   ========================================================================== */

/* --- Cifras de cabecera ---
   SE LLAMAN `.co-exp-kpi`, NO `.co-kpi`. Nacieron como `.co-kpi` y eso
   PISABA a la `.co-kpi` del Resumen (la de arriba del fichero, con su
   tarjeta destacada, su cifra en ámbar y su pie): dos definiciones de la
   misma clase en la misma hoja, y ganaba la de más abajo. Los KPI del
   Resumen se veían rotos y el fallo no daba ningún error.
   DEBE QUEDAR UNA SOLA `.co-kpi` en este fichero. */
.co-exp-kpis {
  display: grid;
  /* Son CUATRO y se sabe: 2×2 en estrecho y una fila de 4 con sitio.
     Nada de `auto-fit` con un número FIJO (§6.41/§6.44) — dejaba tres
     columnas y la cuarta sola, con un tercio del ancho en blanco. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}
@media (min-width: 52rem) { .co-exp-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.co-exp-kpi {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--esp-4);
  background: var(--co-carta);
  border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota-s);
}
.co-exp-kpi__num {
  font-family: var(--fuente-marca); font-size: 1.7rem; font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.co-exp-kpi__eti { font-size: var(--texto-s); color: var(--lz-tinta-suave); }
/* El color va en la CIFRA, no en la tarjeta: una tarjeta ámbar entera sería
   una alarma permanente, y «requiere tu acción» suele valer 1 o 2. La
   plantilla pone `--espera` SOLO cuando el contador es > 0, así que un cero
   nunca sale pintado como un problema. */
.co-exp-kpi--espera .co-exp-kpi__num { color: var(--c-aviso); }
.co-exp-kpi--ok .co-exp-kpi__num { color: var(--c-exito); }

/* --- La lista de personas: una fila por expediente ---
   La fila ENTERA es el enlace al detalle (§D9): el objetivo de pulsación
   es toda la tarjeta, no un «ver» de dos palabras al final. Por eso lleva
   `text-decoration:none` y `color:inherit` — un <a> sin desactivar eso
   pinta de azul y subraya el nombre de una persona. */
.co-expedientes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); align-content: start; }
/* El <li> no pinta nada: la tarjeta ES el enlace, para que el objetivo de
   pulsación sea toda la fila y no dos palabras al final. Por eso hay que
   desactivarle el subrayado y el azul de enlace — si no, el nombre de una
   persona sale pintado como un enlace de Wikipedia. */
.co-exp { min-width: 0; }
.co-exp__enlace {
  display: grid;
  /* Ninguna columna en `auto` salvo la última: un motivo largo («la lectura
     no cuadra con el total impreso») haría crecer su columna hasta comerse
     el nombre. Con `fr` el reparto es estable fila a fila y el texto larga
     envuelve dentro de su celda. */
  grid-template-columns: minmax(0, 1.7fr) minmax(8rem, 0.9fr) minmax(8rem, 0.9fr) minmax(6rem, auto);
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--co-linea);
  border-radius: var(--radio-m);
  background: var(--co-carta);
  color: inherit;
  text-decoration: none;
  transition: box-shadow var(--dur-v2-2) var(--ease-salida-v2), border-color var(--trans-rapida);
}
.co-exp__enlace:hover { box-shadow: var(--sombra-2); border-color: var(--c-borde-fuerte); }
.co-exp__enlace:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .co-exp__enlace { transition: box-shadow var(--dur-v2-2) var(--ease-salida-v2), border-color var(--trans-rapida), translate var(--dur-v2-1) var(--ease-gota); }
  .co-exp__enlace:hover { translate: 0 -2px; }
}
@media (max-width: 62rem) {
  /* En estrecho la fila se apila: el nombre manda y el resto va debajo.
     Estado+ahorro y avance+fecha comparten renglón — cuatro renglones por
     expediente serían media pantalla por persona. */
  .co-exp__enlace { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .co-exp__quien { grid-column: 1 / -1; }
}
/* Necesita algo de él (documentos rechazados, datos que corregir): borde
   teñido, y la marca de color la pone el chip. Nada de fondo de color (§6.5). */
.co-exp--atencion .co-exp__enlace { border-color: color-mix(in srgb, var(--c-error) 40%, var(--co-linea)); }
.co-exp__quien { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.co-exp__ident { display: grid; gap: 0.1rem; min-width: 0; }
/* Cuatro celdas, cuatro alineaciones: la identidad a la izquierda, el
   estado al centro y el dinero y la fecha a la derecha, para que la columna
   de cifras se lea de arriba abajo sin saltos. */
.co-exp__estado { display: grid; gap: 0.25rem; justify-items: start; min-width: 0; grid-template-columns: minmax(0, 1fr); }
/* El chip lleva el rótulo del estado, que en móvil («Esperando su autorización»)
   mide más que su celda: medido, se salía 116 px de la fila. `min-width: 0` en el
   contenedor NO basta — el track implícito sigue siendo `auto`. Con la columna
   atada y el chip envolviendo, el texto pasa a dos líneas en vez de invadir la
   columna del ahorro. */
.co-exp__estado > .co-chip { max-width: 100%; white-space: normal; }
.co-exp__meta { display: grid; gap: 0.15rem; justify-items: end; text-align: right; min-width: 0; }
@media (max-width: 62rem) {
  .co-exp__estado { grid-column: 1; }
  .co-exp__meta { grid-column: 2; }
}
/* La inicial como avatar: identifica de un vistazo sin pedir ninguna foto. */
.co-exp__avatar {
  flex: none;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--c-amarillo-100);
  color: var(--c-texto);
  font-weight: 800;
}
.co-exp__nombre { display: block; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.co-exp__email {
  display: block; margin: 0; font-size: var(--texto-s); color: var(--lz-tinta-suave);
  overflow-wrap: anywhere;
}
.co-exp__avance { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.co-exp__pct {
  font-size: var(--texto-s); color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* El ahorro anual: la única cifra de DINERO de la fila y, por eso, lo único
   que puede ir en ámbar aquí (§6.5 — el ámbar no es un color de adorno).
   `null` se pinta «—» desde la plantilla, JAMÁS un 0: un cero se lee «no
   ahorra nada» y lo que pasa es que todavía no hay comparativa. Cuando no
   hay cifra, la plantilla añade `--vacio` y el guion sale en gris; un «—»
   en ámbar parece un importe. */
.co-exp__ahorro {
  display: grid; justify-items: end; gap: 0.05rem;
  font-family: var(--fuente-marca); font-weight: 700;
  color: var(--c-amarillo-500);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.co-exp__ahorro small {
  font-family: var(--fuente); font-size: var(--texto-xs); font-weight: 600;
  color: var(--lz-tinta-suave);
}
.co-exp__ahorro--vacio { color: var(--c-borde-fuerte); }
/* Cuándo se abrió o cuándo se le avisó. Va apagado y con cifras tabulares:
   es contexto, no un dato que se compare entre filas. */
.co-cuando,
.co-exp__cuando {
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  /* `nowrap` mantiene junta la fecha —partir «02/09/2026 18:21» por el espacio
     se lee fatal— pero en una celda estrecha se salía 13 px. `min-width: 0`
     deja que la celda mande y el sobrante se recorte con puntos suspensivos en
     vez de invadir la columna de al lado.
     `inline-block` es obligatorio: `min-width`, `max-width` y `overflow` NO se
     aplican a un elemento inline no reemplazado, y `<time>` lo es — sin esto la
     regla no hacía nada y el derrame seguía ahí (medido). */
  display: inline-block;
  min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
/* Nota de la fila («el titular aún no ha entrado»): no es un fallo suyo, así
   que se escribe apagada y sin punto de color — el chip ya dice el estado. */
.co-exp__nota { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
/* Cuántos reparos tiene: el aviso que el dueño pidió («por si le
   rechazamos algo»). Punto rojo + número, sin pastilla rellena. */
.co-exp__reparos {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--texto-xs); font-weight: 700; color: var(--c-error);
  white-space: nowrap;
}
.co-exp__reparos::before {
  content: ""; flex: none;
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--c-error);
}
/* Cabecera de la tarjeta de la cartera: título a la izquierda y el total a
   la derecha. El total va SIEMPRE, también con un filtro puesto: es lo que
   distingue «no tengo expedientes» de «este filtro no tiene ninguno». */
.co-contratos__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; flex-wrap: wrap; margin-bottom: var(--esp-3);
}
.co-contratos__cab .co-tarjeta__titulo { margin: 0; }
.co-contratos__total { font-size: var(--texto-s); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }

/* Barra de progreso de la documentación. */
.co-barra {
  flex: 1 1 auto;
  height: 0.45rem;
  background: var(--c-borde);
  border-radius: var(--radio-pill);
  overflow: hidden;
}
.co-barra__relleno {
  display: block;
  width: var(--pct, 0%);
  height: 100%;
  background: var(--c-exito);
  border-radius: inherit;
}
@media (prefers-reduced-motion: no-preference) {
  .co-barra__relleno { transition: width 0.5s var(--ease-gota); }
}

/* El estado del expediente se pinta con `.co-chip--exp-<estado>`, definido
   ARRIBA junto al resto de pastillas (sección «PASTILLAS DE ESTADO»). Aquí
   había una SEGUNDA definición de `.co-chip` y solo cubría 4 de los 14
   estados: los otros 10 salían todos con el mismo punto gris. */

/* Motivo por el que un expediente está parado (`motivo_visible`): va bajo
   el chip, en pequeño, porque «Por valorar» sin el porqué no dice nada. */
.co-exp__motivo {
  display: block; margin-top: 0.2rem;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  white-space: normal;
}

/* --- Abrir un expediente nuevo ---
   Desde 2026-09-04 es la SEGUNDA pestaña interna de Contratos, no un
   `<details>` al final del scroll: abrir un expediente pedía pasar por
   delante de toda la cartera. Cuál nace delante lo decide el servidor
   (`alta.abierta`), que ya sabe si vuelve de un PRG con error. Las reglas
   del `<summary>` que había aquí se fueron con el `<details>`. */
.co-exp-nuevo {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.co-exp-nuevo > .co-tarjeta__titulo {
  font-size: var(--texto-l); margin-bottom: 0;
}
.co-exp-nuevo__cuerpo { margin-top: var(--esp-4); }

/* --- Formulario de alta de expediente ---
   La rejilla reparte: los campos son de anchos distintos y en un carril
   único quedaría una tira de veinte renglones (§6.34/§6.41). Aquí `auto-fit`
   SÍ es correcto: el número de campos cambia con el tipo de titular y con
   la vía (con factura / sin factura). */
.co-form__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: var(--esp-3) var(--esp-4);
  margin-bottom: var(--esp-4);
  align-items: start;
}
/* Un campo que necesita el ancho entero (razón social, CUPS). */
.co-form__campos > .campo--ancho { grid-column: 1 / -1; }
/* Un `.campo` es a su vez un grid, y un item de grid nace con `min-width: auto`:
   no encoge por debajo del min-content de su hijo más ancho. Medido en el alta:
   la celda medía 252 px y la etiqueta/entrada/ayuda salían a 313 px, o sea
   61 px POR ENCIMA de su columna, pisando la de al lado. Es la misma causa que
   el derrame de `.co-exp-lateral`. */
.co-form__campos > .campo { min-width: 0; }
.co-form__campos > .campo > * { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* El formulario usa el vocabulario `.campo/*` de base.css (§8.1): trae ya
   foco, ayuda y error inline, y `aria-invalid` — que es lo que anuncia el
   lector de pantalla— pinta el borde. Un color sin `aria-invalid` deja
   fuera a quien no ve el borde. `.co-campo*` ya no existe. */

/* LAS DOS VÍAS del alta: con factura o con los datos a mano. Se enseñan las
   dos a la vez (sin JS no hay forma de elegir), así que tienen que leerse
   como dos alternativas y no como una lista de campos más: cada una en su
   recuadro y, con sitio, LADO A LADO — apiladas, la de abajo parece un paso
   siguiente en vez de la otra opción. */
.co-form__vias {
  display: grid;
  gap: var(--esp-4);
  margin-bottom: var(--esp-4);
  align-items: start;
}
/* UNA SOLA COLUMNA, y no es un descuido. Con JavaScript solo hay UNA vía
   visible —la otra se esconde— así que en dos columnas la elegida se quedaba
   en la mitad izquierda con medio formulario en blanco al lado: el «div de
   factura súper pequeño» que se reportó. Sin JavaScript se ven las dos, y
   apiladas a ancho completo se leen mejor que en dos columnas estrechas. */
.co-form__vias { grid-template-columns: minmax(0, 1fr); }
.co-via {
  min-width: 0; margin: 0;
  padding: var(--esp-4);
  border: 1px solid var(--co-linea);
  border-radius: var(--radio-m);
  background: var(--lz-papel-2);
}
.co-via__titulo {
  padding: 0 0.35rem; margin-inline-start: -0.35rem;
  font-size: var(--texto-s); font-weight: 700;
}
.co-via__campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
  gap: var(--esp-3);
}
.co-via .campo:last-of-type { margin-bottom: 0; }

/* --- Simulador de ahorro (dentro del alta) ---
   Se separa del campo de arriba con una línea fina: es una acción, no un campo
   más del formulario, y sin la separación se lee como si fuera parte de lo que
   hay que rellenar. */
.co-simulador {
  margin-top: var(--esp-4);
  padding-top: var(--esp-4);
  border-top: 1px solid var(--co-linea);
}
.co-simulador__salida { margin-top: var(--esp-3); }
/* El mismo bloque, dentro del acuse del alta: se separa con una línea fina
   porque «se ha abierto» y «esto es lo que le damos» son dos cosas distintas y
   pegadas se leen como un párrafo. */
.co-sim-resultado {
  margin-top: var(--esp-3);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--co-linea);
}
.co-sim-cifra {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem;
  margin: 0 0 var(--esp-2);
}
/* EL ÁMBAR VA AQUÍ, en la cifra del ahorro: es el dinero en juego (§6.5). En el
   contenedor no se pintaría — ya pasó en Finanzas y en el resumen del área. */
.co-sim-cifra__num {
  font-family: var(--fuente-marca); font-size: var(--texto-xl); font-weight: 800;
  color: var(--c-amarillo-500); font-variant-numeric: tabular-nums;
}
.co-sim-cifra__eti { font-size: var(--texto-s); color: var(--lz-tinta-suave); }
.co-sim-detalle {
  margin: 0; font-size: var(--texto-s); line-height: 1.5;
  overflow-wrap: anywhere;
}
.co-sim-motivos { margin: var(--esp-2) 0 0; padding-left: 1.1rem; font-size: var(--texto-xs); }
.co-sim-motivos li { margin-bottom: 0.2rem; }

/* --- Grupo de opciones (radios como tarjetas) ---
   Para decisiones de DOS o TRES caminos donde cada uno necesita una linea de
   explicacion: un `<select>` esconde esa linea y un radio pelado no tiene donde
   ponerla. Se reparten el ancho y envuelven solos en estrecho.

   El estado marcado se pinta con `:has()`, que es lo que permite teñir la
   TARJETA desde el input; con respaldo: donde no haya `:has()` se ve el radio
   marcado igual, solo sin el fondo. */
.co-opciones {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  gap: var(--esp-2);
}
.co-opcion {
  display: flex; align-items: flex-start; gap: 0.6rem;
  min-width: 0;
  padding: var(--esp-3);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  cursor: pointer;
}
.co-opcion input { flex: none; margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; }
.co-opcion__cuerpo { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.co-opcion__titulo { font-weight: 700; font-size: var(--texto-s); }
.co-opcion__ayuda {
  font-size: var(--texto-xs); color: var(--lz-tinta-suave); line-height: 1.4;
  overflow-wrap: anywhere;
}
.co-opcion:hover { border-color: var(--lz-tinta-suave); }
@supports selector(:has(*)) {
  .co-opcion:has(input:checked) {
    border-color: var(--lz-tinta);
    box-shadow: inset 0 0 0 1px var(--lz-tinta);
  }
}
/* El foco del teclado va en la TARJETA, no en el radio de 17 px: es lo que se
   ve cuando se navega con tabulador. */
.co-opcion:focus-within { outline: 2px solid var(--lz-tinta); outline-offset: 2px; }

/* --- Lo que ve un NIVEL 1 donde el nivel 2 tiene su cartera ---
   Explica la capacidad y ofrece pedirla. Deliberadamente SIN banda de color a
   la izquierda ni fondo pastel (§6.5): superficie normal de tarjeta, y el único
   color es el punto de cada línea de la lista. */
.co-nivel2 { max-width: 62rem; min-width: 0; }
.co-nivel2__lista {
  list-style: none; margin: 0 0 var(--esp-4); padding: 0;
  display: grid; gap: 0.7rem;
}
.co-nivel2__lista li {
  position: relative; padding-left: 1.5rem;
  font-size: var(--texto-s); line-height: 1.5; max-width: 68ch;
  /* Un texto largo no puede ensanchar la tarjeta (§6.34). */
  overflow-wrap: anywhere;
}
.co-nivel2__lista li::before {
  content: ""; position: absolute; left: 0.25rem; top: 0.62em;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  /* Punto NEUTRO, no ámbar: el ámbar está reservado al dinero (§6.5) y una
     lista de capacidades no lo es. Token real de la casa, con respaldo
     por si algún día se renombra (§6.27: un var() inexistente sin
     fallback DESCARTA la declaración y el punto desaparece sin avisar). */
  background: var(--lz-tinta-suave, currentColor);
}
/* El aviso de «ya la pediste» y su botón: separados del listado y en columna,
   que en 390 px un botón al lado del párrafo parte la frase. */
.co-nivel2 .co-alerta { margin: 0 0 var(--esp-3); }

/* La nota de «qué pasa después», DEBAJO del botón: `.co-tarjeta__ayuda` solo
   declara margen abajo, así que la nota quedaba tocando el botón. Y no es un
   pie de tarjeta: es lo que se lee justo después de pulsar. */
.co-nivel2__nota {
  margin: var(--esp-5) 0 0;
  color: var(--lz-tinta-suave);
  font-size: var(--texto-s);
  max-width: 62ch;
}
/* Los bloques del formulario, con aire entre ellos: el campo, la declaración y
   el botón eran tres cosas pegadas y se leían como una sola. */
.co-nivel2 .co-forma > .campo { margin-bottom: var(--esp-4); }
.co-nivel2 .co-declaro { margin-bottom: var(--esp-5); }
/* Y la lista de lo que anade el nivel 2 respira antes del formulario: son dos
   cosas distintas —lo que te explican y lo que rellenas—, no una lista con un
   campo al final. */
.co-nivel2__lista { margin-bottom: var(--esp-5); }

/* La declaración de autorización: es lo que legitima todo lo demás, así que se
   lee como un compromiso y no como una casilla más de formulario. */
.co-declaro {
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: var(--esp-3);
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  font-size: var(--texto-s);
  line-height: 1.45;
  margin-bottom: var(--esp-3);
}
.co-declaro input { flex: none; margin-top: 0.15rem; width: 1.05rem; height: 1.05rem; }
/* `flex-wrap` reparte los botones en varias filas, pero un item flex tampoco
   encoge por debajo de su min-content: en 390 px el botón primario se salía
   48 px. `min-width: 0` + `max-width: 100%` lo dejan partir su etiqueta. */
.co-form__acciones { display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center; }
.co-form__acciones > * { min-width: 0; max-width: 100%; }
.co-form__nota { margin: var(--esp-2) 0 0; font-size: var(--texto-s); }
.co-form__nota[hidden] { display: none; }

/* --- Zona de subida (hojas de la factura y, en F2, documentos) ---
   Va SOBRE el `<input type="file">` nativo, no sobre una caja falsa con JS
   detrás: así el formulario sigue funcionando sin JavaScript y el nombre del
   fichero elegido lo pinta el navegador. El recuadro punteado es la señal de
   «aquí se sueltan cosas»; el botón, `::file-selector-button`. */
.co-subida {
  width: 100%;
  padding: var(--esp-4);
  border: 2px dashed var(--c-borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--lz-papel-2);
  color: var(--lz-tinta-suave);
  font: inherit; font-size: var(--texto-s);
  cursor: pointer;
  transition: border-color var(--trans-rapida), background var(--trans-rapida);
}
.co-subida:hover { border-color: var(--c-marino-700); }
.co-subida:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
/* La marca el JS mientras se arrastra un fichero encima. */
.co-subida.arrastrando { border-color: var(--c-amarillo-500); background: var(--c-amarillo-100); }
.co-subida::file-selector-button {
  margin-right: var(--esp-3);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-borde);
  border-radius: var(--radio-pill);
  background: var(--c-blanco);
  color: var(--c-marino-800);
  font: inherit; font-weight: 700; font-size: var(--texto-s);
  cursor: pointer;
}
.co-subida:hover::file-selector-button { border-color: var(--c-borde-fuerte); }
/* Varias hojas de la MISMA factura (§6.15): más alta, porque ahí se sueltan
   tres o cuatro fotos y no un fichero. */
.co-subida--multiple { padding: var(--esp-5) var(--esp-4); }

/* Ese requisito ya está cerrado y no lo puede sustituir (§D5: no se pisa un
   DNI que subió su dueño ni uno que Admin dio por bueno).
   SE PINTA DESHABILITADA, NO SE QUITA: un hueco donde antes había un recuadro
   se lee como «esto todavía falta», y quien lo pulse se come un 409 que no
   explica nada. Deshabilitada, el navegador ni deja elegir fichero y la
   tarjeta dice el motivo al lado. */
.co-subida[disabled] {
  border-style: solid;
  border-color: var(--c-borde);
  background: var(--lz-papel-2);
  color: var(--lz-tinta-suave);
  cursor: not-allowed;
  opacity: 0.72;
}
.co-subida[disabled]:hover { border-color: var(--c-borde); }
.co-subida[disabled]::file-selector-button { cursor: not-allowed; opacity: 0.7; }

/* Progreso REAL de la subida (XHR `upload.onprogress`). Reusa `.co-barra`, que
   es la única barra del área. La transición se acorta aquí: la de 0,5 s de la
   documentación va bien para un salto puntual, pero con veinte actualizaciones
   por segundo la barra se queda siempre por detrás de lo que ya se ha subido.

   `:not([hidden])` obligatorio (regla de la cabecera de este fichero, §6.36/
   §6.70): nace oculta y un `display:` de autor le gana al `[hidden]` del
   navegador — la barra saldría al 0 % en todas las tarjetas, siempre. */
.co-subida__prog:not([hidden]) {
  display: flex; align-items: center; gap: 0.55rem;
  font-variant-numeric: tabular-nums;
}
.co-subida__prog {
  margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave);
}
.co-subida__prog .co-barra { height: 0.4rem; }
.co-subida__prog .co-barra__relleno { background: var(--lg-blue); }
@media (prefers-reduced-motion: no-preference) {
  .co-subida__prog .co-barra__relleno { transition-duration: 0.15s; }
}
.co-subida__pct { flex: none; min-width: 2.6rem; text-align: right; }

/* ==========================================================================
   DETALLE DE UN EXPEDIENTE — `colaborador/expediente.html`  (§D9)
   Página completa, no un modal: aquí es donde el colaborador ve qué le
   falta a esa persona y qué le hemos rechazado. Encargo literal del dueño:
   «que pueda revisar individualmente cada uno y qué le falta o si se le ha
   rechazado algo, con alertas por si le rechazamos algo».
   Dos carriles con sitio (§6.34): a la izquierda el ESTADO (cuánto lleva,
   qué falta, por dónde va) y a la derecha lo ACCIONABLE (documentos,
   avisos, botones). Debajo de 64rem, un solo carril con el estado delante.
   ========================================================================== */
.co-expediente {
  display: grid;
  gap: var(--esp-5);
  align-items: start;
}
@media (min-width: 64rem) {
  .co-expediente { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); }
  .co-expediente__cab { grid-column: 1 / -1; }
  /* El estado acompaña al scroll mientras se repasan los documentos. */
  .co-exp-lateral { position: sticky; top: calc(var(--altura-cabecera) + 1.5rem); }
}
.co-expediente__cab {
  display: flex; align-items: center; gap: 0.6rem 1rem; flex-wrap: wrap;
  padding-bottom: var(--esp-4);
  border-bottom: 1px solid var(--co-linea);
}
.co-expediente__volver {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--lz-tinta-suave); text-decoration: none; font-weight: 600; font-size: var(--texto-s);
  flex-basis: 100%;
}
.co-expediente__volver:hover { color: var(--lz-tinta); text-decoration: underline; }
.co-expediente__titulo { font-family: var(--fuente-marca); font-size: var(--texto-2xl); margin: 0; overflow-wrap: anywhere; }
.co-expediente__sub { margin: 0.15rem 0 0; font-size: var(--texto-s); color: var(--lz-tinta-suave); overflow-wrap: anywhere; flex-basis: 100%; }
/* Las salidas del expediente (§D10): corregir, reinvitar, reenviar acceso,
   anular. Van juntas y a la derecha del título; «anular» es la única en
   rojo y va la ÚLTIMA, separada, porque no tiene vuelta atrás. */
.co-expediente__acciones { display: flex; gap: var(--esp-2); flex-wrap: wrap; margin-left: auto; }
.co-expediente__acciones form { display: contents; }
.co-expediente__acciones .co-boton--peligro { margin-left: var(--esp-2); }
.co-expediente__principal { display: grid; gap: var(--esp-5); align-content: start; min-width: 0; }
.co-expediente__seccion { min-width: 0; }

/* --- Lateral: progreso + checklist + cronología --- */
.co-exp-lateral {
  display: grid; gap: var(--esp-5); align-content: start;
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: clamp(1.25rem, 3vw, 1.6rem);
  /* `minmax(0, 1fr)` NO es decorativo: la columna implícita de un grid se
     dimensiona `auto`, y un track `auto` NO PUEDE encoger por debajo del
     min-content de su hijo más ancho. Medido aquí: la caja mide 320 px y el
     track salía a 349 px, así que el vacío del checklist se derramaba 56 px
     SOBRE la columna de la derecha y tapaba el rótulo «Remitente» (§6.34: ningún
     texto largo puede ensanchar su contenedor). Con esto el track se ata al
     ancho real; `min-width: 0` en los hijos les quita el suelo automático y el
     corte de palabra evita que un CUPS o un correo largo lo reviva. */
  grid-template-columns: minmax(0, 1fr);
}
.co-exp-lateral > * { min-width: 0; overflow-wrap: anywhere; }
.co-exp-lateral__sub {
  margin: 0 0 var(--esp-3);
  font-size: var(--texto-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--lz-tinta-suave);
}

.co-progreso { display: grid; gap: 0.5rem; }
.co-progreso__cifra {
  font-family: var(--fuente-marca); font-weight: 700; line-height: 1;
  font-size: clamp(2rem, 1.4rem + 2vw, 2.6rem); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.co-progreso__cifra small { font-size: 0.5em; font-weight: 600; }
.co-progreso__texto { font-size: var(--texto-s); color: var(--lz-tinta-suave); }
/* Reusa `.co-barra` de la lista: una sola barra en todo el área. */
.co-progreso .co-barra { height: 0.55rem; }

/* Checklist DERIVADO del perfil (§6.37): nunca una lista escrita a mano. */
.co-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.co-req {
  --req: var(--c-borde-fuerte);
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.55rem;
  align-items: start;
  font-size: var(--texto-s); line-height: 1.4;
}
.co-req::before {
  content: ""; margin-top: 0.35rem;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--req); justify-self: center;
}
.co-req--falta { --req: var(--c-aviso); }
.co-req--rechazado { --req: var(--c-error); font-weight: 600; }
/* Lo que tiene que aportar el TITULAR desde su área: no es un fallo suyo y
   no debe leerse como una tarea pendiente de él. */
.co-req--bloqueado { color: var(--lz-tinta-suave); }
/* Aportado = marca de verificación, no un punto más: es el único estado
   que se busca de un vistazo en una lista de doce. */
.co-req--aportado { color: var(--lz-tinta-suave); }
.co-req--aportado::before {
  width: 0.4rem; height: 0.65rem; margin-top: 0.2rem;
  border-radius: 0; background: none;
  border-right: 2px solid var(--c-exito); border-bottom: 2px solid var(--c-exito);
  rotate: 45deg;
}
.co-req__quien { display: block; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

/* Cronología del expediente: declarado → aviso → respondió → cuenta →
   entró → propuesta aceptada → finalizado → tramitado. Un hito SIN fecha
   no se esconde: se pinta apagado, porque saber lo que falta por pasar es
   la mitad de la información. */
.co-hitos { list-style: none; margin: 0; padding: 0; display: grid; }
.co-hito {
  position: relative;
  display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: 0.65rem;
  padding-bottom: 0.8rem;
  color: var(--lz-tinta-suave); font-size: var(--texto-s);
}
/* La línea arranca DEBAJO del punto: así no hace falta apilar nada con
   z-index para que el punto se vea encima (§6.5). */
.co-hito::before {
  content: "";
  position: absolute; left: 0.44rem; top: 1.15rem; bottom: 0;
  width: 2px; background: var(--co-linea);
}
.co-hito:last-child { padding-bottom: 0; }
.co-hito:last-child::before { content: none; }
.co-hito__punto {
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--co-linea); background: var(--co-carta);
  margin-top: 0.15rem;
}
.co-hito__eti { font-weight: 600; }
.co-hito__fecha { display: block; font-size: var(--texto-xs); font-variant-numeric: tabular-nums; }
.co-hito--hecho { color: var(--lz-tinta); }
.co-hito--hecho .co-hito__punto { background: var(--c-exito); border-color: var(--c-exito); }
/* Dónde está AHORA. Anillo azul, no ámbar: el ámbar se reserva al dinero. */
.co-hito--actual .co-hito__punto {
  background: var(--co-carta); border-color: var(--lg-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-blue) 22%, transparent);
}
.co-hito--actual { color: var(--lz-tinta); }

/* --- Documentos: REJILLA, no una lista infinita (§6.34) --- */
.co-docs {
  display: grid;
  /* Aquí `auto-fit` sí: el número de documentos lo decide el perfil de esa
     comercializadora (§6.14) y va de tres a nueve. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--esp-4);
  align-items: start;
}
.co-doc {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--esp-4);
  background: var(--co-carta);
  border: 1px solid var(--co-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
}
.co-doc__cab { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.co-doc__titulo { margin: 0; font-size: var(--texto-m); font-family: var(--fuente-marca); font-weight: 600; }
.co-doc__quien { margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
/* LAS TRES DE ABAJO YA SE ESCRIBÍAN en `colaborador/expediente.html` y no
   existían en ninguna hoja: los documentos ya aportados salían con la fecha al
   mismo tamaño que el nombre del fichero y el formulario de subida sin separar.
   Es la misma familia que las siete de §6.79 —una clase inventada no da ningún
   error, solo se ve raro— y no la cazaba el canario porque solo barría las
   plantillas del panel de Admin. Ahora barre también esta. */
.co-doc__meta {
  margin: 0 0 0.4rem; display: flex; flex-wrap: wrap; gap: 0.25rem 0.6rem;
  align-items: baseline; font-size: var(--texto-s); min-width: 0;
}
.co-doc__meta > * { min-width: 0; overflow-wrap: anywhere; }
.co-doc__fecha { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
/* No declara `display` en el estado base a propósito: si algún día se conmuta
   con `hidden`, un `display:` de autor le ganaría al atributo (§6.36/§6.70). */
.co-doc__form:not([hidden]) { display: grid; gap: 0.5rem; }
.co-doc__form { margin: 0.4rem 0 0; }
.co-doc__form .co-boton { justify-self: start; }

/* --- Y cuatro más de la misma familia, también preexistentes ---
   Todas se escribían en `colaborador/expediente.html` y ninguna hoja las
   definía. Ninguna rompía la página —por eso llevaban ahí tanto tiempo— pero
   cada una dejaba algo sin terminar. */

/* El correo y el teléfono del titular, al lado de la pastilla de estado: son
   metadatos, no el titular de la página. Sin regla salían al tamaño del texto
   normal y competían con el nombre, que es lo único que hay que leer ahí. */
.co-expediente__dato {
  font-size: var(--texto-s); color: var(--lz-tinta-suave);
  overflow-wrap: anywhere; min-width: 0;
}

/* «2 hojas» detrás de la vía, dentro del mismo `<dd>`: es una precisión del
   dato, no otro dato. */
.co-datos__extra { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

/* El formulario de «lo he visto» dentro de un aviso: en línea y sin el margen
   que un `<form>` no trae pero que la rejilla del aviso sí espera. */
.co-alerta__accion { margin: 0.4rem 0 0; }

/* El `<summary>` de «corregir el titular»: icono + texto en una línea, con el
   icono a tamaño de texto. Sin regla, el SVG salía a su tamaño intrínseco
   encima de la etiqueta. */
.co-exp-nuevo__toggle {
  display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0;
}
.co-exp-nuevo__toggle svg { width: 1em; height: 1em; flex: none; }
.co-doc__ayuda { margin: 0; font-size: var(--texto-s); color: var(--lz-tinta-suave); }
/* La zona de subida se ancla ABAJO: entre dos tarjetas de la misma fila con
   ayudas de distinto largo, los recuadros quedan nivelados (mismo truco que
   `.area-doc` y sin fijar ninguna altura, que en seis idiomas no aguanta). */
.co-doc__pie { margin-top: auto; padding-top: 0.25rem; }
.co-doc--aportado { border-color: color-mix(in srgb, var(--c-exito) 45%, var(--co-linea)); }
.co-doc--falta { border-color: color-mix(in srgb, var(--c-aviso) 40%, var(--co-linea)); }
.co-doc--rechazado { border-color: color-mix(in srgb, var(--c-error) 50%, var(--co-linea)); }
/* Lo aporta el titular desde su área, o ya lo aportó y no se puede pisar: se
   ve, pero no invita a tocarlo. Es un MODIFICADOR y convive con el estado
   (`co-doc--aportado co-doc--bloqueado`): son dos preguntas distintas —en qué
   estado está el papel y si puedes actuar sobre él— y fundirlas en una sola
   clase obliga a elegir cuál de las dos se cuenta. */
.co-doc--bloqueado { background: var(--lz-papel-2); box-shadow: none; }
.co-doc--bloqueado .co-doc__titulo { color: var(--lz-tinta-suave); }

/* --- F2: aportar un documento EN NOMBRE del titular (§D5) ---
   El formulario es SSR y funciona sin JavaScript (PRG 303). `colaborador.js`
   solo evita la recarga y añade la barra de progreso. */
/* `:not([hidden])`: el JS lo oculta cuando el refresco descubre que ese
   documento acaba de cerrarlo otro, y un `display:` de autor le ganaría al
   `[hidden]` — el formulario seguiría ahí para contestar 409 (§6.36/§6.70). */
.co-doc__subida:not([hidden]) { display: grid; gap: 0.5rem; }
.co-doc__subida { margin: 0; }
.co-doc__subida .co-boton { justify-self: start; }

/* Aviso ANTES de elegir fichero: de las caras del DNI no aceptamos PDF, y el
   escáner de una gestoría produce PDF. Descubrirlo con un 422 DESPUÉS de
   elegir el archivo es fricción evitable (la rasterización está aplazada a su
   propia spec por §6.63). Estilo de la casa (§6.5): sin banda pastel, un punto
   de color como única marca y el texto en tinta. */
.co-doc__aviso {
  position: relative;
  margin: 0; padding-left: 1rem;
  font-size: var(--texto-xs); line-height: 1.45;
  color: var(--c-marino-900);
}
.co-doc__aviso::before {
  content: "";
  position: absolute; left: 0; top: 0.42rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--c-aviso);
}
/* Por qué NO hay nada que subir aquí: lo cerró el titular o lo dio por bueno
   Admin. Un botón ausente y sin explicación acaba en una llamada preguntando
   qué pasa con esa tarjeta. */
.co-doc__cerrado {
  margin: 0; padding-left: 1rem; position: relative;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave); line-height: 1.45;
}
.co-doc__cerrado::before {
  content: "";
  position: absolute; left: 0; top: 0.42rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--c-borde-fuerte);
}

/* El motivo del rechazo, tal cual se lo hemos dicho. Estilo de la casa: sin
   banda pastel (§6.5). Es lo que el colaborador tiene que leer y repetirle
   a su cliente, así que va con el texto en tinta y a tamaño normal. */
.co-revision {
  position: relative;
  margin: 0;
  padding: 0.65rem 0.85rem 0.65rem 1.9rem;
  border: 1px solid color-mix(in srgb, var(--c-error) 35%, var(--c-borde));
  border-radius: var(--radio-m);
  background: var(--c-blanco);
  font-size: var(--texto-s);
}
.co-revision::before {
  content: "";
  position: absolute; left: 0.75rem; top: 0.95rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--c-error);
}
.co-revision__motivo { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.co-revision__fecha { display: block; margin-top: 0.2rem; font-size: var(--texto-xs); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }

/* --- «Qué decirle al cliente» ---
   El asunto y el remitente EXACTOS del correo que le llega al titular. No
   es decoración: sin esto el colaborador no puede decirle qué buscar en su
   bandeja, y el correo de una marca que no conoce acaba en la papelera. */
.co-aviso-cliente {
  background: var(--c-marino-50);
  border: 1px solid var(--c-marino-100);
  border-radius: var(--radio-l);
  padding: var(--esp-4) var(--esp-5);
}
.co-aviso-cliente__titulo { margin: 0 0 var(--esp-3); font-size: var(--texto-m); font-family: var(--fuente-marca); font-weight: 600; }
.co-aviso-cliente__lista { margin: 0; display: grid; gap: var(--esp-2); }
.co-aviso-cliente__lista > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: 0.25rem 0.75rem; }
@media (max-width: 40rem) { .co-aviso-cliente__lista > div { grid-template-columns: minmax(0, 1fr); } }
.co-aviso-cliente__lista dt { font-size: var(--texto-xs); color: var(--lz-tinta-suave); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.co-aviso-cliente__lista dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.co-aviso-cliente__nota { margin: var(--esp-3) 0 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

/* Entradas del detalle: mismo gesto contenido que el resto del área. */
@media (prefers-reduced-motion: no-preference) {
  .co-exp-lateral, .co-doc, .co-aviso-cliente {
    animation: co-entra var(--dur-v2-3) var(--ease-salida-v2) both;
  }
}

/* ============================================================
   MENÚS INTERNOS  (`.co-tg`)
   Una zona con dos o cinco bloques grandes NO se apila hasta el
   infinito: se parte en pestañas internas. Es el patrón `.tg` del
   panel de Admin (§6.34) traído aquí con la piel del área.

   TRES REGLAS que no se pueden romper:
   1. `.co-tg__panel` NO declara `display`. Los paneles se conmutan
      con el atributo `hidden` y un `display:` de autor le gana
      (§6.36/§6.70 — aquí lo tapa además la regla genérica de arriba,
      pero no se escribe igualmente).
   2. Cada grupo marca su raíz con `[data-co-tg]` y el montador se
      acota al MÁS CERCANO: un `querySelectorAll` de descendencia
      completa haría que el grupo de fuera se llevara las pestañas
      del de dentro y las ocultara todas (§6.62).
   3. Sin JavaScript no se oculta nada: los bloques salen apilados y
      todo sigue usable. Por eso el `hidden` lo pone el JS, no el
      servidor.
   ============================================================ */
.co-tg { margin-bottom: 1.5rem; }
.co-tg__nav {
  display: flex; gap: 0.3rem; padding: 0.3rem; margin-bottom: 1.4rem;
  background: var(--c-marino-50); border-radius: var(--radio-pill);
  /* Con muchos rótulos largos (seis idiomas) la barra tiene que poder
     desplazarse EN SÍ MISMA, nunca ensanchar la página (§6.34). */
  overflow-x: auto; scrollbar-width: none;
}
.co-tg__nav::-webkit-scrollbar { display: none; }
.co-tg__tab {
  flex: 1 1 auto; min-width: max-content;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  border: 0; background: transparent; cursor: pointer; font: inherit;
  font-weight: 600; font-size: var(--texto-s); color: var(--c-texto-suave);
  padding: 0.55rem 0.95rem; border-radius: var(--radio-pill);
  transition: background var(--trans-rapida), color var(--trans-rapida);
}
.co-tg__tab:hover { color: var(--lz-tinta); }
.co-tg__tab.es-activa { background: var(--co-carta); color: var(--c-marino-900); box-shadow: var(--sombra-1); }
.co-tg__tab:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-tg__tab svg { width: 1rem; height: 1rem; flex: none; }
.co-tg__n {
  min-width: 1.25rem; padding: 0 0.3rem; border-radius: var(--radio-pill);
  background: var(--c-marino-100); color: var(--c-marino-900);
  font-size: var(--texto-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.co-tg__tab.es-activa .co-tg__n { background: var(--c-marino-900); color: var(--c-amarillo-400); }
.co-tg__panel:focus { outline: none; }

@media (prefers-reduced-motion: no-preference) {
  .co-tg__tab { transition: background 0.25s ease, color 0.25s ease, scale 0.15s ease; }
  .co-tg__tab:active { scale: 0.96; }
  .co-tg__panel:not([hidden]) { animation: co-entra var(--dur-v2-3) var(--ease-salida-v2) both; }
}

/* ============================================================
   DETALLE DE UN ENLACE  (Enlaces → «Ver detalle»)
   Lista y detalle son hermanos EXCLUYENTES por `hidden`, igual que en
   Soporte. Aquí NO hace falta `:not([hidden])` porque ningún bloque de
   esta zona declara `display` (§6.70): si alguien se lo añade, tendrá
   que escribirlo con `:not([hidden])`.
   ============================================================ */
.co-enlace-detalle { display: grid; gap: 1.25rem; }
.co-enlace-detalle__volver {
  justify-self: start; display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0;
}
.co-enlace-detalle__cuerpo { display: grid; gap: 1.25rem; }

.co-ed-cab {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: clamp(1.1rem, 3vw, 1.5rem);
  display: grid; gap: 0.75rem;
}
.co-ed-cab__creado { margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

/* Cuatro cifras que caben en una fila en escritorio y en dos en móvil, sin
   media queries y sin fila coja (§6.44: con un número CONOCIDO de tarjetas
   `auto-fit` deja columnas sueltas, así que aquí van fijas). */
.co-ed-kpis { display: grid; gap: 0.75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 46rem) { .co-ed-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.co-ed-kpi {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota-s); padding: 0.9rem 1rem;
  display: grid; gap: 0.15rem; min-width: 0;
}
.co-ed-kpi__num {
  font-family: var(--fuente-marca); font-size: var(--texto-xl); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1.1;
}
/* Ámbar SOLO donde hay negocio (§6.5): las altas conseguidas. */
.co-ed-kpi--altas .co-ed-kpi__num { color: var(--c-amarillo-500); }
.co-ed-kpi__eti { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

.co-ed-bloque {
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radius-gota); padding: clamp(1.1rem, 3vw, 1.5rem);
}
.co-ed-bloque__titulo {
  font-family: var(--fuente-marca); font-weight: 600; font-size: var(--texto-m);
  margin: 0 0 1rem;
}

/* Banda de 30 días. Alto fijo y barras que reparten el ancho: con 30 valores
   una rejilla `1fr` cada una entra en cualquier pantalla sin scroll. */
.co-ed-banda {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  align-items: end; gap: 2px; height: 5.5rem;
  padding-bottom: 0.15rem; border-bottom: 1px solid var(--co-linea);
}
.co-ed-banda__barra {
  height: max(2px, var(--alto, 0%));
  background: var(--c-marino-600); border-radius: 2px 2px 0 0;
  min-width: 0;
}
/* Un día sin visitas se ve como un día sin visitas, no como un hueco: dos
   píxeles de línea base. Sin esto la banda parece que le faltan barras. */
.co-ed-banda__barra.es-cero { background: var(--co-linea); }

/* Embudo: etiqueta, barra proporcional y número. */
.co-ed-embudo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.co-ed-embudo__fila {
  display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto;
  align-items: center; gap: 0.75rem;
}
@media (max-width: 34rem) {
  .co-ed-embudo__fila { grid-template-columns: minmax(0, 1fr) auto; }
  .co-ed-embudo__barra { grid-column: 1 / -1; }
}
.co-ed-embudo__eti { font-size: var(--texto-s); color: var(--lz-tinta-suave); min-width: 0; }
.co-ed-embudo__barra {
  height: 0.55rem; border-radius: var(--radio-pill);
  background: var(--lz-papel-2); position: relative; overflow: hidden;
}
.co-ed-embudo__barra::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--pct, 0%); border-radius: inherit;
  background: var(--c-marino-600);
}
.co-ed-embudo__fila--aprobada .co-ed-embudo__barra::after { background: var(--c-exito); }
.co-ed-embudo__fila--rechazada .co-ed-embudo__barra::after { background: var(--c-error); }
.co-ed-embudo__fila--sospechosa .co-ed-embudo__barra::after { background: var(--c-aviso); }
.co-ed-embudo__n { font-weight: 700; font-variant-numeric: tabular-nums; }

.co-ed-dinero { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-ed-dinero__dato { display: grid; gap: 0.15rem; min-width: 0; }
.co-ed-dinero__num {
  font-family: var(--fuente-marca); font-size: var(--texto-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.co-ed-dinero__num.es-clave { color: var(--c-amarillo-500); }
.co-ed-dinero__eti { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

.co-ed-hitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.co-ed-hitos__fila {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--co-linea);
}
.co-ed-hitos__fila:last-child { border-bottom: 0; padding-bottom: 0; }
/* `<time>` es inline NO reemplazado: sin `inline-block` no le aplican
   `min-width` ni `overflow` y la fecha se derramaba fuera de su celda
   (§6.76). */
.co-ed-hitos__fecha {
  display: inline-block; margin-left: auto;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.co-ed-nota { margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); max-width: 68ch; }

/* Chips de estado de conversión (los hitos del detalle de un enlace).
   SOLO `--chip`, el color del PUNTO: un modificador que declare `background`
   o `color` propios vuelve a la banda pastel que el dueño vetó (§6.5), y hay
   canario. El mapa de significados es el mismo del resto del área: azul =
   está pasando algo · verde = hecho · ámbar = te toca · rojo = se cayó. */
.co-chip--conv-pendiente { --chip: var(--lg-blue); }
.co-chip--conv-aprobada { --chip: var(--c-exito); }
.co-chip--conv-sospechosa { --chip: var(--c-aviso); }
.co-chip--conv-rechazada { --chip: var(--c-error); }

.co-codigo__ver { display: inline-flex; align-items: center; gap: 0.25rem; }

/* ============================================================
   TARIFAS DEL COLABORADOR  (Comisiones → bloque de cabecera)
   Tres tramos, y el que se aplicaría a la PRÓXIMA alta que tramite va
   destacado: si no, «¿y ahora mismo qué cobro yo?» hay que deducirlo
   cruzando las tres tarjetas.
   Ámbar SOLO en el tramo activo (§6.5): es la cifra de negocio.
   ============================================================ */
.co-tarifas { margin-bottom: 1.75rem; }
.co-tarifas__rejilla {
  display: grid; gap: 0.75rem; margin: 1rem 0 1.25rem;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 48rem) {
  .co-tarifas__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.co-tarifa {
  border: 1px solid var(--co-linea); border-radius: var(--radius-gota-s);
  padding: 1rem 1.1rem; display: grid; gap: 0.3rem; align-content: start;
  background: var(--lz-papel-2); min-width: 0;
}
.co-tarifa--activa {
  background: var(--co-carta);
  border-color: color-mix(in srgb, var(--c-amarillo-500) 45%, var(--co-linea));
  box-shadow: var(--sombra-1);
}
.co-tarifa__pct {
  font-family: var(--fuente-marca); font-size: var(--texto-2xl); font-weight: 700;
  line-height: 1; font-variant-numeric: tabular-nums;
}
.co-tarifa__pct i { font-style: normal; font-size: 0.55em; margin-left: 0.12em; }
.co-tarifa--activa .co-tarifa__pct { color: var(--c-amarillo-500); }
.co-tarifa__nombre { font-weight: 600; font-size: var(--texto-s); }
.co-tarifa__desc { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }

.co-cuota {
  border-top: 1px solid var(--co-linea); padding-top: 1rem;
  display: grid; gap: 0.5rem;
}
.co-cuota__cab {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.5rem 1rem; flex-wrap: wrap;
}
.co-cuota__titulo { font-weight: 600; font-size: var(--texto-s); }
.co-cuota__cifra { font-size: var(--texto-s); color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.co-cuota__nota { margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
.co-tarifas__nota {
  margin: 1rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--co-linea);
  font-size: var(--texto-xs); color: var(--lz-tinta-suave); max-width: 78ch;
}
/* La tasa aplicada a UNA comisión, en su fila de origen. Tinta suave y
   dígitos tabulares: es un dato de comprobación, no un titular. */
.co-comision__pct {
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ============================================================
   CUENTA: resumen + documentos de MUESTRA
   El resumen no tiene NI UN formulario: dice cómo está la cuenta y
   ofrece el botón que lleva a cambiarlo. Tres tarjetas conocidas, así
   que la rejilla es FIJA y no `auto-fit` — con tres tarjetas `auto-fit`
   deja una fila coja en cuanto la pantalla no da para tres (§6.44).
   ============================================================ */
.co-cuenta-resumen {
  display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 56rem) {
  .co-cuenta-resumen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.co-cr { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.co-cr__titulo {
  font-family: var(--fuente-marca); font-weight: 600; font-size: var(--texto-m);
  margin: 0;
}
.co-cr__texto { margin: 0; font-size: var(--texto-s); color: var(--lz-tinta-suave); }
/* EN LA TARJETA DEL RESUMEN LOS DATOS VAN APILADOS, no en dos columnas.
   `.co-datos` reserva 10rem para el rótulo, y en una tarjeta de ~355 px eso
   deja ~130 px para el valor: un correo salía partido en TRES líneas
   («info+colaborad / or@luzgasia.c / om»). Apilado, el valor se queda con el
   ancho entero y se lee de una. El rótulo pasa a cejilla —pequeño y en
   versalitas— para que la pareja se lea como una unidad y no como dos filas. */
.co-cr .co-datos { gap: 0.85rem; }
.co-cr .co-datos > div { grid-template-columns: minmax(0, 1fr); gap: 0.1rem; }
.co-cr .co-datos dt {
  font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: 0.05em;
  font-weight: 700;
}
.co-cr .co-datos dd { font-size: var(--texto-m); line-height: 1.35; }
.co-cr__estado { margin: 0; }
/* El botón cierra la tarjeta por abajo, alineado a la izquierda: estirado
   al ancho parecería la acción principal de la pantalla y no lo es. */
.co-cr > .co-boton { justify-self: start; margin-top: auto; }

.co-doc-muestra { margin-top: 1rem; display: grid; gap: 0.75rem; }
.co-doc-muestra__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem 1rem; flex-wrap: wrap;
}

.co-facturas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.co-factura {
  border: 1px solid var(--co-linea); border-radius: var(--radius-gota-s);
  background: var(--lz-papel-2);
}
.co-factura > details > summary { list-style: none; cursor: pointer; }
.co-factura > details > summary::-webkit-details-marker { display: none; }
.co-factura > details > summary:focus-visible { outline: 2px solid var(--c-foco); outline-offset: -3px; border-radius: var(--radius-gota-s); }
.co-factura__cab {
  display: grid; align-items: center; gap: 0.35rem 0.9rem; padding: 0.8rem 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
}
@media (min-width: 46rem) {
  .co-factura__cab {
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto auto;
  }
}
.co-factura__num { font-weight: 700; font-size: var(--texto-s); overflow-wrap: anywhere; }
.co-factura__mes { font-size: var(--texto-s); color: var(--lz-tinta-suave); }
.co-factura__n { font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
.co-factura__total {
  font-weight: 700; font-variant-numeric: tabular-nums; text-align: right;
  white-space: nowrap;
}
.co-factura__total.es-clave { color: var(--c-amarillo-500); }
/* La tabla va dentro de su PROPIO scroller: una referencia de transferencia
   larga no puede ensanchar la página (§6.34). */
.co-factura__tabla {
  width: 100%; border-collapse: collapse; display: block; overflow-x: auto;
  padding: 0 1rem 0.9rem; font-size: var(--texto-s);
}
.co-factura__tabla td,
.co-factura__tabla th {
  padding: 0.4rem 0.5rem; text-align: left; border-top: 1px solid var(--co-linea);
}
.co-factura__tabla tfoot th { font-weight: 700; }
.co-factura__ref { color: var(--lz-tinta-suave); overflow-wrap: anywhere; }
.co-factura__imp { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ============================================================
   LO QUE SE LLEVA UN `scrollIntoView` EN ESTA ÁREA
   Hay DOS barras pegajosas encima del contenido: la cabecera del sitio
   (`--altura-cabecera`, 69 px) y la navegación del área (`.co-nav`,
   57 px). `base.css` ya declara `scroll-padding-top` para la primera,
   pero NO conoce la segunda: cualquier `scrollIntoView({block:'start'})`
   dejaba el destino DEBAJO del menú.

   No es cosmético — es de la familia de §6.70: el elemento se considera
   «visible», el navegador no vuelve a moverlo, y el clic se lo lleva el
   botón del menú que está encima. Medido: al saltar a una pestaña interna
   desde el resumen de la cuenta, `elementFromPoint` sobre la barra de
   pestañas devolvía `button.co-nav__paso` — o sea que la barra estaba ahí
   y era INPULSABLE. Igual le pasaba al detalle de un ticket, que ya hacía
   `scrollIntoView` desde antes.

   `scroll-margin-block-start` es justo la propiedad: no mueve nada de
   sitio, solo le dice al navegador dónde empieza de verdad el hueco útil.
   Sobrarse solo hace que aterrice un poco más abajo; quedarse corto lo
   deja debajo de la barra.
   ============================================================ */
.co-tg,
.co-ticket-detalle,
.co-enlace-detalle { scroll-margin-block-start: calc(var(--altura-cabecera) + 4.25rem); }

/* Contador de longitud: nace `hidden` y solo lo enciende el JS cerca del
   límite. Tinta suave y dígitos tabulares — es una ayuda, no una alarma. */
.campo__contador {
  margin: 0.25rem 0 0; text-align: right;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums;
}
/* Las áreas que crecen solas no se pueden redimensionar a mano: el tirador
   pelearía con el alto que calcula el JS en cada tecla. */
.co-cuerpo textarea[data-autocrece] { resize: none; }

/* Cabecera del detalle de un ticket: estado, tipo, fecha y —si lo hay— el
   enlace a su expediente. Lo rellena `colaborador.js`; el contenedor nace
   vacío, así que sin JavaScript no deja ni un hueco. */
.co-ticket-detalle__meta {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: var(--texto-s);
}

/* ============================================================
   EL EXPEDIENTE POR FASES  (2026-09-05)
   Cuatro pasos sobre un mismo formulario: la factura · lo que ahorra ·
   de quién es · el papel firmado.

   NI `.co-paso` NI `.co-pasos` DECLARAN `display`. Los pasos se conmutan
   con `hidden` y un `display:` de autor le gana al atributo — en esta
   casa ya ha mordido tres veces (§6.36, §6.70, §6.77). Si algún día uno
   necesita ser rejilla, la rejilla va en un hijo, nunca aquí.
   ============================================================ */

.co-pasos {
  display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-3);
  margin: 0 0 var(--esp-3); padding: 0; list-style: none;
  /* Las DOS barras pegajosas de esta área (cabecera 69px + `.co-nav` 57px).
     Sin esto, `scrollIntoView` al cambiar de paso deja la barra DEBAJO del
     menú: el navegador la da por visible, no la vuelve a mover y el clic se
     lo lleva el botón que está encima (§6.77). */
  scroll-margin-block-start: 8.5rem;
}
.co-pasos__item {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  min-width: 0;
}
.co-pasos__num {
  flex: none;
  width: 1.6rem; height: 1.6rem; border-radius: 999px;
  display: grid; place-items: center;
  border: 1px solid var(--co-linea); background: var(--co-carta);
  font-variant-numeric: tabular-nums; font-weight: 700;
}
.co-pasos__txt { overflow-wrap: anywhere; }
.co-pasos__item.es-activo { color: var(--lz-tinta); font-weight: 600; }
.co-pasos__item.es-activo .co-pasos__num {
  border-color: var(--lz-tinta); background: var(--lz-tinta); color: var(--co-carta);
}
/* Un paso YA HECHO se marca con el punto lleno, no con un tic dibujado en
   CSS: el estilo de la casa es superficie limpia y un punto de color como
   única marca (§6.5). */
.co-pasos__item.es-hecho .co-pasos__num {
  border-color: var(--lz-tinta); color: var(--lz-tinta);
}

/* --- Fase 2: qué compañía gana --- */
.co-resumen {
  border: 1px solid var(--co-linea); border-radius: var(--radio-m);
  background: var(--co-carta); padding: var(--esp-3);
  margin-bottom: var(--esp-3);
}
.co-resumen__eyebrow {
  margin: 0 0 var(--esp-2); font-size: var(--texto-xs); letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--lz-tinta-suave);
}
.co-resumen__marca {
  display: flex; align-items: center; gap: var(--esp-2); margin-bottom: var(--esp-2);
  min-width: 0;
}
.co-resumen__marca > div { min-width: 0; }
.co-resumen__logo { flex: none; }
.co-resumen__compania {
  margin: 0; font-family: var(--fuente-marca); font-size: var(--texto-l);
  font-weight: 700; overflow-wrap: anywhere;
}
.co-resumen__tarifa {
  margin: 0; font-size: var(--texto-s); color: var(--lz-tinta-suave);
  overflow-wrap: anywhere;
}
/* ÁMBAR AQUÍ, en la cifra, no en el contenedor: es el dinero en juego, y en
   el padre no se pinta (pasó en Finanzas y en el resumen del área, §6.74). */
.co-resumen__cifra {
  margin: 0 0 var(--esp-2);
  font-family: var(--fuente-marca); font-size: var(--texto-xl); font-weight: 800;
  color: var(--c-amarillo-500); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.co-resumen__pie {
  margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); line-height: 1.5;
}

/* Los bloques de un paso se separan igual que el resto del formulario, y
   `scroll-margin` también, porque el foco puede aterrizar en uno de ellos. */
.co-paso { scroll-margin-block-start: 8.5rem; }
.co-paso > * + * { margin-top: var(--esp-3); }

/* ============================================================
   PASO 1 COMPACTO, LA ESPERA Y EL MOVIMIENTO  (2026-09-05)
   Reportado por el dueño: «el contenido no hace un bloque compacto,
   faltan transiciones y animaciones», con el hueco a la derecha del
   código postal señalado.
   ============================================================ */

/* --- El punto de suministro: DOS columnas, no `auto-fit` ---
   La rejilla de fuera reparte con `auto-fit`, que con dos campos y sitio
   para cuatro columnas dejaba media fila en blanco — el hueco de la
   captura. Aquí el número de campos se CONOCE, así que se declara
   (§6.51: `auto-fit` con un número conocido deja filas cojas).
   `minmax(0,1fr)` + `min-width:0` en los hijos porque un item de grid
   nace con `min-width:auto` y un CUPS de 22 caracteres ensancharía la
   celda (§6.76). */
.co-punto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--esp-3) var(--esp-4);
}
.co-punto > * { min-width: 0; }
@media (max-width: 34rem) {
  .co-punto { grid-template-columns: minmax(0, 1fr); }
}

/* --- El paso, como una unidad ---
   Antes los bloques flotaban sueltos con el aire de la rejilla entre
   ellos. Ahora cada grupo es una superficie con su borde fino: se lee
   como «esto va junto» sin añadir ni una línea de texto. */
.co-paso > .co-form__campos,
.co-paso > .co-form__vias {
  margin-bottom: var(--esp-3);
}
.co-paso .campo--ancho > .campo__etiqueta,
.co-paso .campo--ancho > .campo__etiqueta:first-child { margin-bottom: 0.4rem; }

/* --- Movimiento ---
   Todo detrás de la puerta de motion (§6.5). Sin ella, nada se mueve y
   la pantalla sigue siendo exactamente la misma. */
@media (prefers-reduced-motion: no-preference) {
  /* El paso que ENTRA. Suave y corto: es un cambio de contenido dentro
     de la misma tarjeta, no una navegación. */
  .co-paso:not([hidden]) { animation: co-paso-entra 260ms ease-out both; }
  @keyframes co-paso-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  /* Las tarjetas de opción responden al puntero y al foco. */
  .co-opcion { transition: border-color 160ms ease, background-color 160ms ease,
                           transform 160ms ease; }
  .co-opcion:hover { transform: translateY(-1px); }
  /* El chip de un paso ya hecho se rellena. */
  .co-pasos__num { transition: background-color 200ms ease, border-color 200ms ease,
                               color 200ms ease; }
}

/* --- LA ESPERA (leer una factura son ~7 s) ---
   Sin nada que mirar, siete segundos parecen una pantalla colgada. Los
   tres rótulos describen lo que de verdad hace el servidor, en ese
   orden: no es una barra de progreso inventada. */
.co-cargando {
  display: grid; justify-items: center; gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-3);
  border: 1px solid var(--co-linea); border-radius: var(--radio-m);
  background: var(--co-carta);
  text-align: center;
}
.co-cargando__gota { display: flex; gap: 0.5rem; }
/* Tres gotas de la marca. Sin movimiento se ven las tres quietas, que
   sigue siendo un indicador legible. */
.co-cargando__gota span {
  width: 0.7rem; height: 0.7rem;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--c-amarillo-500);
  opacity: 0.35;
}
.co-cargando__titulo {
  margin: 0; font-family: var(--fuente-marca); font-weight: 700;
  font-size: var(--texto-m);
}
.co-cargando__pasos {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 0.3rem;
  font-size: var(--texto-s); color: var(--lz-tinta-suave);
}
/* El paso en curso se destaca; los ya hechos quedan tenues. */
.co-cargando__pasos li { opacity: 0.45; }
.co-cargando__pasos li.es-activo { opacity: 1; color: var(--lz-tinta); font-weight: 600; }
.co-cargando__pasos li.es-hecho { opacity: 0.7; }

@media (prefers-reduced-motion: no-preference) {
  .co-cargando { animation: co-paso-entra 260ms ease-out both; }
  .co-cargando__gota span { animation: co-gota 1.1s ease-in-out infinite; }
  .co-cargando__gota span:nth-child(2) { animation-delay: 0.15s; }
  .co-cargando__gota span:nth-child(3) { animation-delay: 0.3s; }
  @keyframes co-gota {
    0%, 100% { opacity: 0.3; transform: rotate(-45deg) scale(0.85); }
    50%      { opacity: 1;   transform: rotate(-45deg) scale(1.15); }
  }
  .co-cargando__pasos li { transition: opacity 240ms ease, color 240ms ease; }
}

/* --- La barra de pasos y su salida ---
   La barra y el botón de salir comparten fila: los pasos a la izquierda,
   la puerta a la derecha. En estrecho el botón cae debajo, alineado al
   final, para que no compita con los pasos. */
.co-pasos-barra {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--esp-2);
  margin-bottom: var(--esp-3);
}
.co-pasos-barra > .co-pasos { margin-bottom: 0; }
.co-pasos-barra__salir { margin-left: auto; }

/* Dónde se quedó un expediente a medias. Va junto al rótulo, en tono menor: es
   una precisión del estado, no otro estado. */
.co-exp__paso {
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
  white-space: nowrap;
}

/* ============================================================
   PLEGABLE OPCIONAL Y ESCÁNER DE FACTURA  (2026-09-05)
   ============================================================ */

/* --- Un `<details>` con la piel de la casa ---
   Nativo a propósito: se abre sin JavaScript y no necesita ni una línea de
   código. Lo único que se hace aquí es que no parezca un `<details>` de
   navegador. */
.co-plegable {
  border: 1px solid var(--co-linea);
  border-radius: var(--radio-m);
  background: var(--co-carta);
  margin-bottom: var(--esp-3);
}
.co-plegable__cab {
  display: flex; align-items: center; gap: 0.6rem;
  padding: var(--esp-3);
  cursor: pointer; list-style: none;
  font-weight: 600; min-width: 0;
}
/* El triángulo del navegador fuera: se sustituye por el chevron propio, que
   sí gira. En WebKit hace falta el pseudo-elemento aparte. */
.co-plegable__cab::-webkit-details-marker { display: none; }
.co-plegable__cab:focus-visible { outline: 2px solid var(--c-foco); outline-offset: -2px; }
.co-plegable__icono { display: inline-flex; flex: none; }
.co-plegable__icono svg { width: 1.1em; height: 1.1em; }
.co-plegable__txt { min-width: 0; overflow-wrap: anywhere; }
/* «Opcional» al final de la fila: es la respuesta a «¿esto lo tengo que
   rellenar?», y ponerla lejos del título obliga a buscarla. */
.co-plegable__pista {
  margin-left: auto; flex: none;
  font-size: var(--texto-xs); font-weight: 500; color: var(--lz-tinta-suave);
  border: 1px solid var(--co-linea); border-radius: var(--radio-pill);
  padding: 0.1rem 0.55rem;
}
.co-plegable__cuerpo { padding: 0 var(--esp-3) var(--esp-3); }
@media (prefers-reduced-motion: no-preference) {
  .co-plegable__icono svg { transition: transform 200ms ease; }
  .co-plegable[open] > .co-plegable__cab .co-plegable__icono svg { transform: rotate(180deg); }
  .co-plegable[open] > .co-plegable__cuerpo { animation: co-paso-entra 220ms ease-out both; }
}

/* --- EL ESCÁNER ---
   Una hoja con sus renglones y un haz que la recorre. Se parece a lo que de
   verdad está pasando —leer una factura—, que es lo único que hace que una
   espera de siete segundos se lleve bien. */
.co-escaner {
  position: relative;
  width: 7.5rem; height: 9.5rem;
  border-radius: var(--radio-s);
  overflow: hidden;                 /* el haz no se sale de la hoja */
  background: var(--co-carta);
  border: 1px solid var(--co-linea);
  box-shadow: 0 6px 18px -12px rgba(0, 0, 0, 0.45);
}
.co-escaner__hoja {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 0.5rem; padding: 0.9rem;
}
.co-escaner__linea {
  display: block; height: 0.42rem; border-radius: 999px;
  background: var(--co-linea);
}
.co-escaner__linea--titulo { height: 0.6rem; width: 65%; background: var(--c-marino-700); opacity: 0.55; }
.co-escaner__linea--corta { width: 55%; }
/* El haz: una banda ámbar difuminada. Sin movimiento se queda arriba y no
   molesta — la hoja sola ya se lee como «un documento». */
.co-escaner__haz {
  position: absolute; left: 0; right: 0; top: 0; height: 32%;
  background: linear-gradient(
    to bottom,
    transparent,
    color-mix(in srgb, var(--c-amarillo-500) 28%, transparent),
    color-mix(in srgb, var(--c-amarillo-500) 55%, transparent)
  );
  border-bottom: 2px solid var(--c-amarillo-500);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .co-escaner__haz { opacity: 1; animation: co-escaneo 1.9s ease-in-out infinite; }
  @keyframes co-escaneo {
    0%   { transform: translateY(-110%); }
    50%  { transform: translateY(215%); }
    100% { transform: translateY(-110%); }
  }
  /* Los renglones «se leen»: se encienden por turnos según pasa el haz. */
  .co-escaner__linea { animation: co-renglon 1.9s ease-in-out infinite; }
  .co-escaner__linea:nth-child(2) { animation-delay: 0.15s; }
  .co-escaner__linea:nth-child(3) { animation-delay: 0.3s; }
  .co-escaner__linea:nth-child(4) { animation-delay: 0.45s; }
  .co-escaner__linea:nth-child(5) { animation-delay: 0.6s; }
  .co-escaner__linea:nth-child(6) { animation-delay: 0.75s; }
  @keyframes co-renglon {
    0%, 100% { background: var(--co-linea); }
    30%      { background: color-mix(in srgb, var(--c-marino-700) 45%, var(--co-linea)); }
  }
}

/* La caja de espera, con la hoja arriba y los rótulos debajo. */
.co-cargando { padding-block: var(--esp-5); }

/* ============================================================
   LA FICHA DEL EXPEDIENTE, COMO EL ÁREA DEL TITULAR  (2026-09-05)
   Cinco pestañas internas (`.co-tg`, el patrón de la casa) y tarjetas
   de UN requisito cada una. Reglas que no se pueden romper aquí:
   · `.co-tg__panel` NO declara `display` (se conmuta por `hidden`).
   · Los tracks de las rejillas van con `minmax(0, 1fr)` y los hijos con
     `min-width: 0` (§6.76/§6.79): una máscara de IBAN o un correo largo
     no pueden ensanchar su tarjeta.
   ============================================================ */

/* La ficha ocupa TODO el ancho: ya no hay lateral. */
.co-expediente--ficha { display: block; }
.co-expediente--ficha > * + * { margin-top: var(--esp-4); }
.co-expediente--ficha .co-expediente__cab { margin-bottom: 0; }

.co-tg--ficha { margin-bottom: 0; }
.co-tg--ficha .co-tg__panel { padding-top: var(--esp-2); }
.co-ficha__intro {
  margin: 0 0 var(--esp-4);
  color: var(--lz-tinta-suave);
  max-width: 76ch;
}
/* Rejilla de tarjetas: dos o tres columnas cuando hay sitio, una cuando no. */
.co-ficha__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: var(--esp-4);
  align-items: start;
}
.co-ficha__rejilla > * { min-width: 0; }
.co-card--ancha { grid-column: 1 / -1; }

/* --- La tarjeta --- */
.co-card {
  background: var(--co-carta);
  border: 1px solid var(--co-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra-1);
  padding: var(--esp-5);
  display: flex; flex-direction: column; gap: var(--esp-3);
  min-width: 0;
}
.co-card.es-aportada { border-color: color-mix(in srgb, var(--c-exito) 45%, var(--co-linea)); }
.co-card__cab {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--esp-2); flex-wrap: wrap;
}
.co-card__titulo {
  margin: 0; font-family: var(--fuente-marca); font-weight: 700;
  font-size: var(--texto-m); line-height: 1.25; min-width: 0;
}
.co-card__ayuda { margin: 0; color: var(--lz-tinta-suave); font-size: var(--texto-s); }
.co-card__pie { margin: 0; font-size: var(--texto-s); }
.co-card__pie a { color: var(--c-marino-700); font-weight: 600; }
.co-card__ok { margin: 0; color: var(--c-exito); font-weight: 600; }
.co-card__form { margin: 0; }
.co-card .co-form__acciones { margin-top: 0; }
.co-card .campo { min-width: 0; }
.co-card .campo__entrada { width: 100%; min-width: 0; }
.co-form__campos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.co-form__campos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 40rem) {
  .co-form__campos--dos, .co-form__campos--tres { grid-template-columns: minmax(0, 1fr); }
}
.co-form--inline { display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0; }

/* Estado de un requisito en la esquina de su tarjeta. Un PUNTO de color
   como única marca (§6.5), texto en tinta. */
.co-tag {
  flex: none; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.15rem 0.6rem; border-radius: var(--radio-pill);
  border: 1px solid var(--co-linea); background: var(--co-carta);
  font-size: var(--texto-xs); font-weight: 700; color: var(--lz-tinta);
}
.co-tag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-aviso); }
.co-tag--ok::before { background: var(--c-exito); }
.co-tag--neutro::before { background: var(--c-marino-100); }

/* Dato guardado (máscara). */
.co-mascara {
  margin: 0; display: inline-flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.35rem 0.75rem; border-radius: var(--radio-m);
  background: var(--c-marino-50); font-size: var(--texto-s); min-width: 0;
}
.co-mascara__eti { color: var(--lz-tinta-suave); }
.co-mascara__valor {
  font-weight: 700; color: var(--c-marino-900); letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.co-consent { margin: 0; }

/* --- Sí / No y las opciones de tipo --- */
.co-si-no { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
.co-si-no--tres { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.co-si-no--tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 40rem) {
  .co-si-no--tres, .co-si-no--tarjetas { grid-template-columns: minmax(0, 1fr); }
}
.co-si-no__op {
  min-width: 0; padding: 0.55rem var(--esp-3);
  border-radius: var(--radio-m); border: 2px solid var(--co-linea);
  background: var(--co-carta); color: var(--lz-tinta);
  font: inherit; font-weight: 700; font-size: var(--texto-s); cursor: pointer;
  text-align: center; overflow-wrap: anywhere;
}
.co-si-no__op:hover:not(:disabled) { border-color: var(--c-marino-100); }
.co-si-no__op:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-si-no__op.es-activa { border-color: var(--c-marino-900); background: var(--c-marino-900); color: var(--c-texto-inverso); }
.co-si-no__op:disabled { opacity: 0.55; cursor: not-allowed; }
.co-si-no--mini .co-si-no__op { min-width: 4.5rem; padding: 0.4rem 0.8rem; }
.co-si-no__op--tarjeta { text-align: left; display: grid; gap: 0.25rem; padding: var(--esp-3); }
.co-si-no__titulo { font-weight: 700; }
.co-si-no__desc { font-weight: 500; font-size: var(--texto-xs); opacity: 0.85; }
@media (prefers-reduced-motion: no-preference) {
  .co-si-no__op { transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease; }
}

/* --- Los opcionales del alta, en UN recuadro --- */
.co-prefs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--esp-2); }
.co-prefs__item {
  border: 1px solid var(--co-linea); border-radius: var(--radio-m);
  padding: var(--esp-3); min-width: 0;
}
.co-prefs__item.es-contestada { border-color: color-mix(in srgb, var(--c-exito) 40%, var(--co-linea)); }
.co-prefs__form {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--esp-2) var(--esp-4);
  align-items: center;
}
.co-prefs__form > .co-prefs__detalle, .co-prefs__form > .co-alerta { grid-column: 1 / -1; }
.co-prefs__texto { min-width: 0; }
.co-prefs__titulo { margin: 0; font-weight: 700; }
.co-prefs__desc { margin: 0.15rem 0 0; color: var(--lz-tinta-suave); font-size: var(--texto-s); }
.co-prefs__precio { margin: 0.3rem 0 0; font-size: var(--texto-s); }
.co-prefs__nota { color: var(--lz-tinta-suave); }
.co-prefs__detalle { margin: 0; }
.co-prefs__masivo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin: 0; }
@media (max-width: 40rem) {
  .co-prefs__form { grid-template-columns: minmax(0, 1fr); }
}

/* --- Resumen: el estado grande --- */
.co-estado-grande { display: flex; align-items: center; gap: var(--esp-3); }
.co-estado-grande__punto {
  flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%;
  background: var(--c-marino-100); box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
  color: var(--c-marino-100);
}
.co-estado-grande__rot { margin: 0; font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); line-height: 1.2; }
.co-estado-grande__sub { margin: 0.15rem 0 0; color: var(--lz-tinta-suave); font-size: var(--texto-s); }
.co-hitos--compacta { margin-top: var(--esp-2); }
.co-progreso__cifra--mini { margin: 0; font-size: var(--texto-l); }
.co-reqs--ficha a { color: inherit; text-decoration: none; display: block; }
.co-reqs--ficha a:hover { text-decoration: underline; }
.co-lista-estado { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.co-lista-estado__item {
  position: relative; padding-left: 1.4rem; color: var(--lz-tinta-suave); font-size: var(--texto-s);
}
.co-lista-estado__item::before {
  content: ""; position: absolute; left: 0.2rem; top: 0.45em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--c-aviso);
}
.co-lista-estado__item.es-ok { color: var(--lz-tinta); }
.co-lista-estado__item.es-ok::before { background: var(--c-exito); }
.co-lista-estado__nota { display: block; font-size: var(--texto-xs); }
.co-datos--apilada > div { display: grid; gap: 0.15rem; }
.co-datos--apilada dt { font-size: var(--texto-xs); }
.co-datos__cifra { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); color: var(--c-marino-900); }
.co-docs--ficha { margin-top: 0; }
.co-doc--opcional { opacity: 0.92; }
.co-chip--suave { opacity: 0.8; }

/* Sin cuenta todavía: qué toca hacer. */
.co-ficha-aviso { display: grid; gap: var(--esp-3); justify-items: start; }
.co-ficha-aviso__txt { margin: 0; }
.co-ficha-sin-cuenta { display: grid; gap: var(--esp-3); }

/* --- Los RÓTULOS del colaborador (2026-09-05) ---
   Como el resto de chips: SOLO el color del punto (`--chip`, §6.5). Gris
   (abriste), azul (en manos del titular), ámbar (te falta algo), marino
   (nuestro trabajo), verde (lanzado / activo); cancelado y baja ya son rojos. */
.co-chip--rot-abriste { --chip: var(--c-marino-100); }
.co-chip--rot-solicitud_correo { --chip: var(--lg-blue); }
.co-chip--rot-faltan_datos { --chip: var(--c-aviso); }
.co-chip--rot-revisado { --chip: var(--c-marino-900); }
.co-chip--rot-lanzado, .co-chip--rot-activo { --chip: var(--c-exito); }
.co-estado-grande__punto--abriste { color: var(--c-marino-100); background: var(--c-marino-100); }
.co-estado-grande__punto--solicitud_correo { color: var(--lg-blue); background: var(--lg-blue); }
.co-estado-grande__punto--faltan_datos { color: var(--c-aviso); background: var(--c-aviso); }
.co-estado-grande__punto--revisado { color: var(--c-marino-900); background: var(--c-marino-900); }
.co-estado-grande__punto--lanzado, .co-estado-grande__punto--activo { color: var(--c-exito); background: var(--c-exito); }
.co-estado-grande__punto--cancelado, .co-estado-grande__punto--baja { color: var(--c-error); background: var(--c-error); }
/* Las cuatro tarjetas del Resumen. Modificadores con regla propia (§6.79):
   la de estado y la de «qué falta» arriba, a la misma altura. */
.co-card--estado { border-top: 3px solid var(--c-marino-900); }
.co-card--falta { border-top: 3px solid var(--c-amarillo-400); }
.co-card--titular .co-aviso-cliente__lista { margin-top: var(--esp-2); }
.co-card--analisis .co-datos { margin: 0; }

/* ============================================================
   FICHA: LATERAL QUE GUÍA, HITOS ARRIBA, ANCHO COMPLETO  (2026-09-06)
   ============================================================ */
/* La ficha usa TODO el ancho (petición del dueño: «no limites el ancho»). */
.co-paneles--ancho { max-width: min(100%, 110rem); }

/* Los hitos, en horizontal, encima del menú interno: es el estado del
   expediente y por eso va ahí. Siete pasos; en estrecho se vuelve una tira
   con scroll propio (la página nunca scrollea de lado). */
.co-stepper {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0; counter-reset: paso;
  background: var(--co-carta); border: 1px solid var(--co-linea);
  border-radius: var(--radio-l); padding: var(--esp-3) var(--esp-2);
}
.co-stepper__paso {
  position: relative; display: grid; justify-items: center; gap: 0.35rem;
  text-align: center; min-width: 0; padding: 0 0.35rem;
  color: var(--lz-tinta-suave); font-size: var(--texto-xs); font-weight: 600;
}
.co-stepper__paso::before {
  content: ""; position: absolute; top: 0.7rem; left: 50%; right: -50%;
  height: 2px; background: var(--co-linea);
}
.co-stepper__paso:last-child::before { content: none; }
.co-stepper__punto {
  position: relative; z-index: 1;
  width: 1.45rem; height: 1.45rem; border-radius: 50%;
  border: 2px solid var(--co-linea); background: var(--co-carta);
  display: grid; place-items: center;
}
.co-stepper__punto svg { width: 0.85rem; height: 0.85rem; display: none; }
.co-stepper__eti { overflow-wrap: anywhere; line-height: 1.25; }
.co-stepper__fecha { font-weight: 500; font-variant-numeric: tabular-nums; opacity: 0.85; }
.co-stepper__paso.es-hecho { color: var(--lz-tinta); }
.co-stepper__paso.es-hecho .co-stepper__punto { background: var(--c-exito); border-color: var(--c-exito); color: var(--c-texto-inverso); }
.co-stepper__paso.es-hecho .co-stepper__punto svg { display: block; }
.co-stepper__paso.es-hecho::before { background: var(--c-exito); }
.co-stepper__paso.es-actual { color: var(--lz-tinta); }
.co-stepper__paso.es-actual .co-stepper__punto {
  border-color: var(--lg-blue);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--lg-blue) 22%, transparent);
}
.co-stepper__paso.es-opuso .co-stepper__punto { background: var(--c-error); border-color: var(--c-error); }
@media (max-width: 60rem) {
  .co-stepper { display: flex; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .co-stepper::-webkit-scrollbar { display: none; }
  .co-stepper__paso { flex: 0 0 7.5rem; }
}

/* Cuerpo: lateral pegajoso a la izquierda, contenido a la derecha. */
.co-ficha__cuerpo {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-4); align-items: start;
}
@media (min-width: 64rem) {
  .co-ficha__cuerpo { grid-template-columns: 19rem minmax(0, 1fr); }
  /* Sigue al scroll por debajo de las DOS barras pegajosas del área (§6.77). */
  .co-ficha__lateral { position: sticky; top: 8.75rem; }
}
.co-ficha__lateral { min-width: 0; }
.co-ficha__principal { min-width: 0; }
.co-ficha__lateral .co-card { padding: var(--esp-4); gap: var(--esp-2); }
.co-reqs--ficha { max-height: min(60vh, 34rem); overflow: auto; padding-right: 0.25rem; }
.co-reqs--ficha .co-req { cursor: pointer; }
.co-reqs--ficha a:hover .co-req__quien { text-decoration: none; }
/* La tarjeta a la que acabamos de saltar se ilumina un instante. */
.co-card.es-destacada, .co-doc.es-destacada { box-shadow: 0 0 0 3px color-mix(in srgb, var(--lg-blue) 35%, transparent), var(--sombra-1); }
@media (prefers-reduced-motion: no-preference) {
  .co-card, .co-doc { transition: box-shadow 260ms ease; }
}

/* Resumen: los datos del expediente en texto plano, a dos columnas. */
.co-resumen-datos {
  margin: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: var(--esp-3) var(--esp-4);
}
.co-resumen-datos > div { display: grid; gap: 0.15rem; min-width: 0; }
.co-resumen-datos dt { font-size: var(--texto-xs); color: var(--lz-tinta-suave); font-weight: 600; letter-spacing: 0.02em; }
.co-resumen-datos dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.co-resumen-datos dd small { display: block; font-weight: 500; color: var(--lz-tinta-suave); }

/* «Leído de la factura: compruébalo». */
.co-sug { color: var(--c-marino-700); font-weight: 600; }
.co-sug::before { content: "↳ "; }

/* El final del asistente, en grande. */
.co-final {
  display: grid; justify-items: start; gap: var(--esp-3);
  padding: var(--esp-6) var(--esp-5);
  border: 1px solid color-mix(in srgb, var(--c-exito) 40%, var(--co-linea));
  border-radius: var(--radio-l); background: var(--co-carta);
}
.co-final__icono {
  display: inline-grid; place-items: center; width: 3.25rem; height: 3.25rem;
  border-radius: 50%; background: var(--c-exito-fondo); color: var(--c-exito);
}
.co-final__icono svg { width: 1.6rem; height: 1.6rem; }
.co-final__titulo { margin: 0; font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-2xl); line-height: 1.1; }
.co-final__texto { margin: 0; color: var(--lz-tinta-suave); max-width: 70ch; }
.co-final__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
@media (prefers-reduced-motion: no-preference) {
  .co-final:not([hidden]) { animation: co-paso-entra 320ms ease-out both; }
}

/* ============================================================
   CONTRATOS: BUSCADOR + ESTADOS EN DESPLEGABLE + FECHAS + PAGINADO
   (2026-09-06)
   ============================================================ */
.co-filtros-exp {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 0.75rem;
  margin: 0 0 1.1rem;
}
.co-busca {
  flex: 1 1 16rem; min-width: 0; position: relative; display: block;
}
.co-busca svg {
  position: absolute; left: 0.75rem; top: 50%; translate: 0 -50%;
  width: 1.05rem; height: 1.05rem; color: var(--lz-tinta-suave); pointer-events: none;
}
.co-busca__campo {
  width: 100%; font: inherit; font-size: var(--texto-s);
  padding: 0.55rem 0.85rem 0.55rem 2.4rem; border-radius: var(--radio-pill);
  border: 1px solid var(--co-linea); background: var(--co-carta); color: var(--lz-tinta);
}
.co-busca__campo:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-busca__campo::-webkit-search-cancel-button { cursor: pointer; }

/* El desplegable de estados: un <details> con la caja flotando debajo. */
.co-desplegable { position: relative; }
.co-desplegable__boton {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
  border: 1px solid var(--co-linea); background: var(--co-carta);
  color: var(--lz-tinta); font-weight: 600; font-size: var(--texto-s);
  padding: 0.5rem 0.85rem; border-radius: var(--radio-pill); white-space: nowrap;
}
.co-desplegable__boton::-webkit-details-marker { display: none; }
.co-desplegable__boton svg { width: 0.95rem; height: 0.95rem; }
.co-desplegable[open] .co-desplegable__boton { border-color: var(--c-marino-900); }
.co-desplegable[open] .co-desplegable__boton svg { rotate: 180deg; }
.co-desplegable__boton:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-desplegable__caja {
  position: absolute; z-index: 30; top: calc(100% + 0.4rem); left: 0;
  min-width: 16rem; display: grid; gap: 0.15rem;
  padding: 0.5rem; border-radius: var(--radio-l);
  border: 1px solid var(--co-linea); background: var(--co-carta); box-shadow: var(--sombra-2);
}
.co-desplegable__op {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.45rem 0.6rem; border-radius: var(--radio-m); font-size: var(--texto-s);
}
.co-desplegable__op:hover { background: var(--c-marino-50); }
.co-desplegable__op input { accent-color: var(--c-marino-900); width: 1rem; height: 1rem; margin: 0; }
.co-desplegable__txt { flex: 1; }
.co-desplegable__n { font-variant-numeric: tabular-nums; color: var(--lz-tinta-suave); font-weight: 700; }
.co-desplegable__op--accion .co-desplegable__txt::before {
  content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--c-aviso); margin-right: 0.4rem; vertical-align: middle;
}
.co-desplegable__pie {
  margin: 0.25rem 0 0; padding: 0.45rem 0.6rem 0.15rem; border-top: 1px solid var(--co-linea);
  font-size: var(--texto-xs); color: var(--lz-tinta-suave);
}
.co-desplegable__pie button { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

.co-filtros-exp__fecha { display: grid; gap: 0.2rem; font-size: var(--texto-xs); color: var(--lz-tinta-suave); font-weight: 600; }
.co-filtros-exp__fecha input {
  font: inherit; font-size: var(--texto-s); color: var(--lz-tinta);
  padding: 0.45rem 0.6rem; border-radius: var(--radio-m);
  border: 1px solid var(--co-linea); background: var(--co-carta); min-width: 9.5rem;
}
.co-filtros-exp__fecha input:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-filtros-exp__limpiar { align-self: center; font-size: var(--texto-s); white-space: nowrap; }
@media (max-width: 46rem) {
  .co-busca { flex-basis: 100%; }
  .co-filtros-exp__fecha { flex: 1 1 8rem; }
  .co-filtros-exp__fecha input { min-width: 0; width: 100%; }
}
.co-vacio--fila { list-style: none; }

/* Paginado numerado. */
.co-paginacion--num .co-paginacion__botones { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.co-pag__num {
  display: inline-grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem;
  border-radius: var(--radio-pill); border: 1px solid var(--co-linea); background: var(--co-carta);
  color: var(--lz-tinta); text-decoration: none; font-weight: 600; font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
  transition: color var(--trans-rapida), border-color var(--trans-rapida), background var(--trans-rapida);
}
.co-pag__num:hover { border-color: var(--c-borde-fuerte); }
.co-pag__num:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-pag__num.es-actual { background: var(--c-marino-900); border-color: var(--c-marino-900); color: var(--c-texto-inverso); }
.co-pag__num--flecha { font-size: var(--texto-m); }
.co-pag__num[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.co-pag__puntos { color: var(--lz-tinta-suave); padding: 0 0.15rem; }

/* LA FILA EN MÓVIL, otra vez (2026-09-06). Con «estado» en la columna 1 y la
   barra en la 2 (`auto`), la barra se llevaba su ancho intrínseco y el chip
   quedaba en 60 px partido en tres líneas («Faltan / datos»). Ahora el estado
   ocupa su propio renglón, con los chips en línea, y avance + ahorro
   comparten el siguiente. Va al final de la hoja para ganar a las reglas de
   arriba con la misma especificidad. */
@media (max-width: 62rem) {
  .co-exp__enlace { grid-template-columns: minmax(0, 1fr) minmax(0, auto); }
  .co-exp__quien, .co-exp__estado { grid-column: 1 / -1; }
  .co-exp__estado { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; }
  .co-exp__avance { grid-column: 1; }
  .co-exp__meta { grid-column: 2; }
}

/* ============================================================
   NORMA DE BOTONES (2026-09-06, petición del dueño) — «pon una norma que se
   replique»: la ZONA DE ACCIÓN de un formulario va SEPARADA del contenido.
   Un filete arriba, aire por encima (var(--esp-3)) y los botones alineados al
   inicio; en estrecho, el botón principal ocupa el ancho. Un botón pegado al
   último campo se lee como una zona a medio hacer. Aplica a `.co-form__acciones`
   en toda el área; el panel de Admin lleva la misma norma en `.rev-acciones` /
   `.panel-acciones-fila` (panel.css).
   ============================================================ */
.co-form__acciones {
  margin-top: var(--esp-2); padding-top: var(--esp-3);
  border-top: 1px solid var(--co-linea);
  display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center;
}
.co-card .co-form__acciones { margin-top: var(--esp-1); }
.co-form > .co-consent, .co-form > .campo--interruptor { margin-top: var(--esp-1); }
@media (max-width: 40rem) {
  .co-form__acciones .co-boton--primario { flex: 1 1 100%; justify-content: center; }
}

/* ---- Tarjetas COMPACTAS de la ficha («todo compacto y cerrado») ---- */
.co-ficha__rejilla--compacta {
  grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
  gap: var(--esp-3);
}
.co-ficha__rejilla--compacta .co-card { padding: var(--esp-4); gap: var(--esp-2); }
.co-ficha__rejilla--compacta .co-card__ayuda { font-size: var(--texto-xs); }
.co-ficha__rejilla--compacta .co-form__campos { gap: var(--esp-2) var(--esp-3); }

/* ---- Los conmutadores de cabecera (tipo de cliente / titular) ---- */
.co-ficha__ajustes {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
  gap: var(--esp-3); margin-bottom: var(--esp-4);
}
.co-seg {
  margin: 0; display: grid; gap: 0.45rem; min-width: 0;
  padding: var(--esp-3) var(--esp-4);
  background: var(--co-carta); border: 1px solid var(--co-linea); border-radius: var(--radio-l);
}
.co-seg__eti { font-size: var(--texto-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--lz-tinta-suave); }
.co-seg__pista {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  padding: 0.25rem; border-radius: var(--radio-pill); background: var(--c-marino-50);
  isolation: isolate;
}
.co-seg__thumb {
  position: absolute; top: 0.25rem; bottom: 0.25rem; left: 0; width: 0;
  border-radius: var(--radio-pill); background: var(--c-marino-900);
  box-shadow: var(--sombra-1); opacity: 0; z-index: 0;
}
.co-seg__op {
  position: relative; z-index: 1; min-width: 0;
  padding: 0.5rem 0.6rem; border: 0; background: transparent;
  color: var(--lz-tinta); font: inherit; font-weight: 700; font-size: var(--texto-s);
  border-radius: var(--radio-pill); cursor: pointer; text-align: center; overflow-wrap: anywhere;
}
.co-seg__op.es-activa { color: var(--c-texto-inverso); }
.co-seg__op:disabled { opacity: 0.55; cursor: not-allowed; }
.co-seg__op:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }
.co-seg__ayuda { margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
@media (prefers-reduced-motion: no-preference) {
  .co-seg__thumb { transition: left 280ms var(--ease-gota), width 280ms var(--ease-gota), opacity 160ms ease; }
  .co-seg__op { transition: color 200ms ease; }
  .co-seg__thumb.sin-transicion { transition: none; }
}

/* ---- Documento YA subido: se ve subido ---- */
.co-doc__hecho:not([hidden]) { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.6rem; }
.co-doc__hecho {
  padding: 0.55rem 0.75rem; border-radius: var(--radio-m);
  background: color-mix(in srgb, var(--c-exito) 10%, var(--co-carta));
  border: 1px solid color-mix(in srgb, var(--c-exito) 35%, var(--co-linea));
  font-size: var(--texto-s); color: var(--lz-tinta);
}
.co-doc__hecho > svg { width: 1rem; height: 1rem; color: var(--c-exito); flex: none; }
.co-doc__hecho-txt { font-weight: 700; }
.co-doc__hecho-fecha { color: var(--lz-tinta-suave); font-size: var(--texto-xs); }
.co-doc__hecho .co-boton { margin-inline-start: auto; }
.co-boton--mini { padding: 0.3rem 0.7rem; min-height: 2rem; font-size: var(--texto-xs); }

/* ---- Resumen: el dato que FALTA se ve ---- */
.co-resumen-datos__vacio, .co-resumen-datos dd > .co-cuando:empty {
  display: inline-block; min-width: 2.2rem; text-align: center;
  padding: 0.05rem 0.5rem; border-radius: var(--radio-s);
  background: color-mix(in srgb, var(--c-error) 9%, var(--co-carta));
  color: color-mix(in srgb, var(--c-error) 70%, var(--lz-tinta));
  font-weight: 700;
}

/* ---- UN RECUADRO con cuatro partes (DNI · contacto · correo · suministro) ---- */
.co-bloque { padding: 0; gap: 0; overflow: hidden; }
.co-bloque { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.co-bloque__parte {
  display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0;
  padding: var(--esp-4);
  border-left: 1px solid var(--co-linea);
}
.co-bloque__parte:first-child { border-left: 0; }
.co-bloque__parte.es-aportada { background: color-mix(in srgb, var(--c-exito) 5%, var(--co-carta)); }
.co-bloque__parte .co-form { display: flex; flex-direction: column; gap: var(--esp-2); flex: 1; }
.co-bloque__parte .co-form__acciones { margin-top: auto; }
.co-bloque__parte .co-form__campos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 72rem) {
  .co-bloque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-bloque__parte:nth-child(odd) { border-left: 0; }
  .co-bloque__parte:nth-child(n + 3) { border-top: 1px solid var(--co-linea); }
}
@media (max-width: 40rem) {
  .co-bloque { grid-template-columns: minmax(0, 1fr); }
  .co-bloque__parte { border-left: 0; }
  .co-bloque__parte + .co-bloque__parte { border-top: 1px solid var(--co-linea); }
}

/* ---- La tarjeta del documento: MISMO formato subido o no ----
   Filas fijas: cabecera · quién · aviso · zona (alto mínimo común) · ayudas.
   Lo que cambia de estado cambia DENTRO de la zona. */
.co-docs--ficha { align-items: stretch; }
.co-doc__aviso--vacio { min-height: 1.2em; margin: 0; }
.co-doc { --co-doc-zona: 9rem; }
.co-doc__zona {
  min-height: var(--co-doc-zona); display: grid; align-content: stretch; gap: 0.5rem; min-width: 0;
}
.co-doc__zona > .co-doc__hecho:not([hidden]) {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center;
  gap: 0.2rem 0.6rem; min-height: var(--co-doc-zona); padding: 0.75rem 0.9rem; box-sizing: border-box;
}
.co-doc__hecho > svg { grid-row: 1 / span 2; width: 1.25rem; height: 1.25rem; }
.co-doc__hecho-txt { grid-column: 2; }
.co-doc__hecho-fecha { grid-column: 2; }
.co-doc__hecho-acciones { grid-column: 1 / -1; display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.35rem; }
.co-doc__hecho .co-boton { margin-inline-start: 0; }
.co-doc__zona > .co-doc__subida:not([hidden]) { min-height: var(--co-doc-zona); align-content: center; box-sizing: border-box; }
.co-doc__zona > .co-doc__cerrado {
  margin: 0; min-height: var(--co-doc-zona); display: grid; place-items: center; text-align: center; box-sizing: border-box;
  padding: var(--esp-3); border: 2px dashed var(--co-linea); border-radius: var(--radio-m);
  color: var(--lz-tinta-suave); font-size: var(--texto-s);
}

/* La CABECERA de la tarjeta del documento mide lo mismo con «Falta» que con
   «Pendiente de revisión»: medido, el chip largo hacía envolver el título y la
   tarjeta crecía 35 px al subir. Dos líneas de alto SIEMPRE, chip sin partir. */
.co-docs--ficha .co-doc__cab { min-height: 3.9rem; align-items: flex-start; }
.co-docs--ficha .co-doc__cab .co-chip { white-space: nowrap; flex: none; }



/* ============================ El candado de la firma del titular (§6.91, 2026-09-06) ============================
   Dentro de la fila «Autorización firmada por el titular»: mientras al
   documento le falten datos del contrato, el titular no puede firmar y aquí se
   dice qué falta (pastillas con enlace a su tarjeta). Superficie clara, borde
   fino y el candado como única marca (§6.5). Ningún `display` sobre `[hidden]`
   sin su regla al lado (§6.36/§6.70). */
.co-candado {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-3);
  align-items: start;
  margin-top: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--c-borde-fuerte);
  border-radius: var(--radio-m);
  background: var(--lz-papel);
}
.co-candado[hidden] { display: none; }
.co-candado__icono {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--c-marino-900); color: var(--c-amarillo-400);
}
.co-candado__icono svg { width: 1.25rem; height: 1.25rem; }
.co-candado__texto { display: grid; gap: 0.45rem; min-width: 0; }
.co-candado__titulo { margin: 0; font-weight: 700; color: var(--c-marino-900); font-size: var(--texto-s); }
.co-candado__p { margin: 0; font-size: var(--texto-xs); color: var(--lz-tinta-suave); }
.co-candado__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.co-candado__lista li { display: inline-flex; min-width: 0; }
.co-candado__lista a {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.3rem 0.7rem; border-radius: var(--radio-pill);
  background: var(--c-blanco); border: 1px solid var(--c-borde-fuerte);
  font-size: var(--texto-xs); font-weight: 600; color: var(--c-marino-900);
  text-decoration: none;
}
.co-candado__lista a::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--c-acento); flex: none;
}
.co-candado__lista a:hover { border-color: var(--c-marino-700); }
.co-candado__lista a:focus-visible { outline: 2px solid var(--c-foco); outline-offset: 2px; }

/* «Todo listo»: el titular ya puede firmar. Texto en tinta con un punto de
   éxito, nada de banda verde. */
.co-doc__listo {
  display: flex; align-items: flex-start; gap: 0.5rem;
  margin: var(--esp-2) 0 0; font-size: var(--texto-xs); color: var(--c-marino-900); font-weight: 600;
}
.co-doc__listo[hidden] { display: none; }
.co-doc__listo svg { width: 1rem; height: 1rem; flex: none; color: var(--c-exito); margin-top: 0.1rem; }
.co-doc__listo-pista { font-weight: 400; color: var(--lz-tinta-suave); }