/* ============================================================
   luzgasia — gestion-contrato.css
   LA PIEL DE LA FICHA DEL CONTRATO (U4b del plan de clientes y Oficina).
   La ficha (`parciales/contrato/*`) la aloja hoy el área del colaborador
   (`colaborador/expediente.html`) y en U8a la alojará la Oficina del panel,
   que NO carga `colaborador.css`. Por eso sus reglas viven aquí: MOVIDAS tal
   cual desde `colaborador.css`, con sus nombres `co-*` (renombrarlos rompería
   ganchos y tests a cientos) y en el mismo orden relativo que tenían allí.

   Qué hay: toda regla que puede pintar un elemento de la ficha, también las
   de los COMPONENTES que la ficha comparte con el resto del área (botón,
   alerta, pastilla, tarjeta, formulario, subida, menú interno `.co-tg`,
   modal…). Por eso la carga TODA página del área, no solo la ficha
   (`tests/test_ficha_portable_hoja.py` lo vigila).

   Para quien edite:
   1. El COLOR, solo con `--gc-*` (superficies, líneas, tintas, sombras,
      estados). Los define el ANFITRIÓN: `colaborador.css` sobre `.co-cuerpo`
      y, en U8a, `panel.css` a partir de `--p-*` (modo oscuro incluido). Ni un
      `--co-*`, ni un `--c-*`, ni un color escrito: aquí no se sabe en qué tema
      se pinta (el `#000` de las máscaras es alfa, no un color que se vea).
      Tipografía, espacios, radios y tiempos salen de `tokens.css`, que
      cargan todos los anfitriones.
   2. Ninguna regla de `colaborador.css` puede pintar la ficha: lo que la
      ficha necesita está aquí, o en la Oficina saldría a medias.
   3. Esta hoja se carga ANTES que la del anfitrión, que tiene la última
      palabra. Con el orden contrario, seis reglas propias del área (la
      bienvenida del nivel 0, su Documentación, los vacíos «mini», el error
      del modal, el hueco de un paso del asistente) perdían contra el
      componente que afinan: medido regla a regla en el DOM. Con este orden
      solo giraba una, y `colaborador.css` la dice ya sin depender de él
      (`.co-paso > * + *` no se aplica a `.co-form__acciones`).
   4. `hidden` gana SIEMPRE dentro de la ficha (§6.36/§6.70), y la guarda va
      aquí mismo, con `!important`, para no depender ni del orden ni de la del
      anfitrión. Aun así, si un bloque oculto por atributo declara `display`,
      va con `:not([hidden])`.
   5. Propiedades lógicas (§6.111). Los `scroll-margin` están calibrados para
      las barras pegajosas del colaborador: otro anfitrión los reajusta en SU
      hoja (por eso esta va antes).
   6. `::backdrop` no hereda las propiedades personalizadas en todos los
      navegadores: el anfitrión define `--gc-velo` también sobre `::backdrop`.
   ============================================================ */

/* La guarda de `hidden` de la PIEZA (punto 4): el elemento raíz y todo lo de
   dentro, con `!important` (integración de U4). Sin él valía por ORDEN, y seis
   reglas de más abajo con su misma especificidad y un `display` (el modal
   abierto, la rejilla de documentos, el pie de su tarjeta…) le ganaban: la
   ficha solo se salvaba porque `colaborador.css` carga DETRÁS con la suya. En
   la Oficina `panel.css` carga ANTES, y ninguna guarda del anfitrión la
   rescataría. Es la misma de la página del titular (`autorizacion.css`). */
.co-expediente[hidden],
.co-expediente [hidden] { display: none !important; }

/* =================== 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(--gc-foco); outline-offset: 3px; }
.co-boton--primario {
  background: var(--gc-acento);
  color: var(--gc-sobre-acento);
  box-shadow: var(--gc-sombra-media);
}
.co-boton--primario:hover:not([disabled]) {
  transform: translateY(-2px);
  border-radius: var(--radius-vivo);
  box-shadow: var(--gc-sombra-alta);
}
.co-boton--primario:active { transform: translateY(0); }
.co-boton--sutil {
  background: var(--gc-fondo-control);
  color: var(--gc-enlace);
  border-color: var(--gc-borde);
  padding: 0.55rem 0.9rem;
  font-size: var(--texto-s);
}
.co-boton--sutil:hover:not([disabled]) { border-color: var(--gc-linea-fuerte); border-radius: var(--radius-vivo); }
.co-boton--sutil.es-copiado { background: var(--gc-exito-fondo); color: var(--gc-exito); border-color: var(--gc-exito); }
.co-boton--peligro {
  background: transparent;
  color: var(--gc-error);
  border-color: var(--gc-error);
}
.co-boton--peligro:hover:not([disabled]) { background: var(--gc-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;
  /* Lógicas (§6.111/§6.150): el hueco del punto va al INICIO de la lectura.
     Con el relleno físico, en árabe el punto (`inset-inline-start`) caía a la
     derecha y encima de la primera letra. En LTR es exactamente lo de antes. */
  padding-block: 0.7rem;
  padding-inline: 2.2rem 0.95rem;
  border: 1px solid var(--gc-borde);
  border-radius: var(--radio-m);
  background: var(--gc-superficie);
  color: var(--gc-tinta-fuerte);
  font-size: var(--texto-s);
  font-weight: 500;
  line-height: 1.5;
  text-align: start;
  box-shadow: var(--gc-sombra-aviso);
}
.co-alerta::before {
  content: "";
  position: absolute; inset-inline-start: 0.9rem; top: 0.95rem;
  width: 0.6rem; height: 0.6rem; border-radius: 50%;
  background: var(--gc-linea-fuerte);
}
.co-alerta--error { border-color: var(--gc-error-borde); }
.co-alerta--error::before { background: var(--gc-error); }
.co-alerta--aviso { border-color: var(--gc-aviso-borde); }
.co-alerta--aviso::before { background: var(--gc-aviso); }
.co-alerta--exito { border-color: var(--gc-exito-borde); }
.co-alerta--exito::before { background: var(--gc-exito); }

.co-consent {
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem;
  align-items: start; margin: 0 0 1.1rem; text-align: start;
  font-size: var(--texto-s); color: var(--gc-tinta-suave);
}
.co-consent a { color: var(--gc-info); font-weight: 600; }

.co-tarjeta {
  background: var(--gc-superficie); border: 1px solid var(--gc-linea);
  border-radius: var(--radius-gota); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.co-tarjeta__ayuda { margin: 0 0 1rem; color: var(--gc-tinta-suave); font-size: var(--texto-s); max-width: 62ch; }
.co-vacio {
  padding: 1.5rem; text-align: center; color: var(--gc-tinta-suave);
  background: var(--gc-fondo-suave); border: 1px dashed var(--gc-linea); border-radius: var(--radius-gota-s);
}

/* =================== 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(--gc-linea-fuerte);
  display: inline-flex; align-items: center; gap: 0.4rem;
  /* El lado del punto (el de INICIO) más ceñido; lógicas para que en árabe
     siga siendo el del punto (§6.111, integración de U4). */
  padding-block: 0.15rem;
  padding-inline: 0.5rem 0.65rem;
  border: 1px solid var(--gc-borde);
  border-color: color-mix(in srgb, var(--chip) 42%, var(--gc-borde));
  border-radius: var(--radio-pill);
  background: var(--gc-superficie);
  color: var(--gc-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(--gc-actual); }

/* 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(--gc-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(--gc-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(--gc-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; }
.co-mascara {
  display: grid; gap: 0.15rem;
  background: var(--gc-fondo-suave); border: 1px solid var(--gc-linea);
  border-radius: var(--radius-gota-s); padding: 0.85rem 1.1rem; margin: 0 0 1.1rem;
}
.co-mascara__valor { font-family: var(--fuente-marca); font-weight: 700; font-size: var(--texto-l); letter-spacing: 0.06em; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes co-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
/* 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(--gc-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;
}

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

/* --- 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(--gc-superficie); border: 1px solid var(--gc-linea);
  border-radius: var(--radius-gota); padding: clamp(1.25rem, 3vw, 1.75rem);
}
.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` 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; }
/* `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%; }

/* --- 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(--gc-linea-fuerte);
  border-radius: var(--radio-m);
  background: var(--gc-fondo-suave);
  color: var(--gc-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(--gc-enlace); }
.co-subida:focus-visible { outline: 2px solid var(--gc-foco); outline-offset: 2px; }
.co-subida::file-selector-button {
  margin-inline-end: var(--esp-3);
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--gc-borde);
  border-radius: var(--radio-pill);
  background: var(--gc-superficie);
  color: var(--gc-tinta-boton);
  font: inherit; font-weight: 700; font-size: var(--texto-s);
  cursor: pointer;
}
.co-subida:hover::file-selector-button { border-color: var(--gc-linea-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(--gc-borde);
  background: var(--gc-fondo-suave);
  color: var(--gc-tinta-suave);
  cursor: not-allowed;
  opacity: 0.72;
}
.co-subida[disabled]:hover { border-color: var(--gc-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(--gc-tinta-suave);
}
.co-subida__prog .co-barra { height: 0.4rem; }
.co-subida__prog .co-barra__relleno { background: var(--gc-actual); }
@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: end; }

/* --- LOS FICHEROS ELEGIDOS (encargo del dueño, 2026-10-05) ---
   Debajo del selector, UNA TARJETA por fichero u hoja: la miniatura (o el icono
   del PDF), el nombre, el tamaño, la marca de «Cargado» y «Cambiar» / «Quitar».
   La pinta `gestion-base.js` (`montarFicheros`); el marcado de partida es
   `parciales/ficheros_elegidos.html`. Piel de la casa (§6.5): superficie blanca
   y borde fino; el color va SOLO en la marca (el ✓ de «Cargado», el punto de un
   aviso o de un fallo) y el texto en tinta. Lo que se esconde por atributo y
   declara `display` lleva `:not([hidden])` (§6.36/§6.70). Lógicas (§6.111). */
.co-ficheros:not([hidden]) { display: grid; gap: var(--esp-2); min-width: 0; }
.co-ficheros { border-radius: var(--radio-m); }
.co-ficheros.es-encima { outline: 2px dashed var(--gc-linea-fuerte); outline-offset: 4px; }
.co-ficheros__lista { display: grid; gap: var(--esp-2); margin: 0; padding: 0; list-style: none; min-width: 0; }
.co-ficheros .co-alerta { margin: 0; }
.co-fichero {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3);
  min-width: 0; padding-block: var(--esp-2); padding-inline: var(--esp-2) var(--esp-3);
  background: var(--gc-superficie); border: 1px solid var(--gc-linea); border-radius: var(--radio-m);
  box-shadow: var(--gc-sombra);
}
.co-fichero--error { border-color: var(--gc-error-borde); }
/* La miniatura: un cuadrado de lado fijo, la foto RECORTADA dentro (no
   deformada) y, si no hay foto que pintar, el icono. */
