/* Sistema de diseño de AutoContratos · componentes.
 *
 * Las piezas que comparten consola, portal y pantalla, con prefijo `c-` y
 * todos sus estados: hover, foco, activo, deshabilitado (colores propios,
 * nunca `opacity`), cargando y error. No hay aquí ni un color ni una medida
 * escritos a mano: todo sale de `tokens.css`. La galería `qa/galeria/` es la
 * verdad visual de esta hoja.
 *
 * Reglas que esta hoja fija (plan de mejora de UI, 24-sep-2026):
 * - Un botón primario ámbar por vista; lo demás es secundario o terciario.
 * - Controles de una misma fila comparten altura (40 px; 44 en táctil).
 * - El estado se dice con fondo, icono y texto; nunca con un borde lateral.
 * - Toda espera tiene forma: spinner, esqueleto, barra o velo con mensaje.
 * - Selector sólo cuando hay elección real: 2-3 opciones van en `c-segmentado`.
 */

@layer componentes {

  /* ── Iconos ──────────────────────────────────────────────────────────── */

  .c-sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .c-icono {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    vertical-align: -0.25em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .c-icono--chico { width: 16px; height: 16px; vertical-align: -0.2em; }
  .c-icono--grande { width: 32px; height: 32px; }
  .c-icono--chevron { transition: transform var(--dur-2) var(--curva); }

  /* ── Utilidades ──────────────────────────────────────────────────────── */

  .c-oculto-visual {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  .c-tenue { color: var(--color-texto-tenue); }
  .c-chico { font-size: var(--t-2); }
  .c-mono { font-family: var(--fuente-mono); font-size: var(--t-2); }
  .c-cifra { font-variant-numeric: tabular-nums; }

  .c-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--e2);
  }

  .c-acciones--derecha { justify-content: flex-end; }
  .c-acciones--entre { justify-content: space-between; }

  .c-pila { display: flex; flex-direction: column; gap: var(--e4); }
  .c-pila--apretada { gap: var(--e2); }

  /* ── Botón ───────────────────────────────────────────────────────────── */

  .c-boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    height: var(--alto-control);
    padding: var(--e2) var(--e4);
    border: 1px solid var(--color-borde-control);
    border-radius: var(--r-control);
    background: var(--color-superficie);
    color: var(--color-texto);
    font: 600 var(--t-3) / 1 var(--fuente-texto);
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
      background-color var(--dur-1) var(--curva),
      border-color var(--dur-1) var(--curva),
      color var(--dur-1) var(--curva),
      transform var(--dur-1) var(--curva);
  }

  .c-boton:hover { background: var(--color-superficie-2); }
  .c-boton:active { transform: translateY(1px); }

  .c-boton--primario {
    background: var(--color-accion);
    border-color: var(--color-accion);
    color: var(--color-accion-texto);
  }

  .c-boton--primario:hover {
    background: var(--color-accion-hover);
    border-color: var(--color-accion-hover);
  }

  .c-boton--terciario {
    background: transparent;
    border-color: transparent;
    color: var(--color-enlace);
  }

  .c-boton--terciario:hover {
    background: var(--color-superficie-2);
    color: var(--color-enlace-hover);
  }

  .c-boton--peligro {
    background: var(--color-peligro-fondo);
    border-color: var(--color-peligro-fondo);
    color: var(--color-peligro);
  }

  .c-boton--peligro:hover {
    background: var(--color-peligro);
    border-color: var(--color-peligro);
    color: var(--color-superficie);
  }

  .c-boton--chico {
    height: var(--alto-control-chico);
    padding: var(--e1) var(--e3);
    font-size: var(--t-2);
  }

  .c-boton--icono {
    width: var(--alto-control);
    padding: 0;
  }

  .c-boton--icono.c-boton--chico { width: var(--alto-control-chico); }
  .c-boton--bloque { width: 100%; }

  .c-boton[disabled],
  .c-boton[aria-disabled="true"] {
    background: var(--color-superficie-2);
    border-color: var(--color-borde);
    color: var(--color-texto-tenue);
    cursor: not-allowed;
    transform: none;
  }

  .c-boton[aria-busy="true"] {
    pointer-events: none;
  }

  .c-boton .c-spinner {
    width: 16px;
    height: 16px;
    border-color: currentColor;
    border-right-color: transparent;
  }

  /* ── Spinner y esqueleto ─────────────────────────────────────────────── */

  .c-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    border: 2px solid var(--color-borde);
    border-top-color: var(--color-marca);
    border-radius: 50%;
    animation: c-girar var(--dur-giro) linear infinite;
  }

  .c-spinner--chico { width: 16px; height: 16px; }

  .c-espera {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    color: var(--color-texto-tenue);
    font-size: var(--t-2);
  }

  /* Lectura documental real: trazo y pluma, sin barra de progreso ficticia. */
  .c-carga-documento {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    max-width: 100%;
    color: var(--color-texto);
    font: 500 var(--t-2) / var(--interlineado-cuerpo) var(--fuente-texto);
  }

  .c-carga-documento[hidden] { display: none; }

  .c-carga-documento__escena {
    position: relative;
    flex: 0 0 100px;
    width: 100px;
    height: 40px;
    overflow: hidden;
  }

  .c-carga-documento__papel { display: block; width: 100%; height: 100%; }
  .c-carga-documento__guia { fill: none; stroke: var(--color-borde-control); stroke-width: 1; stroke-dasharray: 2 4; }
  .c-carga-documento__trazo {
    fill: none;
    stroke: var(--color-accion);
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: c-pluma-trazo var(--dur-pluma) var(--curva) infinite;
  }

  .c-carga-documento__pluma {
    position: absolute;
    inset: 0 auto auto 0;
    width: 20px;
    height: 20px;
    fill: var(--color-toggle-fondo);
    stroke: var(--color-toggle-texto);
    stroke-width: 1;
  }

  .c-carga-documento__texto { min-width: 0; overflow-wrap: anywhere; }

  @supports (offset-path: path("M 6 26 L 90 26")) {
    .c-carga-documento__pluma {
      offset-path: path("M 6 27 C 15 10 22 10 29 27 S 41 42 49 26 S 62 10 69 26 S 81 42 91 25");
      offset-anchor: 10% 95%;
      offset-rotate: 0deg;
      animation: c-pluma-avanzar var(--dur-pluma) var(--curva) infinite;
    }
  }

  @supports not (offset-path: path("M 6 26 L 90 26")) {
    .c-carga-documento__pluma { display: none; }
  }

  .c-carga-documento--pausada .c-carga-documento__trazo,
  .c-carga-documento--pausada .c-carga-documento__pluma { animation-play-state: paused; }

  .c-esqueleto {
    display: block;
    height: 1em;
    border-radius: var(--r-control);
    background: linear-gradient(
      90deg,
      var(--color-superficie-2) 25%,
      var(--color-borde-suave) 50%,
      var(--color-superficie-2) 75%
    );
    background-size: 200% 100%;
    animation: c-brillo var(--dur-brillo) linear infinite;
  }

  .c-esqueleto--linea { width: 100%; }
  .c-esqueleto--corta { width: 40%; }
  .c-esqueleto--titulo { height: var(--t-5); width: 55%; }
  .c-esqueleto--control { height: var(--alto-control); }
  .c-esqueleto--bloque { height: 120px; border-radius: var(--r-tarjeta); }

  .c-velo {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-velo);
    z-index: var(--z-pegajoso);
  }

  .c-velo__mensaje {
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    padding: var(--e2) var(--e4);
    border-radius: var(--r-pill);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra-2);
    font-size: var(--t-2);
    font-weight: 600;
  }

  /* ── Campo ───────────────────────────────────────────────────────────── */

  .c-campo {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    min-width: 0;
  }

  .c-campo__etiqueta {
    font-size: var(--t-2);
    font-weight: 600;
    color: var(--color-texto);
  }

  .c-campo__opcional {
    font-weight: 400;
    color: var(--color-texto-tenue);
  }

  .c-campo--obligatorio .c-campo__etiqueta::after {
    content: " *";
    color: var(--color-atencion);
  }

  .c-campo__control {
    display: block;
    width: 100%;
    height: var(--alto-control);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--color-borde-control);
    border-radius: var(--r-control);
    background: var(--color-superficie);
    color: var(--color-texto);
    font-size: var(--t-3);
    line-height: var(--interlineado-cuerpo);
    transition: border-color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
  }

  .c-campo__control::placeholder { color: var(--color-texto-tenue); }

  textarea.c-campo__control {
    height: auto;
    min-height: calc(var(--alto-control) * 2.4);
    padding: var(--e2) var(--e3);
    resize: vertical;
  }

  .c-campo__control--chico {
    height: var(--alto-control-chico);
    padding: var(--e1) var(--e2);
    font-size: var(--t-2);
  }

  .c-campo__control[disabled] {
    background: var(--color-superficie-2);
    border-color: var(--color-borde);
    color: var(--color-texto-tenue);
    cursor: not-allowed;
  }

  .c-campo__control[readonly] {
    background: var(--color-superficie-2);
    border-color: var(--color-borde);
  }

  .c-campo--error .c-campo__control,
  .c-campo__control[aria-invalid="true"] {
    border-color: var(--color-peligro);
  }

  .c-campo__ayuda {
    font-size: var(--t-2);
    color: var(--color-texto-tenue);
  }

  .c-campo__error {
    display: flex;
    align-items: flex-start;
    gap: var(--e1);
    font-size: var(--t-2);
    color: var(--color-peligro);
  }

  .c-campo__error .c-icono { margin-top: 2px; }

  /* Lo que el sistema ya tiene: se muestra puesto, con «Cambiar». */
  .c-campo__registrado {
    display: flex;
    align-items: center;
    gap: var(--e2);
    font-size: var(--t-2);
    color: var(--color-marca-texto);
  }

  .c-campo__registrado .c-boton { margin-left: auto; }
  .c-campo > .c-boton { align-self: flex-start; }

  /* Select: sin imagen de fondo (la CSP y la regla de tokens lo impiden);
     el chevron es un cuadrado girado dibujado con bordes. */
  .c-campo__select {
    position: relative;
    display: block;
  }

  .c-campo__select .c-campo__control {
    appearance: none;
    padding-right: calc(var(--e3) + 24px);
  }

  .c-campo__select::after {
    content: "";
    position: absolute;
    top: calc(50% - 6px);
    right: var(--e4);
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-texto-tenue);
    border-bottom: 2px solid var(--color-texto-tenue);
    transform: rotate(45deg);
    pointer-events: none;
  }

  .c-campo__fila {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2) var(--e4);
    align-items: center;
  }

  .c-casilla {
    display: flex;
    align-items: flex-start;
    gap: var(--e2);
    min-height: var(--alto-control);
    padding: var(--e2) 0;
    cursor: pointer;
  }

  .c-casilla input {
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    flex: 0 0 auto;
    accent-color: var(--color-marca);
    cursor: pointer;
  }

  .c-casilla__texto { font-size: var(--t-3); }
  .c-casilla__ayuda { display: block; font-size: var(--t-2); color: var(--color-texto-tenue); }

  .c-casilla input[disabled] + .c-casilla__texto { color: var(--color-texto-tenue); }

  /* ── Selector de archivo ─────────────────────────────────────────────── */

  .c-archivo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    padding: var(--e5);
    border: 1px dashed var(--color-borde-control);
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie);
    text-align: center;
    transition: background-color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
  }

  .c-archivo--arrastrando {
    border-color: var(--color-marca);
    border-style: solid;
    background: var(--color-marca-fondo);
  }

  .c-archivo .c-icono--grande { color: var(--color-marca); }
  .c-archivo__titulo { font-weight: 600; }
  .c-archivo__ayuda { font-size: var(--t-2); color: var(--color-texto-tenue); max-width: 40ch; }
  .c-archivo__boton { margin-top: var(--e1); }

  .c-archivo__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--e2);
  }

  .c-archivo__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e2) var(--e3);
    padding: var(--e2) var(--e3);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-control);
    background: var(--color-superficie);
    text-align: left;
  }

  .c-archivo__item .c-icono { color: var(--color-texto-tenue); }
  .c-archivo__nombre { font-weight: 600; overflow-wrap: anywhere; }
  .c-archivo__detalle { font-size: var(--t-2); color: var(--color-texto-tenue); }
  .c-archivo__item .c-progreso { grid-column: 2 / -1; }
  .c-archivo__item--error { border-color: var(--color-peligro); }
  .c-archivo__item--error .c-archivo__detalle { color: var(--color-peligro); }
  .c-archivo__item--listo .c-icono { color: var(--color-marca-texto); }

  /* ── Chip de estado ──────────────────────────────────────────────────── */

  .c-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--e1);
    height: 24px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--r-pill);
    background: var(--color-superficie-2);
    color: var(--color-texto-tenue);
    font-size: var(--t-1);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
  }

  .c-chip .c-icono { width: 14px; height: 14px; }

  .c-chip--informacion {
    background: var(--color-superficie);
    border-color: var(--color-borde-control);
    color: var(--color-texto);
  }

  .c-chip--exito { background: var(--color-marca-fondo); color: var(--color-marca-texto); }
  .c-chip--atencion { background: var(--color-atencion-fondo); color: var(--color-atencion); }
  .c-chip--peligro { background: var(--color-peligro-fondo); color: var(--color-peligro); }
  .c-chip--afirmacion { background: var(--color-afirmacion-fondo); color: var(--color-afirmacion); }

  .c-chip__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  /* ── Aviso en línea ──────────────────────────────────────────────────── */

  .c-aviso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--e2) var(--e3);
    align-items: start;
    padding: var(--e3) var(--e4);
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie-2);
    color: var(--color-texto);
  }

  .c-aviso > .c-icono { margin-top: 2px; color: var(--color-texto-tenue); }
  .c-aviso__titulo { margin: 0 0 var(--e1); font-weight: 600; }
  .c-aviso__cuerpo { margin: 0; }
  .c-aviso__cuerpo + .c-aviso__cuerpo { margin-top: var(--e1); }

  .c-aviso__acciones {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    gap: var(--e2);
  }

  .c-aviso--atencion { background: var(--color-atencion-fondo); }
  .c-aviso--atencion > .c-icono { color: var(--color-atencion); }
  .c-aviso--error { background: var(--color-peligro-fondo); }
  .c-aviso--error > .c-icono { color: var(--color-peligro); }
  .c-aviso--exito { background: var(--color-marca-fondo); }
  .c-aviso--exito > .c-icono { color: var(--color-marca-texto); }

  /* ── Toast ───────────────────────────────────────────────────────────── */

  .c-toasts {
    position: fixed;
    inset: auto 0 var(--e4) 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    padding: 0 var(--e4);
    z-index: var(--z-toast);
    pointer-events: none;
  }

  .c-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--e3);
    width: 100%;
    max-width: 440px;
    padding: var(--e3) var(--e3) var(--e3) var(--e4);
    border-radius: var(--r-tarjeta);
    background: var(--color-texto);
    color: var(--color-fondo);
    box-shadow: var(--sombra-2);
    pointer-events: auto;
    animation: c-entrar var(--dur-3) var(--curva);
  }

  .c-toast--error { background: var(--color-peligro); color: var(--color-superficie); }
  .c-toast__texto { margin: 0; font-size: var(--t-2); font-weight: 500; }
  .c-toast__acciones { display: flex; align-items: center; gap: var(--e1); }

  .c-toast .c-boton--terciario {
    color: inherit;
    height: var(--alto-control-chico);
  }

  .c-toast .c-boton--terciario:hover { background: var(--color-velo); color: inherit; }

  /* ── Tabla ───────────────────────────────────────────────────────────── */

  /* `position: relative` para que lo posicionado dentro (el «Acciones» sólo
     para lectores de pantalla de la última columna) quede contenido y no
     estire la página hacia la derecha cuando la tabla desplaza. Cuando
     desplaza de verdad, `puente.js` la hace enfocable (`tabindex="0"`) para
     que el teclado también pueda recorrerla. */
  .c-tabla-marco {
    position: relative;
    overflow-x: auto;
    border-radius: var(--r-tarjeta);
  }

  .c-tabla-marco[tabindex]:focus-visible { outline-offset: -3px; }

  .c-tabla {
    width: 100%;
    border: 1px solid var(--color-borde);
    border-radius: var(--r-tarjeta);
    border-collapse: separate;
    border-spacing: 0;
    background: var(--color-superficie);
    font-size: var(--t-2);
    font-variant-numeric: tabular-nums;
  }

  .c-tabla thead th:first-child { border-top-left-radius: calc(var(--r-tarjeta) - 1px); }
  .c-tabla thead th:last-child { border-top-right-radius: calc(var(--r-tarjeta) - 1px); }
  .c-tabla tbody tr:last-child td:first-child { border-bottom-left-radius: calc(var(--r-tarjeta) - 1px); }
  .c-tabla tbody tr:last-child td:last-child { border-bottom-right-radius: calc(var(--r-tarjeta) - 1px); }

  .c-tabla th {
    text-align: left;
    padding: var(--e2) var(--e3);
    background: var(--color-superficie-2);
    color: var(--color-texto-tenue);
    font-size: var(--t-1);
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 1px solid var(--color-borde);
  }

  .c-tabla td {
    padding: var(--e3);
    border-bottom: 1px solid var(--color-borde-suave);
    vertical-align: middle;
  }

  .c-tabla tbody tr:last-child td { border-bottom: 0; }
  .c-tabla tbody tr:hover { background: var(--color-superficie-2); }
  .c-tabla tbody tr[aria-selected="true"] { background: var(--color-marca-fondo); }

  .c-tabla__principal { font-weight: 600; color: var(--color-texto); }
  .c-tabla__principal a { color: inherit; text-decoration: none; }
  .c-tabla__principal a:hover { color: var(--color-enlace); text-decoration: underline; }
  .c-tabla__secundario { display: block; font-size: var(--t-1); color: var(--color-texto-tenue); }
  .c-tabla th.c-tabla__num,
  .c-tabla td.c-tabla__num { text-align: right; }
  .c-tabla__acciones { text-align: right; white-space: nowrap; width: 1%; }
  .c-tabla__acciones .c-acciones { justify-content: flex-end; flex-wrap: nowrap; }

  .c-tabla__cargando td { padding: var(--e3); }
  .c-tabla__vacio td { padding: 0; border-bottom: 0; }

  /* ── Diálogo ─────────────────────────────────────────────────────────── */

  .c-dialogo {
    width: min(100% - var(--e6), 560px);
    max-height: min(100% - var(--e6), 90vh);
    margin: auto;
    padding: 0;
    border: 0;
    border-radius: var(--r-dialogo);
    background: var(--color-superficie);
    color: var(--color-texto);
    box-shadow: var(--sombra-2);
  }

  .c-dialogo[open] {
    display: flex;
    flex-direction: column;
    animation: c-entrar var(--dur-3) var(--curva);
  }

  .c-dialogo::backdrop { background: var(--color-velo); }
  .c-dialogo--grande { width: min(100% - var(--e6), 880px); }

  .c-dialogo__cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--e3);
    padding: var(--e5) var(--e5) var(--e3);
  }

  .c-dialogo__titulo { font-size: var(--t-4); }
  .c-dialogo__contexto { margin: var(--e1) 0 0; color: var(--color-texto-tenue); font-size: var(--t-2); }

  .c-dialogo__cuerpo {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 0 var(--e5) var(--e5);
  }

  .c-dialogo__pie {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--e2);
    padding: var(--e3) var(--e5) var(--e5);
    border-top: 1px solid var(--color-borde);
    background: var(--color-superficie);
  }

  /* ── Navegación lateral ──────────────────────────────────────────────── */

  .c-nav {
    display: flex;
    flex-direction: column;
    gap: var(--e1);
    padding: var(--e2);
  }

  .c-nav__seccion {
    padding: var(--e3) var(--e3) var(--e1);
    font-size: var(--t-1);
    font-weight: 600;
    color: var(--color-texto-tenue);
  }

  .c-nav__enlace {
    display: flex;
    align-items: center;
    gap: var(--e3);
    height: var(--alto-control);
    padding: var(--e2) var(--e3);
    border-radius: var(--r-control);
    color: var(--color-texto);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--dur-1) var(--curva);
  }

  .c-nav__enlace .c-icono { color: var(--color-texto-tenue); }
  .c-nav__enlace:hover { background: var(--color-superficie-2); color: var(--color-texto); }

  .c-nav__enlace[aria-current="page"],
  .c-nav__enlace[aria-current="true"] {
    background: var(--color-superficie-2);
    font-weight: 600;
  }

  .c-nav__enlace[aria-current="page"] .c-icono,
  .c-nav__enlace[aria-current="true"] .c-icono { color: var(--color-marca-texto); }
  .c-nav__contador { margin-left: auto; }

  .c-nav__pie {
    display: grid;
    gap: var(--e1);
    margin-top: auto;
    padding: var(--e3);
    border-top: 1px solid var(--color-borde);
  }

  .c-nav__nombre { font-weight: 600; overflow-wrap: anywhere; }
  .c-nav__detalle { font-size: var(--t-2); color: var(--color-texto-tenue); }
  .c-nav__pie .c-acciones { margin-top: var(--e1); }

  /* Cajón: la navegación bajo 900 px. */
  .c-cajon {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(320px, 85vw);
    display: flex;
    flex-direction: column;
    background: var(--color-superficie);
    box-shadow: var(--sombra-2);
    transform: translateX(-100%);
    transition: transform var(--dur-3) var(--curva);
    z-index: var(--z-toast);
  }

  .c-cajon[data-abierto="true"] { transform: translateX(0); }

  .c-cajon__velo {
    position: fixed;
    inset: 0;
    background: var(--color-velo);
    z-index: var(--z-pegajoso);
  }

  /* ── Cabecera de vista ───────────────────────────────────────────────── */

  .c-cabecera-vista {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e3) var(--e4);
    margin-bottom: var(--e5);
  }

  .c-cabecera-vista__titulo { font-size: var(--t-5); }
  .c-cabecera-vista__contexto { margin: var(--e1) 0 0; color: var(--color-texto-tenue); }
  .c-cabecera-vista .c-acciones { flex-wrap: nowrap; }

  /* ── Pestañas ────────────────────────────────────────────────────────── */

  .c-pestanas {
    position: relative;
    display: flex;
    gap: var(--e1);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .c-pestanas::-webkit-scrollbar { display: none; }

  .c-pestanas::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-borde);
  }

  .c-pestanas__pestana {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--e2);
    height: var(--alto-control);
    padding: var(--e2) var(--e3);
    border: 0;
    border-radius: var(--r-control) var(--r-control) 0 0;
    background: transparent;
    color: var(--color-texto-tenue);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--dur-1) var(--curva), background-color var(--dur-1) var(--curva);
  }

  .c-pestanas__pestana:hover { background: var(--color-superficie-2); color: var(--color-texto); }

  .c-pestanas__pestana[aria-selected="true"] {
    color: var(--color-texto);
    font-weight: 600;
  }

  .c-pestanas__pestana[aria-selected="true"]::after {
    content: "";
    position: absolute;
    left: var(--e2);
    right: var(--e2);
    bottom: 0;
    height: 2px;
    border-radius: var(--r-pill);
    background: var(--color-marca);
  }

  /* ── Estado vacío ────────────────────────────────────────────────────── */

  .c-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--e2);
    padding: var(--e7) var(--e5);
    text-align: center;
    color: var(--color-texto-tenue);
  }

  .c-vacio > .c-icono { color: var(--color-borde-control); margin-bottom: var(--e1); }
  .c-vacio__titulo { font-size: var(--t-3); font-weight: 600; color: var(--color-texto); }
  .c-vacio p { margin: 0; max-width: 44ch; }
  .c-vacio .c-boton { margin-top: var(--e2); }

  /* ── Disclosure ──────────────────────────────────────────────────────── */

  .c-disclosure {
    border: 1px solid var(--color-borde);
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie);
  }

  .c-disclosure > summary {
    display: flex;
    align-items: center;
    gap: var(--e2);
    min-height: var(--alto-control-tactil);
    padding: var(--e2) var(--e4);
    border-radius: var(--r-tarjeta);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .c-disclosure > summary::-webkit-details-marker { display: none; }
  .c-disclosure > summary:hover { background: var(--color-superficie-2); }
  .c-disclosure > summary .c-icono--chevron { margin-left: auto; color: var(--color-texto-tenue); }
  .c-disclosure[open] > summary { border-radius: var(--r-tarjeta) var(--r-tarjeta) 0 0; }
  .c-disclosure[open] > summary .c-icono--chevron { transform: rotate(180deg); }
  .c-disclosure__cuerpo { padding: var(--e2) var(--e4) var(--e4); }
  .c-disclosure__cuerpo > p { margin: 0 0 var(--e2); }
  .c-disclosure__cuerpo > p:last-child { margin-bottom: 0; }

  .c-disclosure--ligero { border: 0; background: transparent; }
  .c-disclosure--ligero > summary { min-height: var(--alto-control-chico); padding: var(--e1) var(--e2); font-size: var(--t-2); color: var(--color-enlace); }
  .c-disclosure--ligero > summary .c-icono--chevron { margin-left: 0; }
  .c-disclosure--ligero .c-disclosure__cuerpo { padding: var(--e1) var(--e2) var(--e2); font-size: var(--t-2); color: var(--color-texto-tenue); }

  /* ── Interruptor ─────────────────────────────────────────────────────── */

  .c-interruptor-fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    min-height: var(--alto-control);
  }

  .c-interruptor {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-borde-control);
    border-radius: var(--r-pill);
    background: var(--color-superficie-2);
    cursor: pointer;
    transition: background-color var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
  }

  .c-interruptor::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-superficie);
    border: 1px solid var(--color-borde-control);
    box-sizing: border-box;
    transition: transform var(--dur-2) var(--curva), border-color var(--dur-2) var(--curva);
  }

  .c-interruptor[aria-checked="true"] {
    background: var(--color-marca);
    border-color: var(--color-marca);
  }

  .c-interruptor[aria-checked="true"]::after {
    transform: translateX(20px);
    border-color: var(--color-marca);
  }

  .c-interruptor[disabled] { cursor: not-allowed; border-color: var(--color-borde); }
  .c-interruptor[disabled]::after { border-color: var(--color-borde); background: var(--color-superficie-2); }

  /* ── Progreso ────────────────────────────────────────────────────────── */

  .c-progreso {
    display: block;
    width: 100%;
    height: 8px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--color-superficie-2);
    overflow: hidden;
    appearance: none;
  }

  .c-progreso::-webkit-progress-bar { background: var(--color-superficie-2); border-radius: var(--r-pill); }
  .c-progreso::-webkit-progress-value { background: var(--color-marca); border-radius: var(--r-pill); }
  .c-progreso::-moz-progress-bar { background: var(--color-marca); border-radius: var(--r-pill); }

  .c-progreso:indeterminate::-webkit-progress-bar {
    background: linear-gradient(90deg, var(--color-superficie-2) 25%, var(--color-marca-fondo) 50%, var(--color-superficie-2) 75%);
    background-size: 200% 100%;
    animation: c-brillo var(--dur-brillo) linear infinite;
  }

  .c-progreso-fila {
    display: flex;
    align-items: center;
    gap: var(--e3);
    font-size: var(--t-2);
  }

  .c-progreso-fila .c-progreso { flex: 1 1 auto; }
  .c-progreso-fila__cifra { min-width: 4.5ch; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--color-texto-tenue); }

  /* Pasos del asistente: «Paso 3 de 6 · Quién aporta cada dato». */
  .c-pasos {
    display: grid;
    gap: var(--e2);
    font-size: var(--t-2);
  }

  .c-pasos__texto { display: flex; justify-content: space-between; gap: var(--e3); color: var(--color-texto-tenue); }
  .c-pasos__texto strong { color: var(--color-texto); }
  .c-pasos .c-progreso { height: 4px; }

  /* ── Tecla ───────────────────────────────────────────────────────────── */

  .c-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border: 1px solid var(--color-borde-control);
    border-radius: var(--r-control);
    box-shadow: 0 1px 0 var(--color-borde-control);
    background: var(--color-superficie);
    color: var(--color-texto);
    font: 600 var(--t-1) / 1 var(--fuente-texto);
  }

  /* ── Elección en tarjetas (una entre varias: quién firma, qué modelo) ── */

  .c-elecciones { display: grid; gap: var(--e2); }

  .c-eleccion {
    display: grid;
    gap: var(--e1);
    width: 100%;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--color-borde-control);
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color var(--dur-1) var(--curva), background var(--dur-1) var(--curva);
  }

  .c-eleccion:hover { border-color: var(--color-marca); }

  .c-eleccion[aria-checked="true"] {
    border-color: var(--color-marca);
    background: var(--color-marca-fondo);
    box-shadow: inset 0 0 0 1px var(--color-marca);
  }

  .c-eleccion:disabled {
    color: var(--color-texto-tenue);
    background: var(--color-superficie-2);
    border-color: var(--color-borde);
    cursor: not-allowed;
  }

  .c-eleccion--secundaria { border-style: dashed; }
  .c-eleccion__titulo { font-weight: 600; }
  .c-eleccion__detalle { font-size: var(--t-2); color: var(--color-texto-tenue); }
  .c-eleccion[aria-checked="true"] .c-eleccion__titulo { color: var(--color-marca-texto); }

  /* ── Tarjeta de decisión (pantalla) ──────────────────────────────────── */

  .c-decision {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: var(--e1) var(--e3);
    width: 100%;
    padding: var(--e3) var(--e4);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie);
    color: var(--color-texto);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--curva), border-color var(--dur-1) var(--curva);
  }

  .c-decision:hover { background: var(--color-superficie-2); }
  .c-decision .c-kbd { grid-row: 1 / span 2; }
  .c-decision__titulo { font-weight: 600; }
  .c-decision__detalle { font-size: var(--t-2); color: var(--color-texto-tenue); }

  .c-decision--correcto .c-kbd { background: var(--color-marca-fondo); border-color: var(--color-marca); color: var(--color-marca-texto); }
  .c-decision--transcripcion .c-kbd { background: var(--color-atencion-fondo); border-color: var(--color-atencion); color: var(--color-atencion); }
  .c-decision--eleccion .c-kbd { background: var(--color-superficie-2); border-color: var(--color-borde-control); color: var(--color-texto); }
  .c-decision--afirmar .c-kbd { background: var(--color-afirmacion-fondo); border-color: var(--color-afirmacion); color: var(--color-afirmacion); }

  .c-decision[aria-pressed="true"],
  .c-decision--activa { border-color: var(--color-borde-control); background: var(--color-superficie-2); }
  .c-decision--correcto[aria-pressed="true"] { background: var(--color-marca-fondo); border-color: var(--color-marca); }
  .c-decision--transcripcion[aria-pressed="true"] { background: var(--color-atencion-fondo); border-color: var(--color-atencion); }
  .c-decision--afirmar[aria-pressed="true"] { background: var(--color-afirmacion-fondo); border-color: var(--color-afirmacion); }

  .c-decision[disabled] {
    background: var(--color-superficie-2);
    color: var(--color-texto-tenue);
    border-color: var(--color-borde);
    cursor: not-allowed;
  }

  .c-decision[disabled] .c-kbd { background: var(--color-superficie-2); border-color: var(--color-borde); color: var(--color-texto-tenue); }

  /* ── Segmentado (2-3 opciones excluyentes) ───────────────────────────── */

  .c-segmentado {
    display: inline-flex;
    align-items: stretch;
    gap: var(--e1);
    min-height: calc(var(--alto-control-tactil) + 2 * var(--e1) + 2px);
    max-width: 100%;
    padding: var(--e1);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-pill);
    background: var(--color-superficie-2);
    vertical-align: middle;
  }

  .c-segmentado__opcion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--e2);
    min-width: 0;
    min-height: var(--alto-control-tactil);
    padding: var(--e2) var(--e5);
    border: 0;
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--color-texto-tenue);
    font: 600 var(--t-2) / 1.25 var(--fuente-texto);
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: background-color var(--dur-1) var(--curva), color var(--dur-1) var(--curva);
  }

  .c-segmentado__opcion:hover { color: var(--color-texto); }

  .c-segmentado__opcion[aria-checked="true"],
  .c-segmentado__opcion[aria-pressed="true"] {
    background: var(--color-toggle-fondo);
    color: var(--color-toggle-texto);
  }

  .c-segmentado__opcion[disabled] { color: var(--color-texto-tenue); cursor: not-allowed; }
  .c-segmentado__opcion[disabled][aria-checked="true"],
  .c-segmentado__opcion[disabled][aria-pressed="true"] {
    background: var(--color-superficie);
    color: var(--color-texto-tenue);
    box-shadow: inset 0 0 0 1px var(--color-borde-control);
  }
  .c-segmentado--bloque { display: flex; width: 100%; }
  .c-segmentado--bloque .c-segmentado__opcion { flex: 1 1 0; }
  .c-segmentado--chico { min-height: calc(var(--alto-control-chico) + 2 * var(--e1) + 2px); }
  .c-segmentado--chico .c-segmentado__opcion { min-height: var(--alto-control-chico); padding: var(--e1) var(--e2); font-size: var(--t-1); }

  /* ── Menú de fila ────────────────────────────────────────────────────── */

  .c-menu { position: relative; display: inline-block; }
  .c-menu > summary { list-style: none; }
  .c-menu > summary::-webkit-details-marker { display: none; }

  .c-menu__lista {
    position: absolute;
    top: calc(100% + var(--e1));
    right: 0;
    min-width: 200px;
    margin: 0;
    padding: var(--e1);
    list-style: none;
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie);
    box-shadow: var(--sombra-2);
    z-index: var(--z-pegajoso);
    animation: c-entrar var(--dur-2) var(--curva);
  }

  .c-menu__item {
    display: flex;
    align-items: center;
    gap: var(--e2);
    width: 100%;
    height: var(--alto-control);
    padding: 0 var(--e3);
    border: 0;
    border-radius: var(--r-control);
    background: transparent;
    color: var(--color-texto);
    font: 500 var(--t-2) / 1 var(--fuente-texto);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  .c-menu__item:hover { background: var(--color-superficie-2); }
  .c-menu__item .c-icono { color: var(--color-texto-tenue); }
  .c-menu__item--peligro { color: var(--color-peligro); }
  .c-menu__item--peligro .c-icono { color: var(--color-peligro); }
  .c-menu__separador { height: 1px; margin: var(--e1) 0; background: var(--color-borde); }

  /* ── Tarjeta y lista de datos ────────────────────────────────────────── */

  .c-tarjeta {
    padding: var(--e5);
    border: 1px solid var(--color-borde);
    border-radius: var(--r-tarjeta);
    background: var(--color-superficie);
  }

  .c-tarjeta__titulo { font-size: var(--t-4); }
  .c-tarjeta__contexto { margin: var(--e1) 0 0; color: var(--color-texto-tenue); font-size: var(--t-2); }
  .c-tarjeta__cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e3); margin-bottom: var(--e4); }

  .c-datos {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--e1) var(--e4);
    margin: 0;
    font-size: var(--t-2);
  }

  .c-datos dt { color: var(--color-texto-tenue); }
  .c-datos dd { margin: 0; color: var(--color-texto); overflow-wrap: anywhere; }

  /* ── Movimiento ──────────────────────────────────────────────────────── */

  @keyframes c-girar {
    to { transform: rotate(360deg); }
  }

  @keyframes c-pulso {
    0%, 100% { border-top-color: var(--color-marca); }
    50% { border-top-color: var(--color-borde); }
  }

  @keyframes c-brillo {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
  }

  @keyframes c-pluma-trazo {
    0% { stroke-dashoffset: 100; opacity: 1; }
    67% { stroke-dashoffset: 0; opacity: 1; }
    84% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }

  @keyframes c-pluma-avanzar {
    0% { offset-distance: 0%; opacity: 1; }
    67% { offset-distance: 100%; opacity: 1; }
    78%, 92% { offset-distance: 100%; opacity: 0; }
    100% { offset-distance: 0%; opacity: 1; }
  }

  @keyframes c-entrar {
    from { opacity: 0; transform: translateY(var(--e2)); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-spinner { animation-name: c-pulso; }
    .c-carga-documento__trazo { animation: none; stroke-dashoffset: 0; }
    .c-carga-documento__pluma { display: none; }
  }

  /* ── Táctil y anchuras ───────────────────────────────────────────────── */

  @media (pointer: coarse) {
    .c-boton,
    .c-campo__control:not(textarea),
    .c-pestanas__pestana,
    .c-nav__enlace,
    .c-menu__item { height: var(--alto-control-tactil); }

    .c-boton--icono { width: var(--alto-control-tactil); }
    .c-boton--icono.c-boton--chico { width: var(--alto-control-tactil); }
    .c-segmentado--chico { min-height: calc(var(--alto-control-tactil) + 2 * var(--e1) + 2px); }
    .c-segmentado--chico .c-segmentado__opcion { min-height: var(--alto-control-tactil); }
    .c-casilla { min-height: var(--alto-control-tactil); }
  }

  @media (min-width: 640px) {
    .c-toasts {
      inset: auto var(--e5) var(--e5) auto;
      align-items: flex-end;
      padding: 0;
    }
  }

  @media (max-width: 640px) {
    .c-tarjeta { padding: var(--e4); }

    .c-dialogo {
      width: 100%;
      max-height: calc(100% - var(--e6));
      margin: auto 0 0;
      border-radius: var(--r-dialogo) var(--r-dialogo) 0 0;
    }

    .c-dialogo__cabecera { padding: var(--e4) var(--e4) var(--e2); }
    .c-dialogo__cuerpo { padding: 0 var(--e4) var(--e4); }
    .c-dialogo__pie { padding: var(--e3) var(--e4) calc(var(--e4) + env(safe-area-inset-bottom)); }
    .c-dialogo__pie .c-boton { flex: 1 1 auto; }

    .c-cabecera-vista { align-items: flex-start; flex-direction: column; }
    .c-cabecera-vista .c-acciones { width: 100%; }
    .c-cabecera-vista .c-acciones .c-boton { flex: 1 1 auto; }

    /* Tabla de listado como tarjetas: cada celda lleva su etiqueta. */
    .c-tabla--tarjetas thead { display: none; }

    .c-tabla--tarjetas tbody tr {
      display: grid;
      gap: var(--e1);
      padding: var(--e3) var(--e4);
      border-bottom: 1px solid var(--color-borde);
    }

    .c-tabla--tarjetas tbody tr:last-child { border-bottom: 0; }

    .c-tabla--tarjetas td {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      justify-items: start;
      align-items: start;
      gap: var(--e3);
      padding: 0;
      border: 0;
    }

    .c-tabla--tarjetas td::before {
      content: attr(data-etiqueta);
      font-size: var(--t-1);
      font-weight: 600;
      color: var(--color-texto-tenue);
    }

    .c-tabla--tarjetas td.c-tabla__principal { display: block; font-size: var(--t-3); }
    .c-tabla--tarjetas td.c-tabla__principal::before { content: none; }
    .c-tabla--tarjetas td.c-tabla__num { text-align: left; }
    .c-tabla--tarjetas td.c-tabla__acciones { display: block; width: auto; margin-top: var(--e2); }
    .c-tabla--tarjetas td.c-tabla__acciones::before { content: none; }
    .c-tabla--tarjetas td.c-tabla__acciones .c-acciones { justify-content: flex-start; }
  }

  @media (max-width: 1100px) {
    .c-nav--plegable .c-nav__texto,
    .c-nav--plegable .c-nav__contador,
    .c-nav--plegable .c-nav__seccion,
    .c-nav--plegable .c-nav__pie .c-nav__detalle { display: none; }

    .c-nav--plegable .c-nav__enlace { justify-content: center; padding: var(--e2) 0; }
  }

  @media (max-width: 900px) {
    .c-nav--plegable .c-nav__texto,
    .c-nav--plegable .c-nav__contador,
    .c-nav--plegable .c-nav__seccion,
    .c-nav--plegable .c-nav__pie .c-nav__detalle { display: revert; }

    .c-nav--plegable .c-nav__enlace { justify-content: flex-start; padding: var(--e2) var(--e3); }
  }
}