.co-fichero__miniatura {
  flex: none; display: grid; place-items: center; align-content: center; gap: 0.1rem;
  inline-size: 3.25rem; block-size: 3.25rem; overflow: hidden;
  border: 1px solid var(--gc-linea); border-radius: var(--radio-s);
  background: var(--gc-fondo-suave); color: var(--gc-tinta-suave);
}
.co-fichero__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }
.co-fichero__icono { inline-size: 1.35rem; block-size: 1.35rem; }
.co-fichero__tipo { font-size: 0.6875rem; font-weight: 800; line-height: 1; letter-spacing: 0.04em; color: var(--gc-tinta-fuerte); }
/* La base de 9rem deja la miniatura y los datos en la MISMA fila también en
   la tarjeta estrecha de Documentos y a 390 px (con 12rem la miniatura se
   quedaba sola en una línea); las acciones son las que bajan. */
.co-fichero__datos { flex: 1 1 9rem; display: grid; gap: 0.15rem; min-width: 0; }
.co-fichero__nombre { font-weight: 650; color: var(--gc-tinta-fuerte); overflow-wrap: anywhere; }
.co-fichero__meta { font-size: var(--texto-xs); color: var(--gc-tinta-suave); overflow-wrap: anywhere; }
.co-fichero__estado {
  display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0;
  font-size: var(--texto-s); font-weight: 650; color: var(--gc-tinta);
}
/* «CARGADO»: el ✓ es la marca; el texto, en tinta. */
.co-fichero__check { flex: none; inline-size: 1.1rem; block-size: 1.1rem; color: var(--gc-exito); stroke-width: 2.6; }
.co-fichero__estado--error::before {
  content: ""; flex: none; inline-size: 0.55rem; block-size: 0.55rem; border-radius: 50%; background: var(--gc-error);
}
.co-fichero__aviso {
  display: flex; align-items: flex-start; gap: 0.4rem; min-width: 0;
  font-size: var(--texto-xs); line-height: 1.45; color: var(--gc-tinta); overflow-wrap: anywhere;
}
.co-fichero__aviso::before {
  content: ""; flex: none; inline-size: 0.5rem; block-size: 0.5rem; margin-block-start: 0.35em;
  border-radius: 50%; background: var(--gc-aviso);
}
.co-fichero--error .co-fichero__aviso::before { background: var(--gc-error); }
.co-fichero__acciones { display: flex; flex-wrap: wrap; gap: var(--esp-2); margin-inline-start: auto; }
/* «Cambiar» y «Quitar» no se parten por dentro: si no caben, baja la fila de
   acciones entera (la tarjeta es flex con salto). */
.co-fichero__accion { white-space: nowrap; }
.co-ficheros__pie:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: var(--esp-2) var(--esp-3); }
.co-ficheros__anadir svg { flex: none; width: 1rem; height: 1rem; }
.co-ficheros__cupo { font-size: var(--texto-xs); color: var(--gc-tinta-suave); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   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; }
}
.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(--gc-linea);
}
.co-expediente__volver {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--gc-tinta-suave); text-decoration: none; font-weight: 600; font-size: var(--texto-s);
  flex-basis: 100%;
}
.co-expediente__volver:hover { color: var(--gc-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(--gc-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-inline-start: auto; }
.co-expediente__acciones form { display: contents; }
.co-expediente__acciones .co-boton--peligro { margin-inline-start: var(--esp-2); }
.co-expediente__seccion { min-width: 0; }
.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; }

/* 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(--gc-linea-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(--gc-aviso); }
.co-req--rechazado { --req: var(--gc-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(--gc-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(--gc-tinta-suave); }
.co-req--aportado::before {
  width: 0.4rem; height: 0.65rem; margin-top: 0.2rem;
  border-radius: 0; background: none;
  border-inline-end: 2px solid var(--gc-exito); border-bottom: 2px solid var(--gc-exito);
  rotate: 45deg;
}
.co-req__quien { display: block; font-size: var(--texto-xs); color: var(--gc-tinta-suave); }
.co-doc {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: var(--esp-4);
  background: var(--gc-superficie);
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--gc-sombra);
}
.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(--gc-tinta-suave); }

/* --- 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(--gc-tinta-suave);
  overflow-wrap: anywhere; min-width: 0;
}

/* 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; }
/* UN solo indicador: el «+» del icono. El triángulo del navegador al lado
   decía lo mismo dos veces (QA de L4). */
.co-exp-nuevo > summary { list-style: none; cursor: pointer; }
.co-exp-nuevo > summary::-webkit-details-marker { display: none; }
.co-doc__ayuda { margin: 0; font-size: var(--texto-s); color: var(--gc-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(--gc-exito) 45%, var(--gc-linea)); }
.co-doc--falta { border-color: color-mix(in srgb, var(--gc-aviso) 40%, var(--gc-linea)); }
.co-doc--rechazado { border-color: color-mix(in srgb, var(--gc-error) 50%, var(--gc-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(--gc-fondo-suave); box-shadow: none; }
.co-doc--bloqueado .co-doc__titulo { color: var(--gc-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: end; }  /* al final, como el resto (§6.88) */

/* 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-inline-start: 1rem;
  font-size: var(--texto-xs); line-height: 1.45;
  color: var(--gc-tinta-fuerte);
}
.co-doc__aviso::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0.42rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--gc-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-inline-start: 1rem; position: relative;
  font-size: var(--texto-xs); color: var(--gc-tinta-suave); line-height: 1.45;
}
.co-doc__cerrado::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0.42rem;
  width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--gc-linea-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;
  /* LÓGICAS (§6.111): con el atajo físico, en árabe el hueco del punto quedaba
     a la izquierda y el punto (`inset-inline-start`) se montaba sobre el final
     de la primera línea (QA de U4). */
  padding-block: 0.65rem;
  padding-inline: 1.9rem 0.85rem;
  border: 1px solid color-mix(in srgb, var(--gc-error) 35%, var(--gc-borde));
  border-radius: var(--radio-m);
  background: var(--gc-superficie);
  font-size: var(--texto-s);
}
.co-revision::before {
  content: "";
  position: absolute; inset-inline-start: 0.75rem; top: 0.95rem;
  width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: var(--gc-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(--gc-tinta-suave); font-variant-numeric: tabular-nums; }

/* 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(--gc-fondo-control); 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(--gc-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(--gc-tinta); }
.co-tg__tab.es-activa { background: var(--gc-superficie); color: var(--gc-tinta-fuerte); box-shadow: var(--gc-sombra); }
.co-tg__tab:focus-visible { outline: 2px solid var(--gc-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(--gc-tinte); color: var(--gc-tinta-fuerte);
  font-size: var(--texto-xs); font-weight: 700; font-variant-numeric: tabular-nums;
}
.co-tg__tab.es-activa .co-tg__n { background: var(--gc-solido); color: var(--gc-acento-claro); }
.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; }
}
.co-tg { scroll-margin-block-start: calc(var(--altura-cabecera) + 4.25rem); }
/* El error de un formulario enviado SIN JavaScript (integración U2/U3): la URL
   salta a él (`#co-error-prg`) y no puede aterrizar debajo de las barras. */
[data-co-prg-error] { scroll-margin-block-start: calc(var(--altura-cabecera) + 4.25rem); }

/* ============================================================
   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(--gc-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(--gc-superficie);
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--gc-sombra);
  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(--gc-exito) 45%, var(--gc-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(--gc-tinta-suave); font-size: var(--texto-s); }
.co-card__pie { margin: 0; font-size: var(--texto-s); }
.co-card__pie a { color: var(--gc-enlace); font-weight: 600; }
.co-card__ok { margin: 0; color: var(--gc-exito); font-weight: 600; }
.co-card .co-form__acciones { margin-top: 0; }
.co-card .campo { min-width: 0; }
.co-card .campo__entrada { width: 100%; min-width: 0; }
/* `align-items: end`: los INPUTS de una fila quedan a la misma altura aunque una
   etiqueta ocupe dos líneas (§6.44; auditoría 2026-09-06: «Código postal»
   bajaba su input 24 px respecto a «Teléfono»). */
.co-form__campos--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
/* LOS TRES CAMPOS DEL NOMBRE. `align-items: end` los alineaba por ABAJO, y el
   tercero —«Segundo apellido»— lleva una pista DEBAJO del input que los otros
   dos no tienen: alineando los pies, su etiqueta y su entrada quedaban
   LEVANTADAS respecto a las vecinas. Lo reportó el dueño.

   La solución de la casa es `subgrid` (§6.44): alinea las TRES filas —etiqueta,
   entrada, ayuda— entre columnas. Es la única que aguanta seis idiomas; un
   `min-height` en la etiqueta fija un número de líneas que cambia con la
   traducción y además no alinea las ayudas. Donde no haya subgrid se conserva
   `align-items: end`, que es lo que había. */
.co-form__campos--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; }
@supports (grid-template-rows: subgrid) {
  .co-form__campos--tres {
    align-items: stretch;
    grid-template-rows: auto auto auto;
  }
  .co-form__campos--tres > .campo {
    grid-row: span 3;
    grid-template-rows: subgrid;
    margin-bottom: 0;
  }
}
/* Dentro de una tarjeta estrecha (1366: 94 px útiles para un teléfono de 9
   dígitos), dos columnas fijas recortan el valor: que se apilen cuando no caben. */
.co-card .co-form__campos--dos { grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 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; }
/* DOS FORMULARIOS EN UNA FILA (la sociedad: razón social + CIF; y teléfono + CP
   sin cliente, L4.3). Con `align-items: end` el error de UNO bajaba al OTRO: el
   del CIF dejaba «Razón social» 69 px más abajo (QA de U4). Se alinean por FILAS
   con `subgrid`, como los tres campos del nombre (§6.99): la máscara
   «Guardado», el campo, el error y el botón, cada uno en la suya; una fila que
   no usa nadie mide cero. Sin `row-gap` (una fila vacía sumaría su hueco): el
   `gap` del formulario pasa a márgenes, con las MISMAS medidas, y el que separa
   los dos formularios cuando se apilan, a su `padding` (lo que gana abajo lo
   devuelve la rejilla). Medido: sin el error, ni un píxel distinto a 1366 ni a
   390. Sin subgrid o sin `:has()` queda lo de antes. */
@supports (grid-template-rows: subgrid) and selector(:has(*)) {
  .co-form__campos--dos:has(> .co-form.co-form--inline) {
    align-items: stretch;
    row-gap: 0;
    margin-block-end: calc(var(--esp-4) - var(--esp-2));
  }
  .co-form__campos--dos > .co-form.co-form--inline {
    display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
    padding-block-end: var(--esp-2);
  }
  .co-form__campos--dos > .co-form.co-form--inline > .co-mascara { grid-row: 1; margin-block-end: var(--esp-2); }
  .co-form__campos--dos > .co-form.co-form--inline > .campo { grid-row: 2; }
  .co-form__campos--dos > .co-form.co-form--inline > [data-co-form-error] {
    grid-row: 3; margin-block-start: calc(0.85rem + var(--esp-2));
  }
  .co-form__campos--dos > .co-form.co-form--inline > .co-form__acciones {
    grid-row: 4; margin-block-start: calc(var(--esp-1) + var(--esp-2));
  }
}

/* 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(--gc-linea); background: var(--gc-superficie);
  font-size: var(--texto-xs); font-weight: 700; color: var(--gc-tinta);
}
.co-tag::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--gc-aviso); }
.co-tag--ok::before { background: var(--gc-exito); }
.co-tag--neutro::before { background: var(--gc-tinte); }

/* 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(--gc-fondo-control); font-size: var(--texto-s); min-width: 0;
}
.co-mascara__eti { color: var(--gc-tinta-suave); }
.co-mascara__valor {
  font-weight: 700; color: var(--gc-tinta-fuerte); 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--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(--gc-linea);
  background: var(--gc-superficie); color: var(--gc-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(--gc-tinte); }
.co-si-no__op:focus-visible { outline: 2px solid var(--gc-foco); outline-offset: 2px; }
.co-si-no__op.es-activa { border-color: var(--gc-solido); background: var(--gc-solido); color: var(--gc-solido-texto); }
.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: start; 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(--gc-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(--gc-exito) 40%, var(--gc-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(--gc-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(--gc-tinta-suave); }
.co-prefs__detalle { margin: 0; }
.co-prefs__masivo { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; margin: 0; justify-content: flex-end; }
@media (max-width: 40rem) {
  .co-prefs__form { grid-template-columns: minmax(0, 1fr); }
}
.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-doc--opcional { opacity: 0.92; }

/* 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; }
/* U7a: «Crear el contrato» de un borrador que ya cuelga de su cliente. */
.co-ficha-aviso__form { justify-self: stretch; min-width: 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(--gc-tinte); }
/* «Lista · sin enviar» (U1b): completo y sin mandar; le toca a ÉL → ámbar. */
.co-chip--rot-sin_enviar { --chip: var(--gc-aviso); }
.co-chip--rot-solicitud_correo { --chip: var(--gc-actual); }
.co-chip--rot-faltan_datos { --chip: var(--gc-aviso); }
.co-chip--rot-revisado { --chip: var(--gc-tinta-fuerte); }
.co-chip--rot-lanzado, .co-chip--rot-activo { --chip: var(--gc-exito); }
.co-card--falta { border-top: 3px solid var(--gc-acento-claro); }

/* 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(--gc-superficie); border: 1px solid var(--gc-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(--gc-tinta-suave); font-size: var(--texto-xs); font-weight: 600;
}
.co-stepper__paso::before {
  content: ""; position: absolute; top: 0.7rem; inset-inline-start: 50%; inset-inline-end: -50%;
  height: 2px; background: var(--gc-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(--gc-linea); background: var(--gc-superficie);
  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(--gc-tinta); }
.co-stepper__paso.es-hecho .co-stepper__punto { background: var(--gc-exito); border-color: var(--gc-exito); color: var(--gc-sobre-estado); }
.co-stepper__paso.es-hecho .co-stepper__punto svg { display: block; }
.co-stepper__paso.es-hecho::before { background: var(--gc-exito); }
.co-stepper__paso.es-actual { color: var(--gc-tinta); }
.co-stepper__paso.es-actual .co-stepper__punto {
  border-color: var(--gc-actual);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gc-actual) 22%, transparent);
}
.co-stepper__paso.es-opuso .co-stepper__punto { background: var(--gc-error); border-color: var(--gc-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); }
/* La lista del lateral: a 1280×720 su `60vh` cortaba el décimo requisito sin
   ningún indicador. Ahora crece hasta dejar sitio a las barras pegajosas y, si
   aun así scrollea, el borde inferior se DESVANECE (clase que pone el JS). */
.co-reqs--ficha { max-height: max(20rem, calc(100dvh - 14rem)); overflow: auto; padding-inline-end: 0.25rem; }
.co-reqs--ficha.es-scroll-abajo {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.5rem), transparent);
}
.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(--gc-actual) 35%, transparent), var(--gc-sombra); }
@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(--gc-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(--gc-tinta-suave); }
/* DNI, IBAN y CUPS ENTEROS (decisión 9): cifras de ancho fijo para leerlos y
   copiarlos al portal sin errores, y partidos por cualquier carácter —un IBAN
   o un CUPS no tienen espacios y a 390 px no caben en una columna (§6.94). */
.co-resumen-datos__claro { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

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

/* ============================================================
   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, desde el 2026-09-10, los
   botones alineados al FINAL; 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).

   AL FINAL Y NO AL INICIO (petición del dueño: «los botones de guardar,
   verificar, siguiente, confirmar pásalos al lado derecho, es mejor
   visualmente»). El motivo por el que se lee mejor: el ojo recorre el
   formulario de arriba abajo y de izquierda a derecha, así que el botón que lo
   cierra cae donde termina la última línea, no de vuelta al margen. En
   estrecho no cambia nada — el primario ya ocupaba el ancho entero.

   OJO AL ORDEN DEL MARCADO: con los botones a la derecha, el ÚLTIMO del DOM es
   el que queda pegado al borde. El primario va SIEMPRE el último del bloque
   (el orden de tabulación es el del DOM y la acción principal tiene que ser la
   que se alcanza al final), y lo secundario o destructivo queda a su izquierda.
   ============================================================ */
.co-form__acciones {
  margin-top: var(--esp-2); padding-top: var(--esp-3);
  border-top: 1px solid var(--gc-linea);
  display: flex; gap: var(--esp-2); flex-wrap: wrap; align-items: center;
  justify-content: flex-end;
}
.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(--gc-superficie); border: 1px solid var(--gc-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(--gc-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(--gc-fondo-control);
  isolation: isolate;
}
/* Los conmutadores de TRES opciones se apilan en móvil: tres etiquetas en 350 px
   partían cada palabra en su línea. El pill sigue a la opción también en vertical. */
@media (max-width: 40rem) {
  .co-seg__pista:has(> .co-seg__op:nth-child(3)) { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
}
.co-seg__thumb {
  position: absolute; top: 0.25rem; height: 0; left: 0; width: 0;
  border-radius: var(--radio-pill); background: var(--gc-solido);
  box-shadow: var(--gc-sombra); 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(--gc-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(--gc-solido-texto); }
/* SIN JavaScript no hay `.co-seg__thumb` que pintar detrás (lo coloca el JS), y la
   opción activa quedaba en blanco sobre el fondo claro de la pista: ilegible
   (QA de la integración U2/U3, contraste 1,02). La opción pinta su propio fondo. */
html:not(.js) .co-seg__op.es-activa { background: var(--gc-solido); }
.co-seg__op:disabled { opacity: 0.55; cursor: not-allowed; }
.co-seg__op:focus-visible { outline: 2px solid var(--gc-foco); outline-offset: 2px; }
.co-seg__ayuda { margin: 0; font-size: var(--texto-xs); color: var(--gc-tinta-suave); }
@media (prefers-reduced-motion: no-preference) {
  .co-seg__thumb { transition: left 280ms var(--ease-gota), top 280ms var(--ease-gota), width 280ms var(--ease-gota), height 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(--gc-exito) 10%, var(--gc-superficie));
  border: 1px solid color-mix(in srgb, var(--gc-exito) 35%, var(--gc-linea));
  font-size: var(--texto-s); color: var(--gc-tinta);
}
.co-doc__hecho > svg { width: 1rem; height: 1rem; color: var(--gc-exito); flex: none; }
.co-doc__hecho-txt { font-weight: 700; }
.co-doc__hecho-fecha { color: var(--gc-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(--gc-error) 9%, var(--gc-superficie));
  color: color-mix(in srgb, var(--gc-error) 70%, var(--gc-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-inline-start: 1px solid var(--gc-linea);
}
.co-bloque__parte:first-child { border-inline-start: 0; }
.co-bloque__parte.es-aportada { background: color-mix(in srgb, var(--gc-exito) 5%, var(--gc-superficie)); }
.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; }
/* Dentro de una PARTE del recuadro (a 1366 mide ~200 px) dos columnas fijas dejaban
   el teléfono a 96 px: auto-fit con un mínimo de 9rem lo apila cuando no cabe. */
.co-bloque__parte .co-form__campos--dos { grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr)); }
@media (max-width: 72rem) {
  .co-bloque { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-bloque__parte:nth-child(odd) { border-inline-start: 0; }
  .co-bloque__parte:nth-child(n + 3) { border-top: 1px solid var(--gc-linea); }
}
@media (max-width: 40rem) {
  .co-bloque { grid-template-columns: minmax(0, 1fr); }
  .co-bloque__parte { border-inline-start: 0; }
  .co-bloque__parte + .co-bloque__parte { border-top: 1px solid var(--gc-linea); }
}

/* ---- La tarjeta del documento: MISMO formato subido o no ----
   Filas fijas: cabecera · quién · nota (aviso y motivo de rechazo) · zona
   (alto mínimo común) · pie (ayudas). Lo que cambia de estado cambia DENTRO
   de la zona. La rejilla de la ficha está en «DOCUMENTOS HOMOGÉNEO», abajo. */
/* EL PUNTO SE APAGA CON EL TEXTO (2026-09-10). `--vacio` reserva el alto para
   que las tarjetas de una fila midan lo mismo, pero `.co-doc__aviso::before`
   pintaba su círculo IGUAL: en la tarjeta del justificante salía un punto de
   aviso con nada al lado, que se lee como «aquí hay algo que mirar» y no había
   nada (lo reportó el dueño con una captura).

   Tiene que ser `content: none` y NO `content: ""`: el color va en el
   `background`, así que vaciar el contenido deja el punto igual. Es la variante
   de §6.70 sobre pseudoelementos — ahí no hay atributo `hidden` que el
   `display: none` de la casa pueda apagar.

   Hoy los ocho tipos de fichero traen texto (`AYUDA_DOC` en expediente.html),
   así que esto no se aplica a ninguno: se queda como red para el día que se
   añada un tipo sin copy. */
.co-doc__aviso--vacio { min-height: 1.2em; margin: 0; }
.co-doc__aviso--vacio::before { content: none; }
.co-doc { --gc-doc-zona: 9rem; }
.co-doc__zona {
  min-height: var(--gc-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(--gc-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; justify-content: flex-end; margin-top: 0.35rem; }
.co-doc__hecho .co-boton { margin-inline-start: 0; }
.co-doc__zona > .co-doc__subida:not([hidden]) { min-height: var(--gc-doc-zona); align-content: center; box-sizing: border-box; }
.co-doc__zona > .co-doc__cerrado {
  margin: 0; min-height: var(--gc-doc-zona); display: grid; place-items: center; text-align: center; box-sizing: border-box;
  padding: var(--esp-3); border: 2px dashed var(--gc-linea); border-radius: var(--radio-m);
  color: var(--gc-tinta-suave); font-size: var(--texto-s);
}

/* ===========================================================================
   DOCUMENTOS HOMOGÉNEO (U1a, 2026-10-01; ESPECIFICACION-colaborador-clientes
   apdo. 5.9). La «foto 3» del dueño: «no tiene un formato homogéneo, algunos
   div son más gordos que otros o chocan sin espacio entre sí». Medido sobre la
   ficha real (mapa_ui §4), una causa por síntoma:
     · las tarjetas empezaban 40 px más adentro que «Factura usada»: el `<ul>`
       conservaba el `padding-inline-start` del navegador (base.css solo anula
       el margen de las listas);
     · nada separaba la lista del «+ Factura» de debajo: 0 px;
     · CUATRO pieles en la misma pestaña: `.co-card` (factura), `.co-doc` (DNI),
       la firma beige y sin sombra, y el «+ Factura» con el radio de gota del
       alta;
     · mínimos fijos y la regla «la impar cruza», que hacía una tarjeta de
       fichero del DOBLE de ancho que sus vecinas, con media queries de
       VIEWPORT para una lista que vive en una columna junto al lateral.

   Ahora: UN panel con rejilla y `gap` (16 px entre cualquier par de bloques),
   UNA rejilla de tarjetas cuyas columnas decide el ancho REAL del panel
   (container query), las tarjetas de fichero miden SIEMPRE una columna, la
   factura usada CIERRA la última fila (`data-resto-*`, lo pone la plantilla) y
   la firma va debajo, a lo ancho. Y UNA piel: la de `.co-doc`. El estado se ve
   en el borde teñido (`co-doc--aportado/falta/rechazado`, §6.88) y «bloqueado»
   en el chip, el título apagado y la zona punteada — nunca en otro fondo.

   Todo va bajo `.co-docpanel`/`.co-docrej`: la documentación del propio
   colaborador (`.co-docs--propios`, nivel 0) usa las mismas tarjetas y NO se
   toca. Ningún `.co-tg__panel` declara `display` (§6.70). Todo en propiedades
   lógicas: en árabe la primera tarjeta cae a la derecha sin una regla más.
   =========================================================================== */
.co-docpanel {
  display: grid; gap: var(--esp-4); min-width: 0;
  container-type: inline-size; container-name: docs;
}
.co-docpanel > .co-ficha__intro { margin: 0; }
.co-docpanel > .co-docrej,
.co-docpanel > .co-doc--firma { min-width: 0; }
.co-docrej {
  list-style: none; margin: 0; padding: 0;          /* fuera los 40 px del navegador */
  display: grid; gap: var(--esp-4); align-items: stretch;
  grid-template-columns: minmax(0, 1fr);
}
@container docs (min-width: 36rem) {
  .co-docrej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container docs (min-width: 58rem) {
  .co-docrej { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* LA FACTURA CIERRA LA FILA: ocupa los huecos que deja la última fila de
   tarjetas de fichero; si no queda ninguno, fila propia a lo ancho. Las de
   fichero no cruzan NUNCA: eso era lo que hacía una tarjeta «más gorda». */
@container docs (min-width: 36rem) and (max-width: 57.99rem) {
  .co-docrej[data-resto-2="0"] > .co-doc--factura { grid-column: 1 / -1; }
}
@container docs (min-width: 58rem) {
  .co-docrej[data-resto-3="0"] > .co-doc--factura { grid-column: 1 / -1; }
  .co-docrej[data-resto-3="2"] > .co-doc--factura { grid-column: span 2; }
}
/* Sin container queries (navegador viejo): dos columnas desde 62rem de
   ventana, y la factura a lo ancho si la fila ya está llena. */
@supports not (container-type: inline-size) {
  @media (min-width: 62rem) {
    .co-docrej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .co-docrej[data-resto-2="0"] > .co-doc--factura { grid-column: 1 / -1; }
  }
}
/* UNA piel: la firma (y cualquier papel que aporte el titular) dejaba de ser
   blanca y perdía la sombra; aquí no. */
.co-docpanel .co-doc { min-width: 0; }
.co-docpanel .co-doc--bloqueado { background: var(--gc-superficie); box-shadow: var(--gc-sombra); }
/* `both` dejaba un `transform` residual tras la entrada (§6.142). */
.co-docpanel .co-doc { animation-fill-mode: backwards; }
/* La CABECERA de las tarjetas de la rejilla: el TÍTULO ENCIMA y el estado
   DEBAJO, en todas (como la documentación propia, `.co-docs--propios`). Con el
   chip al lado, en una columna de un tercio «Pendiente de revisión» no cabía
   junto a «DNI/NIE del administrador…»: el título se partía en cuatro líneas y
   el chip se salía de la tarjeta (medido en la QA de U1a). Así el alto de la
   cabecera solo depende del título, y cambiar «Falta» por «Pendiente de
   revisión» al subir no mueve nada. El chip no se parte. La firma, a lo ancho,
   conserva el chip a un lado. Sin subgrid, dos líneas de alto SIEMPRE. */
.co-docpanel .co-doc__cab { align-items: flex-start; }
.co-docpanel .co-doc__cab .co-chip,
.co-docpanel .co-doc__cab .co-tag { white-space: nowrap; flex: none; max-width: 100%; }
.co-docrej .co-doc__cab {
  flex-direction: column; justify-content: flex-start; gap: 0.4rem; min-height: 3.9rem;
}
/* La NOTA (el aviso y, si lo hay, el motivo del rechazo) y el PIE (las
   ayudas) son UN hijo cada uno: la tarjeta tiene siempre cinco. */
.co-doc__nota { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.co-docpanel .co-doc__pie { display: grid; gap: 0.35rem; min-width: 0; }
/* FILAS NIVELADAS: las cinco piezas de cada tarjeta son filas de la rejilla
   (el patrón de `.co-guias`, §6.44). La factura TAMBIÉN es subgrid: con solo
   `grid-row: span 5`, abrir su «Añadir o cambiar hojas» repartía el alto extra
   entre las cinco pistas que comparte con los DNI y sus piezas se separaban a
   saltos; así solo crece la última fila, que en las demás es aire bajo las
   ayudas. Sin subgrid se quedan los mínimos de arriba y el pie abajo. */
@supports (grid-template-rows: subgrid) {
  .co-docrej > .co-doc {
    display: grid; grid-row: span 5; grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem;
  }
  .co-docrej .co-doc__cab { min-height: 0; }
  .co-docrej .co-doc__pie { margin-block-start: 0; align-self: start; }
}
/* La factura no tiene nada que subir: su zona no reserva alto (en fila con los
   DNI ya la iguala la pista) y las hojas van arriba. */
.co-docpanel .co-doc--factura { --gc-doc-zona: 0px; }
.co-docpanel .co-doc--factura .co-doc__zona { align-content: start; }
/* «Añadir o cambiar hojas»: era el «+ Factura» del alta (`.co-exp-nuevo`, otra
   piel) suelto bajo la lista; ahora es el pie de la tarjeta de la factura. */
.co-doc__mas { min-width: 0; }
.co-doc__mas > summary {
  display: inline-flex; align-items: center; gap: 0.45rem;
  list-style: none; cursor: pointer;
  font-size: var(--texto-s); font-weight: 600; color: var(--gc-enlace);
  border-radius: var(--radio-m);
}
.co-doc__mas > summary::-webkit-details-marker { display: none; }
.co-doc__mas > summary svg { width: 1em; height: 1em; flex: none; }
.co-doc__mas > summary:hover { color: var(--gc-tinta-fuerte); text-decoration: underline; }
.co-doc__mas > summary:focus-visible { outline: 2px solid var(--gc-foco); outline-offset: 2px; }
.co-doc__mas[open] > summary svg { rotate: 45deg; }
.co-doc__mas > .co-form { margin-block-start: var(--esp-3); }
@media (prefers-reduced-motion: no-preference) {
  .co-doc__mas > summary svg { transition: rotate 0.2s ease; }
}
@media (pointer: coarse) { .co-doc__mas > summary { min-height: 44px; } }
/* «AÑADIR O CAMBIAR HOJAS» ABIERTO: LA FACTURA, A SU PROPIA FILA Y SIN HUECOS
   (revisión del encargo de 2026-10-05). Abierto, el formulario —y con él las
   tarjetas de los ficheros elegidos— hacía crecer el pie de la factura, y sus
   vecinas de fila (las del DNI, que comparten las pistas del subgrid) se
   estiraban con el blanco dentro (§6.5; medido a 1366: 252 px sin ficheros y
   915 con cinco hojas). Abierta, la factura ocupa la fila ENTERA (su formulario
   gana el ancho) y la rejilla se queda con las columnas que dejan las tarjetas
   de fichero en filas COMPLETAS: 3 si caben justas, 2 si son pares y 1 si no
   (los mismos `data-resto-*` con los que la factura cierra la fila). Las de
   fichero siguen sin cruzar nunca. Sin `:has()` el navegador ignora estas
   reglas y se queda lo de antes. */
@container docs (min-width: 36rem) {
  .co-docrej:has(> .co-doc--factura .co-doc__mas[open]) > .co-doc--factura { grid-column: 1 / -1; }
}
@container docs (min-width: 36rem) and (max-width: 57.99rem) {
  .co-docrej[data-resto-2="1"]:has(> .co-doc--factura .co-doc__mas[open]) { grid-template-columns: minmax(0, 1fr); }
}
@container docs (min-width: 58rem) {
  .co-docrej[data-resto-2="0"]:not([data-resto-3="0"]):has(> .co-doc--factura .co-doc__mas[open]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .co-docrej[data-resto-2="1"]:not([data-resto-3="0"]):has(> .co-doc--factura .co-doc__mas[open]) { grid-template-columns: minmax(0, 1fr); }
}
/* ---- fin de DOCUMENTOS HOMOGÉNEO (lo vigila tests/test_documentos_homogeneos.py) ---- */

/* ============================ 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(--gc-linea-fuerte);
  border-radius: var(--radio-m);
  background: var(--gc-fondo);
}
.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(--gc-solido); color: var(--gc-acento-claro);
}
.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(--gc-tinta-fuerte); font-size: var(--texto-s); }
.co-candado__p { margin: 0; font-size: var(--texto-xs); color: var(--gc-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(--gc-superficie); border: 1px solid var(--gc-linea-fuerte);
  font-size: var(--texto-xs); font-weight: 600; color: var(--gc-tinta-fuerte);
  text-decoration: none;
}
.co-candado__lista a::before {
  content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%;
  background: var(--gc-acento); flex: none;
}
.co-candado__lista a:hover { border-color: var(--gc-enlace); }
.co-candado__lista a:focus-visible { outline: 2px solid var(--gc-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: grid; gap: var(--esp-2);
  margin: var(--esp-2) 0 0;
  padding: var(--esp-3);
  border: 1px solid var(--gc-borde);
  border-radius: var(--radio-m);
  background: var(--gc-superficie);
}
.co-doc__listo[hidden] { display: none; }
.co-doc__listo-txt {
  display: flex; align-items: flex-start; gap: 0.5rem; margin: 0;
  font-size: var(--texto-xs); color: var(--gc-tinta-fuerte); font-weight: 600;
}
.co-doc__listo-txt svg { width: 1rem; height: 1rem; flex: none; color: var(--gc-exito); margin-top: 0.1rem; }
/* «Lista · sin enviar» (U1b) pide una acción: reloj ÁMBAR en vez del check de
   «hecho», el mismo color que el punto de la lista (integración U1b). Solo el
   icono cambia: el texto sigue en tinta (§6.5). */
.co-doc__listo-txt .co-doc__listo-pend { display: none; color: var(--gc-aviso); }
.co-doc__listo-txt--pendiente .co-doc__listo-ok { display: none; }
.co-doc__listo-txt--pendiente .co-doc__listo-pend { display: block; }
/* LOS BOTONES CON ICONO de la fila de la firma (enviar por correo, por
   WhatsApp, copiar, ver el firmado). */
.co-boton--reenviar { gap: 0.5rem; }
.co-boton--reenviar svg { width: 1.05rem; height: 1.05rem; flex: none; }
/* La espera entre enlaces (2026-09-15; de los tres canales desde 2026-09-16):
   dice cuánto falta y por qué (cada enlace nuevo anula el anterior). */
.co-doc__reenviar-espera { margin: 0; min-width: 0; font-size: var(--texto-xs); color: var(--gc-tinta-suave); }
.co-doc__reenviar-espera[hidden] { display: none; }

/* ENVIARLE EL ENLACE: correo, WhatsApp o copiarlo (decisión 8, 2026-09-16).
   Zona de acción propia dentro del «todo listo» (§6.88): título, la barra de
   botones con su filete y alineada al final (§6.104), y debajo lo que hay que
   saber (el motivo de un WhatsApp imposible, la espera, el enlace recién
   generado). En estrecho los botones se apilan a todo el ancho. */
/* La tarjeta de la firma ya no vive en la rejilla: es su hermana, a lo ancho
   y debajo (U1a, «DOCUMENTOS HOMOGÉNEO»). Con los botones de enviar dentro, en
   una columna de un tercio se apilaban y estiraban la fila entera. */
.co-enlace { display: grid; gap: var(--esp-2); min-width: 0; }
.co-enlace[hidden] { display: none; }
.co-enlace__titulo { margin: 0; padding-top: var(--esp-2); border-top: 1px solid var(--gc-borde); font-size: var(--texto-xs); font-weight: 700; color: var(--gc-tinta-fuerte); }
.co-enlace__botones { flex-wrap: wrap; gap: var(--esp-2); margin: 0; padding-top: 0; border-top: 0; }
.co-enlace__form { margin: 0; display: contents; }
.co-enlace__motivo,
.co-enlace__nota {
  position: relative;
  margin: 0;
  padding-inline-start: 1rem;
  font-size: var(--texto-xs);
  color: var(--gc-tinta-suave);
}
/* El motivo lleva un PUNTO de aviso y el texto en tinta suave (§6.5): dice por
   qué el botón de WhatsApp no se puede pulsar, no es un error. */
.co-enlace__motivo::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gc-aviso);
}
.co-enlace__resultado {
  display: grid;
  gap: var(--esp-2);
  min-width: 0;
  padding: var(--esp-3);
  border: 1px solid var(--gc-borde);
  border-radius: var(--radio-m);
  background: var(--gc-superficie);
}
.co-enlace__resultado[hidden] { display: none; }
.co-enlace__hecho { margin: 0; font-size: var(--texto-xs); font-weight: 600; color: var(--gc-tinta-fuerte); }
.co-enlace__valor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}
.co-enlace__valor .campo__entrada { min-width: 0; font-size: var(--texto-xs); direction: ltr; }
.co-enlace__valor [hidden] { display: none; }
.co-doc__firmado { display: flex; justify-content: flex-end; margin: var(--esp-2) 0 0; }
.co-doc__firmado[hidden] { display: none; }
@media (max-width: 40rem) {
  .co-enlace__botones { display: grid; grid-template-columns: minmax(0, 1fr); }
  .co-enlace__botones .co-boton { width: 100%; justify-content: center; }
  .co-enlace__valor { grid-template-columns: minmax(0, 1fr); }
  .co-doc__firmado .co-boton { width: 100%; justify-content: center; }
}

/* EL DOCUMENTO FIRMADO en su diálogo: la imagen a lo ancho, sobre papel. */
.co-modal--documento { inline-size: min(52rem, calc(100vw - 2rem)); }
.co-modal__documento {
  display: block;
  inline-size: 100%;
  block-size: auto;
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-s);
  background: var(--gc-superficie);
}

/* EL MANDATO SEPA, con quién y cuándo, bajo su casilla (decisión 8); y el aviso
   de que una cuenta NUEVA pide volver a marcarla. Punto de color + tinta (§6.5). */
.co-domi__quien,
.co-domi__rehacer {
  position: relative;
  margin: 0;
  padding-inline-start: 1rem;
  font-size: var(--texto-xs);
  color: var(--gc-tinta-suave);
}
.co-domi__quien::before,
.co-domi__rehacer::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  top: 0.45em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--gc-exito);
}
.co-domi__rehacer { color: var(--gc-tinta); }
.co-domi__rehacer::before { background: var(--gc-aviso); }

/* ============================================================
   RESPONSIVE (auditoría en navegador, 2026-09-06)
   ============================================================ */

/* Barras que se desplazan en horizontal (menú de zonas, pestañas internas,
   hitos, subpestañas): el borde por el que AÚN hay contenido se desvanece. Las
   clases las pone `initScrollIndicadores` (colaborador.js) midiendo el scroll:
   con CSS solo no se sabe si queda algo fuera. La máscara va sobre el propio
   scroller, así que se mueve con él. */
.co-nav__lista.es-scroll-der, .co-tg__nav.es-scroll-der, .co-stepper.es-scroll-der, .co-subtabs.es-scroll-der {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent);
}
.co-nav__lista.es-scroll-izq, .co-tg__nav.es-scroll-izq, .co-stepper.es-scroll-izq, .co-subtabs.es-scroll-izq {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 2.75rem), transparent);
}
.co-nav__lista.es-scroll-izq.es-scroll-der, .co-tg__nav.es-scroll-izq.es-scroll-der,
.co-stepper.es-scroll-izq.es-scroll-der, .co-subtabs.es-scroll-izq.es-scroll-der {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent);
  mask-image: linear-gradient(to right, transparent, #000 2.75rem, #000 calc(100% - 2.75rem), transparent);
}
/* Objetivos táctiles (≥ 44 px) de la ficha cuando el puntero es un dedo. Los
   del resto del área («Dar de baja», «Salir», los enlaces-botón) siguen en
   `colaborador.css`: esta regla se partió en dos en U4b. */
@media (pointer: coarse) {
  .co-expediente__volver {
    display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.5rem;
  }
  .co-boton--sutil { min-height: 2.75rem; }
  /* Sin el margen negativo de antes: con `flex-basis: 100%` el enlace medía el
     ancho entero MÁS 0,5 rem y se salía 4 px por cada lado a 390 (QA de L4). */
  /* Cada fila del lateral («Qué falta») es un objetivo de dedo: medía 39 px. */
  .co-reqs--ficha .co-req > a { display: block; min-height: 2.75rem; padding-block: 0.35rem; }
  /* Lo que la QA final midió por debajo de 44 px en la ficha a 390 (anterior a
     L4, sale igual sin hermanos): «Confirmar la dirección» del lateral (24-27 px),
     las pestañas internas y «Salir» (42 px; su regla, en `colaborador.css`). */
  .co-lateral-extra > a { display: block; min-height: 2.75rem; padding-block: 0.6rem; }
  .co-tg__tab { min-height: 2.75rem; }
}
.co-tg__nav { scroll-margin-block-start: 9rem; }
.co-mascara__valor--correo { overflow-wrap: break-word; }

/* «NO A TODO» de los extras del alta. Es el atajo de la mayoría de las altas y
   con `--sutil` no lo veía nadie (petición del dueño). Cuerpo propio, y una
   sacudida corta que lo señala mientras queden preguntas sin contestar — tras
   la puerta de motion, como todo movimiento de la casa. */
.co-boton--marcado {
  background: var(--gc-superficie);
  border: 1px solid var(--gc-tinta);
  color: var(--gc-tinta);
  font-weight: 600;
}
.co-boton--marcado:hover:not(:disabled) { background: var(--gc-fondo-suave); }
.co-prefs__todo-no { position: relative; }

@keyframes co-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-4px); }
  30% { transform: translateX(4px); }
  45% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  .co-prefs__todo-no.es-sacude { animation: co-shake 520ms ease-in-out both; }
}

/* La pregunta a la que se acaba de llevar el foco. Mismo gesto que la tarjeta
   `es-destacada` del checklist: un realce corto, no un color permanente. */
.co-prefs__item.es-destacada {
  border-radius: var(--radius-gota-s);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc-actual) 35%, transparent);
}

/* ========================================================================
   EL AVISO DE LA INDEXADA: un <dialog> propio del área (2026-09-14)
   En esta área no había ningún modal (`.aut-modal` vive en otra hoja que esta
   página no carga). Un `<dialog>` cerrado lo oculta el navegador: por eso el
   `display` va SOLO en `[open]` — puesto en la clase a secas, el diálogo
   saldría pintado dentro de la página. Riesgos con PUNTO y texto en tinta
   (§6.5); botonera separada y al final (§6.88/§6.104).
   ======================================================================== */
.co-modal {
  inline-size: min(40rem, calc(100vw - 2rem));
  max-block-size: calc(100vh - 2rem);
  max-block-size: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: var(--radio-l);
  background: var(--gc-superficie);
  color: var(--gc-tinta);
  box-shadow: var(--gc-sombra-modal);
  overflow: hidden;
}
.co-modal[open] { display: flex; flex-direction: column; }
.co-modal::backdrop { background: var(--gc-velo); }

.co-modal__cab {
  flex: none;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-4) var(--esp-3);
  border-block-end: 1px solid var(--gc-linea);
}
.co-modal__cab-txt { display: grid; gap: 0.2rem; min-width: 0; }
.co-modal__titulo {
  margin: 0;
  font-family: var(--fuente-display);
  font-size: var(--texto-l);
  line-height: 1.2;
  color: var(--gc-tinta-fuerte);
  text-wrap: balance;
}
.co-modal__cerrar {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  margin-block-start: -0.35rem;
  margin-inline-end: -0.6rem;
  padding: 0;
  color: var(--gc-tinta-suave);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.co-modal__cerrar svg { inline-size: 1.2rem; block-size: 1.2rem; }
.co-modal__cerrar:hover { color: var(--gc-tinta); background: var(--gc-fondo-suave); }
.co-modal__cerrar:focus-visible { outline: 2px solid var(--gc-foco); outline-offset: 2px; }

.co-modal__cuerpo {
  flex: 1 1 auto;
  min-block-size: 0;
  overflow: auto;
  display: grid;
  align-content: start;
  gap: var(--esp-4);
  padding: var(--esp-4);
}

/* EL PIE FIJO del diálogo: la casilla obligatoria, su error y la botonera,
   siempre visibles aunque el cuerpo scrollee. La casilla vivía al final del
   cuerpo y a 390 px quedaba bajo el pliegue: solo se veía el botón
   deshabilitado, sin decir qué faltaba. El filete de arriba es el que separa la
   zona de acción del contenido (§6.88); dentro, la botonera no repite el suyo. */
.co-modal__pie {
  flex: none;
  display: grid;
  gap: var(--esp-2);
  margin: 0;
  padding: var(--esp-3) var(--esp-4);
  border-block-start: 1px solid var(--gc-linea);
  background: var(--gc-superficie);
}
.co-modal__pie .co-modal__botonera {
  margin: 0;
  padding-block-start: 0;
  border-block-start: 0;
}
/* EL PRIMARIO DESHABILITADO SE DISTINGUE. El ámbar al 70 % de
   `.co-boton[disabled]` sigue pareciendo pulsable, y aquí lo que hay que leer
   es «falta marcar la casilla de arriba»: gris plano, con borde y sin sombra. */
.co-modal__pie .co-boton--primario[disabled] {
  opacity: 1;
  background: var(--gc-fondo-suave);
  color: var(--gc-tinta-suave);
  border-color: var(--gc-borde);
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  .co-modal[open] { animation: co-modal-entra 220ms cubic-bezier(0.22, 0.7, 0.35, 1) both; }
  .co-modal[open]::backdrop { animation: co-modal-fondo 220ms ease-out both; }
  @keyframes co-modal-entra {
    from { opacity: 0; transform: translateY(10px) scale(0.985); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes co-modal-fondo { from { opacity: 0; } to { opacity: 1; } }
}

/* ---- La tira del candado, arriba de cada zona bloqueada ---- */
.co-candado {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  background: var(--gc-superficie);
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-l);
}
.co-candado__icono {
  flex: none; display: inline-grid; place-items: center;
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: 50%;
  background: var(--gc-fondo-suave); color: var(--gc-tinta-suave);
}
.co-candado__icono svg { width: 1.15rem; height: 1.15rem; display: block; }
.co-candado__texto { flex: 1 1 16rem; min-width: 0; }
.co-candado__titulo { margin: 0; font-weight: 700; color: var(--gc-tinta); }

/* ===========================================================================
   «LO ESTAMOS REVISANDO», EN GRANDE (decisión 13) — encima de los hitos
   ---------------------------------------------------------------------------
   Petición del dueño: «en un recuadro encima del estado, en grande y bonito,
   para que sepan que lo estamos revisando». Estilo de la casa (§6.5):
   superficie de tarjeta, borde fino completo y UN punto de estado como única
   marca de color, texto en tinta — nada de banda pastel. El color del punto
   dice la variante: ámbar mientras lo revisamos, marino con el contrato
   lanzado, verde con el alta activa. No declara `display`: se enciende y se
   apaga con `[hidden]` (§6.70) y el vigía lo repinta sin recargar.
   Propiedades lógicas para el árabe (§6.111).
   =========================================================================== */
.co-en-revision {
  position: relative;
  margin: var(--esp-3) 0 0;
  padding-block: var(--esp-4);
  padding-inline: 3.1rem var(--esp-5);
  background: var(--gc-superficie);
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--gc-sombra);
}
.co-en-revision__punto {
  position: absolute; inset-inline-start: 1.3rem; top: 1.55rem;
  width: 0.85rem; height: 0.85rem; border-radius: 50%;
  background: var(--gc-aviso);
}
.co-en-revision[data-variante="lanzado"] .co-en-revision__punto { background: var(--gc-info); }
.co-en-revision[data-variante="activa"] .co-en-revision__punto { background: var(--gc-exito); }
@media (prefers-reduced-motion: no-preference) {
  /* Vivo, sin gritar: un halo que respira mientras el trabajo es nuestro. */
  .co-en-revision[data-variante="revisando"] .co-en-revision__punto {
    animation: co-en-revision-halo 2.4s ease-in-out infinite;
  }
  @keyframes co-en-revision-halo {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--gc-aviso) 45%, transparent); }
    50% { box-shadow: 0 0 0 0.45rem color-mix(in srgb, var(--gc-aviso) 0%, transparent); }
  }
}
.co-en-revision__cuerpo { display: grid; gap: 0.35rem; min-width: 0; }
.co-en-revision__titulo {
  margin: 0; font-family: var(--fuente-marca); font-weight: 700;
  font-size: var(--texto-l); line-height: 1.2; color: var(--gc-tinta-fuerte);
}
.co-en-revision__texto { margin: 0; font-size: var(--texto-m); line-height: 1.5; color: var(--gc-tinta-fuerte); max-width: 70ch; }
.co-en-revision__siguiente {
  margin: 0.2rem 0 0; font-size: var(--texto-s); font-weight: 600; color: var(--gc-enlace);
}
@media (max-width: 40rem) {
  .co-en-revision { padding-inline: 2.6rem var(--esp-4); }
  .co-en-revision__punto { inset-inline-start: 1rem; }
  .co-en-revision__titulo { font-size: var(--texto-m); }
  .co-en-revision__texto { font-size: var(--texto-s); }
}

/* ===========================================================================
   LA FACTURA USADA AL ABRIR EL EXPEDIENTE (decisión 11) — pestaña Documentos
   ---------------------------------------------------------------------------
   Informativa: una fila por hoja con su nombre, sus datos y «Ver». Rejilla con
   `minmax(min(…, 100%), 1fr)` para que un nombre de fichero largo no ensanche
   la pista (§6.76) y a 390 px quede una columna sin scroll lateral (§6.94).
   =========================================================================== */
/* Desde U1a la factura es una tarjeta MÁS de la rejilla (`.co-doc--factura`,
   «DOCUMENTOS HOMOGÉNEO»): cierra la última fila y el aire lo pone el `gap`. */
.co-factura-usada__hojas {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--esp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
}
.co-factura-usada__hoja {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem var(--esp-2); align-items: center; min-width: 0;
  padding: var(--esp-2) var(--esp-3);
  border: 1px solid var(--gc-linea); border-radius: var(--radio-m);
}
.co-factura-usada__hoja.es-purgada { border-style: dashed; }
.co-factura-usada__nombre { grid-column: 1; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.co-factura-usada__meta { grid-column: 1; font-size: var(--texto-xs); color: var(--gc-tinta-suave); min-width: 0; }
.co-factura-usada__purgada { grid-column: 1 / -1; font-size: var(--texto-xs); color: var(--gc-tinta-suave); }
.co-factura-usada__ver { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }

/* ===================== La dirección del suministro (decisión 14) =====================
   La misma rejilla que el área (`base.css` · `.dir-rejilla`). Aquí solo lo que es
   de esta superficie: el estado dicho con palabras (§6.88), el motivo de una
   propuesta insegura con el punto de color como única marca (§6.5) y la nota de
   «qué falta» del lateral, que no cuenta en el % porque no bloquea (Fase A).
   El `[hidden]` del número lo cubre la guarda de la pieza (`.co-expediente [hidden]`). */
.co-direccion__estado { margin: 0; font-size: var(--texto-s); color: var(--gc-tinta); }
.co-direccion__estado:empty { display: none; }
.co-direccion__motivo {
  position: relative; margin: 0; padding-inline-start: var(--esp-4);
  font-size: var(--texto-s); color: var(--gc-tinta);
}
.co-direccion__motivo::before {
  content: ""; position: absolute; inset-inline-start: 0.2rem; top: 0.5em;
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--gc-aviso);
}
.co-direccion__form { display: flex; flex-direction: column; gap: var(--esp-3); min-width: 0; }
.co-direccion.es-aportada { background: color-mix(in srgb, var(--gc-exito) 5%, var(--gc-superficie)); }
.co-lateral-extra { display: grid; gap: 0.2rem; margin: var(--esp-2) 0 0; font-size: var(--texto-xs); color: var(--gc-tinta-suave); }
.co-lateral-extra a { font-size: var(--texto-s); font-weight: 700; color: var(--gc-enlace); }

/* ===========================================================================
   VARIOS SUMINISTROS DE LA MISMA PERSONA (L4 de ESPECIFICACION-multicontrato.md,
   2026-09-30)
   ---------------------------------------------------------------------------
   El bloque «Otros suministros de esta persona» de la ficha, la pregunta «¿es
   otro suministro?» del alta, las notas «ya aportado en…» y los atajos para
   copiar la cuenta o las respuestas de un hermano.

   Estilo de la casa (§6.5): superficie clara, borde fino y un PUNTO de color
   como única marca; nada de bandas pastel. Propiedades LÓGICAS de punta a punta
   para el árabe (§6.111). Ninguna regla declara `display` sobre algo que se
   conmute con `[hidden]` sin pasar por la guarda genérica (`.co-expediente
   [hidden]`, la primera regla de esta hoja; en el colaborador, también la de
   `.co-cuerpo`) (§6.36/§6.70). Las rejillas llevan `minmax(0, 1fr)` y los hijos
   `min-width: 0`: un CUPS o una dirección larga no ensanchan su pista (§6.76).
   =========================================================================== */

/* ---- «¿Es otro suministro?» (alta paso 3 y corregir el correo) ---- */
.co-otro-suministro {
  display: grid; gap: var(--esp-2); min-width: 0;
  margin: var(--esp-3) 0 0;
  padding: var(--esp-3);
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-m);
  background: var(--gc-superficie);
}
.co-otro-suministro__titulo { margin: 0; font-size: var(--texto-s); font-weight: 700; color: var(--gc-tinta); }
.co-otro-suministro__lista {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.35rem; min-width: 0;
}
.co-otro-suministro__item {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem;
  min-width: 0; font-size: var(--texto-s);
}
.co-otro-suministro__enlace { color: var(--gc-enlace); font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.co-otro-suministro__cups {
  font-variant-numeric: tabular-nums; font-size: var(--texto-xs);
  color: var(--gc-tinta-suave); overflow-wrap: anywhere;
}
.co-otro-suministro .co-consent { margin: 0; color: var(--gc-tinta); font-weight: 600; }
.co-otro-suministro .campo__ayuda { margin: 0; }

/* ---- El bloque de la persona ---- */
.co-persona {
  margin: var(--esp-3) 0 0;
  padding: var(--esp-4) var(--esp-5);
  background: var(--gc-superficie);
  border: 1px solid var(--gc-linea);
  border-radius: var(--radio-l);
  box-shadow: var(--gc-sombra);
  display: grid; gap: var(--esp-3);
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  scroll-margin-block-start: calc(var(--altura-cabecera, 5rem) + 4.5rem);
}
.co-persona > * { min-width: 0; }
/* En qué lote heredado va (U1b: la firma es por contrato): una frase con su punto. */
.co-persona__estado,
.co-doc__lote {
  position: relative; margin: 0;
  padding-inline-start: 1.1rem;
  font-size: var(--texto-s); font-weight: 600; color: var(--gc-tinta);
}
.co-doc__lote { font-size: var(--texto-xs); }
.co-persona__estado::before,
.co-doc__lote::before {
  content: ""; position: absolute; inset-inline-start: 0.1rem; top: 0.5em;
  width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--gc-info);
}
.co-persona .co-alerta { margin: 0; }
/* Hasta cuándo vale el enlace del lote: una línea de apoyo bajo el estado,
   alineada con su texto (no con su punto). */
.co-persona__caduca {
  margin: -0.35rem 0 0; padding-inline-start: 1.1rem;
  font-size: var(--texto-xs); color: var(--gc-tinta-suave);
}

@media (max-width: 40rem) {
  .co-persona { padding: var(--esp-3); }
}

/* ---- «Ya aportado en…» / «Vale para los n expedientes» ---- */
.co-conectado {
  margin: 0; display: flex; align-items: flex-start; gap: 0.45rem;
  font-size: var(--texto-xs); font-weight: 600; color: var(--gc-enlace);
  min-width: 0;
}
.co-conectado svg { flex: none; width: 1rem; height: 1rem; margin-block-start: 0.05rem; }
.co-conectado span { overflow-wrap: anywhere; min-width: 0; }
.co-conectado--suave { font-weight: 500; color: var(--gc-tinta-suave); }

/* ---- Copiar la cuenta o las respuestas de un hermano ---- */
.co-copiar {
  display: flex; flex-direction: column; gap: var(--esp-2); min-width: 0;
  padding: var(--esp-3);
  border: 1px dashed var(--gc-linea); border-radius: var(--radio-m);
}
.co-copiar__grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 0.35rem; }
.co-copiar__titulo { margin: 0 0 0.25rem; padding: 0; font-size: var(--texto-s); font-weight: 700; color: var(--gc-tinta-fuerte); }
.co-copiar__op {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem;
  align-items: start; font-size: var(--texto-s); cursor: pointer;
}
.co-copiar__op input { width: 1.05rem; height: 1.05rem; margin-block-start: 0.15rem; accent-color: var(--gc-enlace); }
.co-copiar__op span { overflow-wrap: anywhere; min-width: 0; }
.co-copiar__botones { display: flex; flex-wrap: wrap; gap: var(--esp-2); justify-content: flex-end; }
.co-copiar__botones > .co-boton { max-width: 100%; white-space: normal; text-align: start; }
@media (pointer: coarse) {
  .co-copiar__op { min-height: 44px; align-items: center; }
  .co-copiar__op input { margin-block-start: 0; }
}

/* La referencia del contrato en la cabecera de la ficha (U1b): la misma que
   lleva el asunto del correo cuando la persona tiene varios contratos. */
.co-expediente__ref {
  font-size: var(--texto-xs); font-weight: 600; color: var(--gc-tinta-suave);
  white-space: nowrap;
}

/* Un aviso justo encima de los hitos no puede ir pegado a ellos. */
.co-expediente--ficha > .co-alerta + .co-stepper { margin-block-start: var(--esp-3); }

/* El enlace dentro de un aviso («Abrir ese expediente»). */
.co-alerta__enlace { color: var(--gc-enlace); font-weight: 700; }

/* LA MIGA de la ficha del contrato: «Clientes › Javier Palomo › C/ Mayor 3».
   El separador va en `::before`, fuera de los aislamientos: en árabe el «›»
   se refleja solo (§6.111). */
.co-miga { flex-basis: 100%; }
.co-miga__lista {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem;
  margin: 0; padding: 0; list-style: none; font-size: var(--texto-s);
}
.co-miga__paso { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--gc-tinta-suave); min-width: 0; overflow-wrap: anywhere; }
.co-miga__paso + .co-miga__paso::before { content: "›"; color: var(--gc-tinta-suave); }
.co-miga__paso[aria-current] { color: var(--gc-tinta); font-weight: 650; }
.co-miga__enlace { color: var(--gc-tinta-suave); text-decoration: none; font-weight: 600; }
.co-miga__enlace:hover { color: var(--gc-tinta); text-decoration: underline; }

/* «Contrato i de n de {nombre} · anterior · siguiente · Ver el cliente»,
   colocados con propiedades lógicas (Colab apdo. 5.8). */
.co-posicion {
  flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.25rem var(--esp-3); margin: 0.1rem 0 0; font-size: var(--texto-s);
  color: var(--gc-tinta-suave);
}
.co-posicion__texto { font-weight: 600; color: var(--gc-tinta); overflow-wrap: anywhere; }
.co-posicion__enlace {
  display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: 2rem;
  color: var(--gc-enlace); font-weight: 650; text-decoration: none;
}
.co-posicion__enlace:hover { text-decoration: underline; }
.co-posicion__enlace--cliente { margin-inline-start: auto; }
/* ‹ y › tienen ESPEJO BIDI: en RTL el navegador ya los da la vuelta, y con
   `scale: var(--lg-sentido)` se giraban dos veces (QA de U5). */
.co-posicion__flecha { display: inline-block; }

/* El correo y el teléfono, de LECTURA en la ficha del contrato: se cambian en
   la ficha del cliente (U5). */
.co-solo-lectura { display: grid; gap: 0.25rem; min-width: 0; }
.co-solo-lectura__nota { margin: 0; font-size: var(--texto-xs); color: var(--gc-tinta-suave); }
.co-solo-lectura__enlace { color: var(--gc-enlace); font-weight: 700; }
/* «Este contrato es de otra persona»: plegado, porque es la excepción. */
.co-otra-persona { min-width: 0; margin-block-start: var(--esp-2); }
.co-otra-persona__resumen {
  display: inline-flex; align-items: center; min-block-size: 2.25rem; cursor: pointer;
  font-size: var(--texto-s); font-weight: 650; color: var(--gc-tinta);
  text-decoration: underline; text-underline-offset: 0.15em;
}
.co-otra-persona[open] > .co-otra-persona__resumen { margin-block-end: var(--esp-2); }

/* Los AVISOS de la persona (lote heredado, teléfonos distintos): lo que queda
   del bloque «Otros suministros» (U5). */
.co-persona--avisos { padding: var(--esp-3) var(--esp-4); }

/* La tabla COMPACTA de los contratos del cliente, en el lateral de la ficha
   del contrato, encima de «Qué falta» (plan choque 7). */
.co-card--cliente { margin-block-end: var(--esp-3); }
.co-card--cliente .gc-tabla { box-shadow: none; }

@media (pointer: coarse) {
  .co-posicion__enlace, .co-miga__enlace, .co-otra-persona__resumen { min-block-size: 2.75rem; }
}

/* U8a: `.co-enlace-sutil` (el enlace con aspecto de texto) lo usan la puerta
   de acceso, la verificación y «Todos los contratos»: vive en la pieza que
   cargan TODAS las páginas del área y la Oficina. */
.co-enlace-sutil {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--gc-info); font: inherit; font-size: var(--texto-s); font-weight: 600;
  text-decoration: none;
}
.co-enlace-sutil:hover { text-decoration: underline; }
@media (pointer: coarse) {
  .co-enlace-sutil {
      display: inline-flex; align-items: center; min-height: 2.75rem; padding-block: 0.5rem;
    }
}

/* U8a: las animaciones del asistente (`gestion-clientes.css`) y la del panel
   final del área (`colaborador.css`, `.co-final`), aquí: esta pieza la cargan
   todas las páginas del área y la Oficina, así que el `@keyframes` existe en
   cualquier anfitrión. */
@keyframes co-escaneo {
    0%   { transform: translateY(-110%); }
    50%  { transform: translateY(215%); }
    100% { transform: translateY(-110%); }
  }
@keyframes co-paso-entra {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
@keyframes co-renglon {
    0%, 100% { background: var(--gc-linea); }
    30%      { background: color-mix(in srgb, var(--gc-enlace) 45%, var(--gc-linea)); }
  }