/* Documentos.app · paquetes/ui · app.css
   Armazón y componentes compuestos (clases da-…). Requiere tokens.css y base.css.
   Los que tienen comportamiento llevan además su Web Component (componentes/*.ts). */

/* ══ Armazón ══════════════════════════════════════════════════════════════ */
.da-app {
  min-height: 100dvh;
  display: grid;
  grid-template: "fase fase" auto "vista vista" auto "cab cab" var(--da-cabecera) "lat prin" 1fr / var(--da-lateral) minmax(0, 1fr);
}
/* Las bandas van ENCIMA de la cabecera, cada una en su fila (sin banda, la fila mide 0). Antes la de vista no tenía
   área: con grid-column 1/-1 y auto-colocada caía en una fila implícita bajo <main>, al final de la página.
   REGLA: todo hijo de .da-app lleva área o va fuera del flujo (fixed, un <dialog> cerrado, display: none). Uno sin área
   se coloca en la primera celda libre, que es la fila «fase»: saldría encima de la cabecera. Hoy los únicos sin área son
   <da-buscador> (solo un <dialog> cerrado: mide 0) y <da-avisos> (fixed).
   Con una banda, la página baja lo que mide la banda antes de que la cabecera se pegue: el lateral mide la ventana menos
   la cabecera, así que toda página tiene ese desplazamiento aunque quepa. Es a propósito: la banda se va con el primer
   desplazamiento y queda la cabecera; restarla dejaría un hueco bajo el lateral una vez desplazada. */
.da-app > .da-banda-fase { grid-area: fase; }
.da-app > .da-banda-vista { grid-area: vista; }
/* Apps sin barra lateral (las hermanas de la cuenta): cabecera arriba y el contenido centrado a todo el ancho. */
.da-app--sin-lateral { grid-template: "fase" auto "vista" auto "cab" var(--da-cabecera) "prin" 1fr / minmax(0, 1fr); }
.da-app--sin-lateral .da-principal { width: 100%; max-width: 1040px; margin-inline: auto; }
/* El borde seguro de los lados (muesca del teléfono en apaisado, con viewport-fit=cover). En vertical vale 0. */
.da-app { padding-inline: env(safe-area-inset-left) env(safe-area-inset-right); }
/* Al moverse con el tabulador, lo enfocado nunca queda bajo la cabecera ni bajo la barra inferior. */
:root { scroll-padding-block: calc(var(--da-cabecera) + var(--da-e-2)) calc(var(--da-barra-inferior) + var(--da-e-4) + var(--da-avisos-alto, 0px)); }
/* --da-avisos-alto lo escribe <da-avisos> solo mientras hay un aviso fijo: un control con foco no queda debajo (WCAG 2.4.11). */
.da-principal { grid-area: prin; min-width: 0; padding: var(--da-e-7) var(--da-margen) var(--da-e-10); }
.da-principal:focus { outline: none; }
/* Con un aviso fijo, hueco bajo el contenido de su misma altura: aunque la página quepa entera, lo último (la banda de
   acciones no pegada, el final de un formulario) se puede desplazar por encima de los avisos (WCAG 2.4.11). */
.da-principal { margin-block-end: var(--da-avisos-alto, 0px); }

/* ── Cabecera ─────────────────────────────────────────────────────────────── */
.da-cabecera {
  grid-area: cab; position: sticky; top: 0; z-index: var(--da-z-cabecera);
  display: grid; grid-template-columns: var(--da-lateral) minmax(0, 1fr) auto; align-items: center;
  padding-right: var(--da-e-4);
  background: color-mix(in srgb, var(--da-fondo) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: var(--da-filete) solid var(--da-linea);
}
.da-logo { display: inline-flex; align-items: center; gap: 10px; padding: 0 var(--da-e-5); text-decoration: none; color: var(--da-tinta); }
.da-logo svg { width: 24px; height: 24px; }
.da-logo-palabra { font: 400 1.25rem/1 var(--da-f-serif); letter-spacing: -0.01em; }
.da-logo-palabra span { color: var(--da-texto-2); }
/* Glifo de la marca en línea: el punto de acento usa los tokens del sello */
.da-marca-trazo { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.da-marca-puntos { fill: currentColor; }
.da-marca-punto { fill: var(--da-amarillo); stroke: var(--da-sello-aro); stroke-width: 0.7; }
.da-cabecera-centro { display: flex; align-items: center; gap: var(--da-e-3); min-width: 0; padding-left: var(--da-e-5); }
.da-cabecera-der { display: flex; align-items: center; gap: var(--da-e-2); }
.da-disparador-buscar {
  display: flex; align-items: center; gap: var(--da-e-2); width: min(440px, 100%); height: 36px; padding: 0 6px 0 12px;
  border: var(--da-filete) solid var(--da-linea-fuerte); border-radius: var(--da-r-lleno); background: var(--da-superficie);
  color: var(--da-texto-2); font-size: var(--da-t-30); text-align: left;
  transition: border-color var(--da-d-rapida) var(--da-c-estandar), transform var(--da-d-micro) var(--da-c-estandar);
}
.da-disparador-buscar:hover { border-color: var(--da-borde-campo); }
.da-disparador-buscar:active { transform: scale(0.99); }
.da-disparador-buscar svg { width: 16px; height: 16px; }
.da-disparador-buscar > span:first-of-type { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-organizacion { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: var(--da-r-2); background: transparent; font-size: var(--da-t-30); color: var(--da-tinta); }
.da-organizacion:hover { background: var(--da-superficie-2); }
.da-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--da-tinta); color: var(--da-invertido); font: 600 var(--da-t-20)/1 var(--da-f-sans); border: 0; }
/* Banda de fase: el aviso fijo de la beta («Fase de pruebas»), en la cuenta, en Documentos.app y en la Torre. Papel, no
   tinta (la tinta es de «ver como» y de la compuerta parada): informa sin gritar y sin amarillo. Primer hijo de .da-app.
   <div class="da-banda-fase" role="note"><span class="da-insignia da-insignia--punteada">Beta</span>
     <span>Fase de pruebas: … </span><a href="…">Escríbenos</a></div> */
.da-banda-fase {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--da-e-1) var(--da-e-3);
  min-height: 32px; padding: var(--da-e-1) var(--da-e-4); text-align: center;
  background: var(--da-superficie-opaca); color: var(--da-texto); border-bottom: var(--da-filete) solid var(--da-linea);
  font-size: var(--da-t-30);
}
.da-banda-fase a { color: var(--da-tinta); font-weight: 500; }
.da-banda-fase .da-insignia { flex: none; }
/* Banda de vista: cuando se mira algo que no es lo propio, en solo lectura («ver como» del equipo, el despacho de
   ejemplo). Tinta. Puede llevar UNA acción para salir de la vista: un enlace si navega; un <button type="button"> con
   el mismo aspecto si lo que hace no es ir a una URL (salir del ejemplo es un POST a la sesión: un href engañaría):
   <div class="da-banda-vista" role="note"><span>Estás viendo un despacho de ejemplo. Solo lectura.</span>
     <button type="button">Volver a mi despacho</button></div>
   En el teléfono, si no cabe, el enlace baja a otra línea (min-height, no height). El foco, invertido: el anillo de
   siempre (tinta en claro, amarillo en oscuro) no se ve sobre la tinta. */
.da-banda-vista {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--da-e-1) var(--da-e-3);
  min-height: 32px; padding: var(--da-e-1) var(--da-e-4); text-align: center;
  background: var(--da-tinta); color: var(--da-invertido); font-size: var(--da-t-30);
}
.da-banda-vista button { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.da-banda-vista :is(a, button) { color: var(--da-invertido); font-weight: 500; text-decoration: underline; text-decoration-thickness: var(--da-filete); text-underline-offset: 3px; }
.da-banda-vista :focus-visible { outline-color: var(--da-invertido); box-shadow: 0 0 0 2px var(--da-tinta); }
/* El anillo, pegado a la caja (offset 0) y con un poco de aire a los lados del texto: con el offset de siempre, a 360 y
   con el enlace en su propia línea, rozaba el borde inferior de la banda (capturas demo5 de t-n69tfd). */
.da-banda-vista :is(a, button) { padding-inline: var(--da-e-1); border-radius: var(--da-r-1); }
.da-banda-vista :is(a, button):focus-visible { outline-offset: 0; }
/* Mientras dura el POST: desactivado como .da-boton (0.45, sin subrayado que invite a pulsar). Con aria-disabled sigue
   enfocable y el lector lo anuncia; quien lo pone ignora el clic. */
.da-banda-vista button:is(:disabled, [aria-disabled="true"]) { opacity: 0.45; cursor: not-allowed; text-decoration: none; }

/* ── Lateral (barra inferior en el teléfono) ──────────────────────────────── */
.da-lateral {
  grid-area: lat; position: sticky; top: var(--da-cabecera); align-self: start;
  height: calc(100dvh - var(--da-cabecera)); overflow: auto;
  padding: var(--da-e-5) var(--da-e-3) var(--da-e-5) var(--da-e-4);
  display: flex; flex-direction: column; gap: var(--da-e-5);
}
.da-lateral .da-versalitas { padding: 0 var(--da-e-3); margin-bottom: var(--da-e-1); }
.da-nav-item {
  position: relative; display: flex; align-items: center; gap: var(--da-e-3);
  height: 36px; padding: 0 var(--da-e-3); border-radius: var(--da-r-2);
  color: var(--da-texto); text-decoration: none; font-size: var(--da-t-40);
  transition: background-color var(--da-d-rapida) var(--da-c-estandar), color var(--da-d-rapida) var(--da-c-estandar);
}
.da-nav-item svg { width: 18px; height: 18px; }
/* Etiqueta corta para el nav inferior del móvil: <span class="da-nav-largo">Apps y permisos</span><span class="da-nav-corto">Apps</span>.
   El oculto sale también del árbol de accesibilidad (display: none). */
.da-nav-corto { display: none; }
.da-nav-item:hover { background: var(--da-superficie-2); }
.da-nav-item[aria-current="page"] { background: var(--da-tinta); color: var(--da-invertido); }
.da-nav-item .da-contador { margin-left: auto; }
.da-nav-item .da-cuenta { margin-left: auto; font-size: var(--da-t-20); opacity: 0.7; font-variant-numeric: tabular-nums; }
.da-lateral-pie { margin-top: auto; padding: var(--da-e-3); font-size: var(--da-t-20); color: var(--da-texto-2); }

/* ── Encabezados de página ────────────────────────────────────────────────── */
.da-migas { display: flex; gap: var(--da-e-2); font-size: var(--da-t-30); color: var(--da-texto-2); margin-bottom: var(--da-e-4); }
.da-migas a { text-decoration: none; }
.da-migas a:hover { color: var(--da-tinta); text-decoration: underline; }
.da-pagina-cabeza { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--da-e-5) var(--da-e-7); margin-bottom: var(--da-e-7); }
.da-pagina-cabeza > div:first-child { flex: 1 1 420px; min-width: 0; }
.da-pagina-meta { display: flex; flex-wrap: wrap; gap: var(--da-e-1) var(--da-e-4); margin-top: var(--da-e-3); color: var(--da-texto-2); font-size: var(--da-t-30); }
.da-acciones { display: flex; flex-wrap: wrap; gap: var(--da-e-2); }
/* Acciones de la página con un motivo (p. ej. un primario con aria-disabled y aria-describedby): el .da-meta va DENTRO de
   .da-acciones--pagina, el último, en su propia línea y con el ancho de los botones: queda junto a lo que explica, en
   escritorio (a la derecha de la cabeza) y en el teléfono (debajo, a todo el ancho). width:0 + min-width:100%: no ensancha
   la caja de acciones (con flex-basis en % contaría su max-content), ocupa la que dejan los botones y salta de línea.
   <div class="da-acciones da-acciones--pagina"><button class="da-boton da-boton--primario" aria-disabled="true"
     aria-describedby="m">Enviar al cliente</button><button class="da-boton da-boton--fantasma">Cancelar</button>
     <p class="da-meta" id="m">Enviar … aún no está disponible en la fase de pruebas.</p></div> */
.da-acciones--pagina > .da-meta { flex: 1 0 auto; width: 0; min-width: 100%; margin: 0; }
/* Con motivo, la cabeza entera se alinea ARRIBA (título y botones a la altura del antetítulo), no abajo como sin él:
   abajo, cuanto más largo el motivo más suben los botones, y si la caja pasa de la columna del título, el título baja
   (con align-self solo en la caja, la línea flex crece igual y el título, en flex-end, baja: n9 del revisor). Arriba,
   nada depende del largo del texto. */
.da-pagina-cabeza:has(> .da-acciones--pagina > .da-meta) { align-items: flex-start; }
.da-seccion-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: var(--da-e-4); margin-bottom: var(--da-e-3); }
.da-dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--da-e-7); align-items: start; }
.da-pila > * + * { margin-top: var(--da-e-4); }
/* Ritmo de la página: las vistas montan sus <section> directamente en .da-principal y no ponen márgenes, así que el aire
   lo pone el sistema (en las maquetas era .m-aire). Dos secciones seguidas, o dos hojas seguidas dentro de una sección
   (la autorización de K encima de la lista de la orden), no se tocan. Con .da-pila manda la pila. */
.da-principal > section + section { margin-top: var(--da-e-8); }
section:not(.da-pila) > .da-hoja + .da-hoja { margin-top: var(--da-e-3); }

/* ── Recorrido del expediente (estados de expediente) ─────────────────────── */
/* Una columna por paso, las que haya (sin --pasos: un style en línea no pasa la CSP ni limites.ts). --pasos, si una vista
   lo pone por CSSOM, sigue mandando; sin él, la declaración no vale y las columnas salen de grid-auto-columns. */
.da-recorrido { display: grid; grid-template-columns: repeat(var(--pasos), minmax(0, 1fr)); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0 0 var(--da-e-8); }
.da-paso { position: relative; padding-top: 22px; font-size: var(--da-t-30); color: var(--da-texto-2); }
.da-paso::before { content: ""; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--da-borde-campo); background: var(--da-superficie); z-index: 1; }
.da-paso::after { content: ""; position: absolute; top: 9.5px; left: 14px; right: 2px; height: 1px; background: var(--da-linea-fuerte); }
.da-paso:last-child::after { display: none; }
.da-paso b { display: block; color: var(--da-tinta); font-weight: 500; font-size: var(--da-t-40); }
.da-paso--hecho::before { background: var(--da-tinta); border-color: var(--da-tinta); }
.da-paso--hecho::after { background: var(--da-tinta); }
.da-paso--ahora::before { border-color: var(--da-tinta); box-shadow: 0 0 0 4px var(--da-superficie), 0 0 0 5px var(--da-tinta); }
.da-paso--falta::before { border-width: 2.5px; border-color: var(--da-tinta); }
.da-paso--error::before { background: var(--da-error); border-color: var(--da-error); border-radius: 2px; }

/* ── Documentos: lista en hoja (filas) y tarjeta suelta ───────────────────── */
.da-docs { padding: var(--da-e-2) 0; }
.da-doc { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: center; gap: var(--da-e-1) var(--da-e-4); padding: var(--da-e-4) var(--da-e-5); position: relative; }
.da-doc + .da-doc { border-top: var(--da-filete) solid var(--da-linea); }
.da-doc-glifo { color: var(--da-texto-2); }
.da-doc-glifo svg { width: 22px; height: 22px; }
.da-doc-titulo { font: 400 var(--da-t-50) / 1.3 var(--da-f-serif); color: var(--da-tinta); }
.da-doc-meta { display: flex; flex-wrap: wrap; gap: 2px var(--da-e-3); font-size: var(--da-t-20); color: var(--da-texto-2); margin-top: 2px; }
.da-campos { display: inline-flex; align-items: center; gap: 3px; }
.da-campos i { width: 5px; height: 5px; border-radius: 50%; background: var(--da-linea-fuerte); }
.da-campos i.da-ok { background: var(--da-tinta); }
.da-doc-acciones { display: flex; gap: var(--da-e-1); opacity: 0; transition: opacity var(--da-d-rapida) var(--da-c-estandar); }
.da-doc:hover .da-doc-acciones, .da-doc:focus-within .da-doc-acciones, .da-doc--falta .da-doc-acciones { opacity: 1; }
@media (hover: none) { .da-doc-acciones { opacity: 1; } }
.da-doc--falta { background: var(--da-superficie); }
.da-doc--falta::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--da-tinta); }
.da-entra { animation: da-entra var(--da-m-vivo-d) var(--da-m-vivo) both; animation-delay: calc(var(--i, 0) * 28ms); }
@keyframes da-entra { from { opacity: 0; transform: translateY(6px); } }

/* Tarjeta de documento: para rejillas de catálogo y para el entregable (no para listas largas) */
.da-tarjeta-doc { display: grid; grid-template-rows: auto 1fr auto; gap: var(--da-e-3); padding: var(--da-e-5); border-radius: var(--da-r-3); background: var(--da-superficie); box-shadow: var(--da-sombra-1); position: relative; transition: box-shadow var(--da-d-rapida) var(--da-c-estandar), transform var(--da-m-vivo-d) var(--da-m-vivo); }
.da-tarjeta-doc:hover { box-shadow: var(--da-sombra-2); transform: translateY(-1px); }
.da-tarjeta-doc header { display: flex; align-items: center; justify-content: space-between; gap: var(--da-e-3); }
.da-tarjeta-doc .da-doc-titulo { font-size: var(--da-t-60); }
.da-tarjeta-doc footer { display: flex; align-items: center; justify-content: space-between; gap: var(--da-e-3); padding-top: var(--da-e-3); border-top: var(--da-filete) solid var(--da-linea); font-size: var(--da-t-20); color: var(--da-texto-2); }
.da-tarjeta-doc a { text-decoration: none; }
.da-tarjeta-doc a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
/* Hoja impresa: los puntos que «imprimen» el documento, como en la marca */
.da-impresion { display: flex; gap: 4px; }
.da-impresion i { width: 5px; height: 5px; border-radius: 50%; background: var(--da-tinta); }
.da-impresion i:nth-child(n+4) { background: var(--da-linea-fuerte); }
/* Momento «expediente completo» (AMARILLO.md, uso 3): un destello del sello, una vez */
.da-completo { animation: da-sello-golpe var(--da-m-sello-d) var(--da-m-sello) both; }
.da-completo::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 2px var(--da-amarillo); opacity: 0; animation: da-destello var(--da-d-escena) var(--da-c-salida) both; pointer-events: none; }
@keyframes da-sello-golpe { 0% { transform: scale(1); } 22% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes da-destello { 0%, 100% { opacity: 0; } 30% { opacity: 1; } }

/* ── Incidencia con salida ───────────────────────────────────────────────── */
.da-incidencia { padding: var(--da-e-5); background: var(--da-superficie); }
.da-incidencia p { margin-top: var(--da-e-2); color: var(--da-texto); max-width: 60ch; line-height: var(--da-lh-lectura); }
.da-incidencia .da-boton { margin-top: var(--da-e-4); }

/* ── Ficha de datos (dl) ──────────────────────────────────────────────────── */
.da-ficha { padding: var(--da-e-5); }
.da-ficha dl, .da-datos { display: grid; grid-template-columns: auto 1fr; gap: var(--da-e-2) var(--da-e-4); margin-top: var(--da-e-3); font-size: var(--da-t-30); }
.da-ficha dt, .da-datos dt { color: var(--da-texto-2); }
.da-ficha dd, .da-datos dd { color: var(--da-tinta); text-align: right; font-variant-numeric: tabular-nums; }

/* ── Dato con procedencia: valor, fuente y confianza, con confirmar/corregir ── */
.da-dato { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--da-e-4); padding: var(--da-e-3) 0; border-bottom: var(--da-filete) solid var(--da-linea); }
.da-dato:last-child { border-bottom: 0; }
.da-dato-nombre { font-size: var(--da-t-20); color: var(--da-texto-2); }
.da-dato-valor { font-size: var(--da-t-50); color: var(--da-tinta); font-variant-numeric: tabular-nums; }
.da-dato-fuente { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--da-e-3); font-size: var(--da-t-20); color: var(--da-texto-2); }
.da-dato-acciones { grid-column: 2; grid-row: 1 / 4; display: flex; gap: var(--da-e-1); align-items: center; }
/* Confianza: cinco puntos, como el medidor del sello */
.da-confianza { display: inline-flex; gap: 2px; align-items: center; }
.da-confianza i { width: 4px; height: 4px; border-radius: 50%; background: var(--da-linea-fuerte); }
.da-confianza[data-nivel="1"] i:nth-child(-n+1), .da-confianza[data-nivel="2"] i:nth-child(-n+2), .da-confianza[data-nivel="3"] i:nth-child(-n+3),
.da-confianza[data-nivel="4"] i:nth-child(-n+4), .da-confianza[data-nivel="5"] i { background: var(--da-tinta); }
.da-dato--confirmado .da-dato-valor::after { content: " ✓"; color: var(--da-exito); font-size: var(--da-t-30); }
.da-dato--dudoso .da-dato-valor { text-decoration: underline wavy var(--da-vigilar) 1px; text-underline-offset: 4px; }

/* ── Línea de tiempo ──────────────────────────────────────────────────────── */
.da-linea-tiempo { margin-top: var(--da-e-3); }
.da-linea-tiempo li { position: relative; padding: 0 0 var(--da-e-4) var(--da-e-5); font-size: var(--da-t-30); color: var(--da-tinta); }
.da-linea-tiempo li::before { content: ""; position: absolute; left: 3px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--da-tinta); }
.da-linea-tiempo li::after { content: ""; position: absolute; left: 6px; top: 15px; bottom: 0; width: 1px; background: var(--da-linea-fuerte); }
.da-linea-tiempo li:last-child::after { display: none; }
.da-linea-tiempo li.da-error::before { background: var(--da-error); border-radius: 1px; }
.da-linea-tiempo li.da-pendiente::before { background: var(--da-superficie); box-shadow: inset 0 0 0 1.5px var(--da-borde-campo); }
.da-linea-tiempo .da-meta { display: block; }

/* ── Tabla (por sede, por cliente) ────────────────────────────────────────── */
.da-tabla-caja { overflow-x: auto; border-radius: var(--da-r-4); background: var(--da-superficie); box-shadow: var(--da-sombra-1); }
/* Si la tabla puede desplazarse en horizontal, la caja lleva tabindex="0", role="region" y aria-label (WCAG 2.1.1). */
.da-tabla-caja:focus-visible { outline: var(--da-filete-foco) solid var(--da-foco); outline-offset: 2px; }
.da-tabla { width: 100%; border-collapse: collapse; font-size: var(--da-t-30); }
.da-tabla caption { text-align: left; padding: var(--da-e-4) var(--da-e-5) 0; font: 400 var(--da-t-60)/1.3 var(--da-f-serif); color: var(--da-tinta); }
.da-tabla th { text-align: left; font-weight: 600; font-size: var(--da-t-10); letter-spacing: var(--da-tracking-versalitas); text-transform: uppercase; color: var(--da-texto-2); padding: var(--da-e-3) var(--da-e-5); border-bottom: var(--da-filete) solid var(--da-linea); white-space: nowrap; }
.da-tabla th[aria-sort] button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }
.da-tabla th[aria-sort] button:focus-visible { outline: var(--da-filete-foco) solid var(--da-foco); outline-offset: 2px; }
.da-tabla th[aria-sort="ascending"] button::after { content: "↑"; }
.da-tabla th[aria-sort="descending"] button::after { content: "↓"; }
.da-tabla td { padding: var(--da-e-3) var(--da-e-5); border-bottom: var(--da-filete) solid var(--da-linea); vertical-align: middle; color: var(--da-texto); }
.da-tabla tbody tr:last-child > :is(td, th) { border-bottom: 0; } /* también cuando la primera celda es un th de fila (scope="row") */
.da-tabla tbody tr { transition: background-color var(--da-d-rapida) var(--da-c-estandar); }
.da-tabla tbody tr:hover { background: var(--da-superficie-2); }
.da-tabla .da-principal-celda { color: var(--da-tinta); font-weight: 500; }
.da-tabla .da-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Fila de grupo: la sede como encabezado de su bloque */
.da-tabla tbody th[scope="row"] { text-transform: none; letter-spacing: 0; font-size: inherit; font-weight: 500; color: var(--da-tinta); white-space: normal; vertical-align: middle; }
.da-tabla tr.da-grupo th { background: var(--da-superficie-2); text-transform: none; letter-spacing: 0; font-size: var(--da-t-30); color: var(--da-tinta); font-weight: 600; }
.da-barra { display: inline-flex; gap: 2px; vertical-align: middle; }
.da-barra i { width: 6px; height: 12px; border-radius: 1px; background: var(--da-linea-fuerte); }
.da-barra i.da-ok { background: var(--da-tinta); }

/* ── Semáforo de salud ────────────────────────────────────────────────────── */
.da-semaforo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--da-e-3); }
.da-sede { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px var(--da-e-3); align-items: center; padding: var(--da-e-4); border-radius: var(--da-r-3); background: var(--da-superficie); box-shadow: var(--da-sombra-1); }
.da-sede-luz { grid-row: 1 / 3; width: 14px; height: 14px; }
.da-sede-nombre { color: var(--da-tinta); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-sede-detalle { font-size: var(--da-t-20); color: var(--da-texto-2); }
.da-sede--sano .da-sede-luz { border-radius: 50%; background: var(--da-exito); }
.da-sede--vigilar .da-sede-luz { background: var(--da-vigilar); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.da-sede--revisar .da-sede-luz { background: var(--da-error); border-radius: 2px; }
.da-sede--revisar { box-shadow: inset 3px 0 0 var(--da-error), var(--da-sombra-1); }
.da-sede--sin-datos .da-sede-luz { border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--da-borde-campo); }
.da-resumen-salud { display: flex; flex-wrap: wrap; gap: var(--da-e-5); margin-bottom: var(--da-e-5); }
.da-resumen-salud b { font: 400 var(--da-t-80)/1 var(--da-f-serif); color: var(--da-tinta); display: block; }

/* ── Compuerta de la Torre (P7): interruptor general, por sede y disyuntor ────────────────────────────────
   Sin interruptor deslizante: un switch no dice si «encendido» es «en marcha» o «parado». Cada nivel enseña su estado en
   palabra + forma + peso y UN botón con la acción («Parar todo» / «Reanudar todo…»). Parado = banda de tinta invertida
   (en oscuro, de papel): lo más fuerte del sistema sin amarillo ni rojo, porque parar no es un error, es una decisión.
   Sin leer el interruptor = la misma banda (falla cerrado). Marcado en maquetas/compuerta.html. */
.da-compuerta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--da-e-5);
  padding: var(--da-e-6);
  transition: background-color var(--da-d-base) var(--da-c-estandar), color var(--da-d-base) var(--da-c-estandar);
}
.da-compuerta-estado { display: flex; align-items: flex-start; gap: var(--da-e-4); min-width: 0; flex: 1 1 420px; }
.da-compuerta-marca { flex: none; width: 16px; height: 16px; margin-top: 0.55em; }
.da-compuerta-titulo { font: 400 var(--da-t-70)/1.2 var(--da-f-serif); color: inherit; margin-top: 2px; }
.da-compuerta-meta { margin-top: var(--da-e-2); font-size: var(--da-t-30); color: var(--da-texto-2); }
.da-compuerta--en-marcha .da-compuerta-marca { border-radius: 50%; background: var(--da-exito); }
.da-compuerta--en-marcha .da-compuerta-titulo { color: var(--da-tinta); }
/* Echado (parado o sin leer): la hoja se invierte. Más específico que el cristal de .da-hoja (vidrio.css). */
.da-hoja.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer),
:root[data-material] .da-hoja.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) {
  --da-foco: var(--da-invertido);
  background: var(--da-tinta); color: var(--da-invertido); box-shadow: var(--da-sombra-2);
}
.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) :is(.da-versalitas, .da-compuerta-meta) { color: inherit; opacity: 0.8; }
/* Parada: las dos barras (❚❚), la misma forma que .da-estado--parado de cada sede. */
.da-compuerta--parada .da-compuerta-marca { border-inline: 5px solid var(--da-invertido); }
/* Sin leer: el cuadrado hueco y discontinuo; la palabra dice que no se sabe y que, por eso, está parado. */
.da-compuerta--sin-leer .da-compuerta-marca { border: 2px dashed var(--da-invertido); border-radius: 2px; }
.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) .da-boton {
  background: transparent; color: var(--da-invertido); border-color: var(--da-invertido); box-shadow: none;
}
.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) .da-boton:hover { background: color-mix(in srgb, var(--da-invertido) 14%, transparent); }
/* Sobre la tinta: aria-disabled, el contorno invertido apagado por color (no por opacidad: el anillo se vería apagado; n6
   del revisor), y el foco invertido como en .da-banda-vista (el de siempre, tinta, no se ve sobre la tinta). */
.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) :is(.da-boton[aria-disabled="true"], .da-boton[aria-disabled="true"]:hover) {
  background: transparent; color: color-mix(in srgb, var(--da-invertido) 55%, transparent); border-color: color-mix(in srgb, var(--da-invertido) 35%, transparent);
}
.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) .da-boton:focus-visible { outline-color: var(--da-invertido); box-shadow: 0 0 0 2px var(--da-tinta); }
@media (max-width: 640px) {
  .da-compuerta { padding: var(--da-e-5); }
  .da-compuerta > .da-acciones { width: 100%; }
  .da-compuerta > .da-acciones .da-boton { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .da-compuerta { transition: none; } }

/* Interruptor de una sede: estado «Parada» (❚❚ de tinta: la única forma de dos barras, ni el ■ de error ni el ● de sano;
   más peso que un error) y su fila marcada a la izquierda. La barra va en la primera celda y no en el <tr>: no todos
   los motores pintan box-shadow en una fila de tabla. :not(.da-grupo) sube la especificidad sobre la tarjeta apilable. */
.da-estado--parado { color: var(--da-tinta); font-weight: 700; }
.da-estado--parado::before { width: 9px; height: 9px; background: none; border-inline: 3px solid currentColor; }
.da-tabla tbody tr.da-fila--parada:not(.da-grupo),
.da-tabla tbody tr.da-fila--parada:not(.da-grupo):hover { background: var(--da-superficie-2); }
.da-tabla tbody tr.da-fila--parada > :first-child { box-shadow: inset 3px 0 0 var(--da-tinta); }
@media (max-width: 640px) {
  /* Apilada, la fila es una tarjeta (display: grid) y ahí la barra sí va en ella, junto a su sombra. */
  .da-tabla--apilable tbody tr.da-fila--parada:not(.da-grupo) { box-shadow: inset 3px 0 0 var(--da-tinta), var(--da-sombra-1); }
  .da-tabla--apilable tbody tr.da-fila--parada > :first-child { box-shadow: none; }
}
/* Historial de pulsos: cada barra un intento, la altura no significa nada; la forma sí */
.da-pulsos { display: flex; gap: 2px; align-items: flex-end; height: 18px; }
.da-pulsos i { width: 4px; height: 100%; border-radius: 1px; background: var(--da-exito); opacity: 0.85; }
.da-pulsos i.da-lento { background: var(--da-vigilar); height: 70%; }
.da-pulsos i.da-caido { background: var(--da-error); height: 40%; }
.da-sede--sin-datos .da-pulsos i { background: var(--da-linea-fuerte); height: 25%; opacity: 1; }

/* ── Subida (arrastrar, varias fotos, progreso) ───────────────────────────── */
.da-subida-zona {
  display: grid; justify-items: center; gap: var(--da-e-2); padding: var(--da-e-7) var(--da-e-5); text-align: center;
  border: 1.5px dashed var(--da-borde-campo); border-radius: var(--da-r-3); background: var(--da-superficie);
  transition: border-color var(--da-d-rapida) var(--da-c-estandar), background-color var(--da-d-rapida) var(--da-c-estandar), transform var(--da-m-vivo-d) var(--da-m-vivo);
}
.da-subida-zona svg { width: 28px; height: 28px; color: var(--da-texto-2); }
.da-subida-zona[data-encima] { border-color: var(--da-tinta); border-style: solid; background: var(--da-superficie-2); transform: scale(1.01); }
.da-subida-zona b { color: var(--da-tinta); font-weight: 500; }
/* En pausa (pausar(motivo)): un estado, no un fallo. Sin rayas de «suelta aquí» ni botones; el motivo en texto normal. */
.da-subida-zona[data-pausa] { border-style: solid; border-color: var(--da-linea); background: var(--da-superficie-2); }
.da-subida-zona[data-pausa] b { color: var(--da-texto-2); }  /* «Sube…» en tinta parecería una invitación a hacerlo */
.da-subida-pausa { max-width: 48ch; font-size: var(--da-t-30); color: var(--da-texto); }
.da-subida-lista { margin-top: var(--da-e-3); display: grid; gap: var(--da-e-2); }
.da-subida-archivo { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px var(--da-e-3); align-items: center; padding: var(--da-e-2) var(--da-e-3); border-radius: var(--da-r-2); background: var(--da-superficie); box-shadow: var(--da-sombra-1); font-size: var(--da-t-30); }
.da-subida-miniatura { width: 40px; height: 40px; border-radius: var(--da-r-1); background: var(--da-superficie-2); object-fit: cover; grid-row: 1 / 3; }
.da-subida-nombre { color: var(--da-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-progreso { grid-column: 2; height: 3px; border-radius: 2px; background: var(--da-superficie-3); overflow: hidden; }
.da-progreso i { display: block; height: 100%; background: var(--da-tinta); transform-origin: left; transform: scaleX(var(--p, 0)); transition: transform var(--da-d-base) var(--da-c-estandar); }
.da-subida-archivo--hecho .da-progreso i { background: var(--da-exito); }
.da-subida-archivo--error .da-progreso i { background: var(--da-error); }

/* ── Pestañas ─────────────────────────────────────────────────────────────── */
.da-pestanas-lista { position: relative; display: flex; gap: var(--da-e-5); border-bottom: var(--da-filete) solid var(--da-linea); overflow-x: auto; scrollbar-width: none; }
.da-pestana { position: relative; padding: var(--da-e-3) 0; border: 0; background: none; color: var(--da-texto-2); font-weight: 500; white-space: nowrap; }
.da-pestana:hover { color: var(--da-tinta); }
.da-pestana[aria-selected="true"] { color: var(--da-tinta); }
.da-pestana .da-contador { margin-left: 6px; }
.da-pestanas-tinta { position: absolute; left: 0; bottom: -1px; height: 2px; width: 1px; background: var(--da-tinta); transform-origin: left; transition: transform var(--da-m-vivo-d) var(--da-m-vivo); }
.da-panel-pestana { padding-top: var(--da-e-5); }
.da-panel-pestana:focus-visible { border-radius: var(--da-r-2); }

/* ── Menú contextual (popover) ────────────────────────────────────────────── */
.da-menu {
  position: fixed; inset: auto; margin: 0; padding: var(--da-e-1); min-width: 200px; border: 0;
  border-radius: var(--da-r-3); background: var(--da-superficie); color: var(--da-texto); box-shadow: var(--da-sombra-3);
  opacity: 0; transform: translateY(-4px) scale(0.98); transform-origin: top left;
  transition: opacity var(--da-d-rapida) var(--da-c-salida), transform var(--da-m-vivo-d) var(--da-m-vivo), overlay var(--da-d-rapida) allow-discrete, display var(--da-d-rapida) allow-discrete;
}
.da-menu:popover-open { opacity: 1; transform: none; }
@starting-style { .da-menu:popover-open { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.da-menu [role="menuitem"] { display: flex; align-items: center; gap: var(--da-e-3); width: 100%; min-height: 34px; padding: 0 var(--da-e-3); border: 0; border-radius: var(--da-r-2); background: none; text-align: left; font-size: var(--da-t-30); color: var(--da-tinta); }
.da-menu [role="menuitem"]:hover, .da-menu [role="menuitem"]:focus-visible { background: var(--da-superficie-2); outline: none; box-shadow: none; }
.da-menu [role="menuitem"] .da-tecla { margin-left: auto; }
.da-menu [role="menuitem"].da-peligro { color: var(--da-error); }
.da-menu hr { border: 0; border-top: var(--da-filete) solid var(--da-linea); margin: var(--da-e-1) 0; }

/* ── Diálogo y hoja lateral (sobre <dialog>) ──────────────────────────────── */
.da-dialogo, .da-hoja-lateral { border: 0; padding: 0; color: var(--da-texto); background: var(--da-superficie); box-shadow: var(--da-sombra-3); }
.da-dialogo::backdrop, .da-hoja-lateral::backdrop { background: var(--da-velo-modal); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.da-dialogo { width: min(480px, calc(100vw - 32px)); border-radius: var(--da-r-4); }
.da-dialogo[open] { animation: da-dialogo-entra var(--da-m-vivo-d) var(--da-m-vivo) both; }
.da-dialogo[open]::backdrop, .da-hoja-lateral[open]::backdrop { animation: da-aparece var(--da-d-base) var(--da-c-salida) both; }
.da-dialogo.da-saliendo { animation: da-dialogo-sale var(--da-d-rapida) var(--da-c-entrada) both; }
.da-hoja-lateral { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(520px, 100vw); height: 100dvh; max-height: none; border-radius: var(--da-r-4) 0 0 var(--da-r-4); display: none; }
.da-hoja-lateral[open] { display: flex; flex-direction: column; animation: da-hoja-entra var(--da-m-suave-d) var(--da-m-suave) both; }
.da-hoja-lateral.da-saliendo { animation: da-hoja-sale var(--da-d-rapida) var(--da-c-entrada) both; }
.da-saliendo::backdrop { animation: da-desaparece var(--da-d-rapida) var(--da-c-entrada) both; }
.da-dialogo-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--da-e-4); padding: var(--da-e-6) var(--da-e-6) 0; }
.da-dialogo-cuerpo { padding: var(--da-e-4) var(--da-e-6); line-height: var(--da-lh-lectura); }
.da-hoja-lateral .da-dialogo-cuerpo { flex: 1; overflow: auto; }
.da-dialogo-pie { display: flex; justify-content: flex-end; gap: var(--da-e-2); padding: var(--da-e-4) var(--da-e-6) var(--da-e-6); }
.da-hoja-lateral .da-dialogo-pie { border-top: var(--da-filete) solid var(--da-linea); padding-top: var(--da-e-4); }
@keyframes da-dialogo-entra { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes da-dialogo-sale { to { opacity: 0; transform: scale(0.98); } }
@keyframes da-hoja-entra { from { transform: translateX(100%); } }
@keyframes da-hoja-sale { to { transform: translateX(100%); } }
@keyframes da-aparece { from { opacity: 0; } }
@keyframes da-desaparece { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .da-hoja-lateral[open] { animation: da-aparece var(--da-d-base) linear both; }
  .da-hoja-lateral.da-saliendo { animation: da-desaparece var(--da-d-base) linear both; }
}
@media (max-width: 640px) {
  .da-dialogo { margin: auto 0 var(--da-teclado, 0px); width: 100vw; max-width: 100vw; border-radius: var(--da-r-4) var(--da-r-4) 0 0; }
  .da-hoja-lateral { border-radius: 0; }
}

/* ── Hoja inferior · <da-hoja> ────────────────────────────────────────────────
   En escritorio, un diálogo centrado. En el teléfono (≤ 640 px), una hoja que sube desde abajo: agarradera, cuerpo
   con scroll y pie fijo con los botones a todo el ancho. Sube con el teclado (--da-teclado, comun/teclado.ts) y deja
   libre el borde seguro de abajo. En el teléfono, .da-dialogo entra y sale igual: todo modal es una hoja. */
.da-hoja-inferior {
  border: 0; padding: 0; color: var(--da-texto); background: var(--da-superficie); box-shadow: var(--da-sombra-3);
  width: min(520px, calc(100vw - 32px)); max-height: min(760px, calc(100dvh - 64px)); border-radius: var(--da-r-4); overflow: hidden;
}
.da-hoja-inferior::backdrop { background: var(--da-velo-modal); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.da-hoja-inferior[open] { display: flex; flex-direction: column; animation: da-dialogo-entra var(--da-m-vivo-d) var(--da-m-vivo) both; }
.da-hoja-inferior[open]::backdrop { animation: da-aparece var(--da-d-base) var(--da-c-salida) both; }
.da-hoja-inferior.da-saliendo { animation: da-dialogo-sale var(--da-d-rapida) var(--da-c-entrada) both; }
.da-hoja-inferior > .da-dialogo-cuerpo { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; scroll-padding-block: var(--da-e-4); }
.da-hoja-inferior > .da-dialogo-pie { flex: none; border-top: var(--da-filete) solid var(--da-linea); padding-top: var(--da-e-4); }
.da-hoja-agarradera { display: none; }
/* Teléfono en vertical, o cualquier pantalla baja (teléfono en apaisado): hoja inferior. */
@media (max-width: 640px), (max-height: 500px) {
  .da-hoja-inferior {
    margin: auto auto var(--da-teclado, 0px); width: min(100vw, 600px); max-width: 100vw;
    max-height: calc(100dvh - var(--da-teclado, 0px) - max(var(--da-e-7), env(safe-area-inset-top)));
    border-radius: var(--da-r-4) var(--da-r-4) 0 0;
    translate: 0 var(--da-arrastre, 0px); transition: translate var(--da-d-base) var(--da-c-salida);
  }
  .da-hoja-inferior.da-arrastrando { transition: none; }
  :is(.da-hoja-inferior, .da-dialogo)[open] { animation: da-hoja-sube var(--da-m-suave-d) var(--da-m-suave) both; }
  :is(.da-hoja-inferior, .da-dialogo).da-saliendo { animation: da-hoja-baja var(--da-d-rapida) var(--da-c-entrada) both; }
  .da-hoja-agarradera { display: block; flex: none; position: relative; height: 22px; touch-action: none; cursor: grab; }
  .da-hoja-agarradera::before {
    content: ""; position: absolute; top: 9px; left: 50%; width: 36px; height: 5px; translate: -50% 0;
    border-radius: var(--da-r-lleno); background: var(--da-borde-campo);
  }
  .da-hoja-inferior > .da-dialogo-cabeza { padding-top: var(--da-e-1); touch-action: none; }
  :is(.da-hoja-inferior, .da-dialogo) > .da-dialogo-pie { padding-bottom: calc(var(--da-e-4) + env(safe-area-inset-bottom)); }
  :is(.da-hoja-inferior, .da-dialogo) > .da-dialogo-pie > .da-boton { flex: 1; justify-content: center; }
  :root[data-teclado] :is(.da-hoja-inferior, .da-dialogo) > .da-dialogo-pie { padding-bottom: var(--da-e-3); }
}
/* Poca altura y teclado abierto: la hoja se queda con lo justo para ver el campo. */
@media (max-height: 500px) {
  .da-hoja-agarradera { height: 14px; }
  .da-hoja-agarradera::before { top: 5px; }
  :root[data-teclado] .da-hoja-inferior > .da-dialogo-cabeza { padding-block: 0; }
  :root[data-teclado] .da-hoja-inferior > .da-dialogo-cabeza .da-versalitas { display: none; }
  :root[data-teclado] .da-hoja-inferior > .da-dialogo-pie { padding-top: var(--da-e-2); padding-bottom: var(--da-e-2); }
}
@keyframes da-hoja-sube { from { transform: translateY(100%); } }
@keyframes da-hoja-baja { to { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  :is(.da-hoja-inferior, .da-dialogo)[open] { animation: da-aparece var(--da-d-base) linear both; }
  :is(.da-hoja-inferior, .da-dialogo).da-saliendo { animation: da-desaparece var(--da-d-base) linear both; }
  .da-hoja-inferior { transition: none; }
}

/* ── Aviso en línea (no es un toast: se queda hasta que se resuelve) ─────── */
.da-aviso { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--da-e-3); align-items: start; padding: var(--da-e-4); border-radius: var(--da-r-3); background: var(--da-superficie); box-shadow: inset 3px 0 0 var(--da-tinta), var(--da-sombra-1); font-size: var(--da-t-30); line-height: 1.5; }
.da-aviso::before { content: ""; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--da-tinta); }
.da-aviso b { display: block; color: var(--da-tinta); font-size: var(--da-t-40); font-weight: 600; }
.da-aviso--exito { box-shadow: inset 3px 0 0 var(--da-exito), var(--da-sombra-1); }
.da-aviso--exito::before { background: var(--da-exito); }
.da-aviso--vigilar { box-shadow: inset 3px 0 0 var(--da-vigilar), var(--da-sombra-1); }
.da-aviso--vigilar::before { background: var(--da-vigilar); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 11px; }
.da-aviso--error { box-shadow: inset 3px 0 0 var(--da-error), var(--da-sombra-1); }
.da-aviso--error::before { background: var(--da-error); border-radius: 1px; }

/* ── Toasts (avisos que se van solos) ─────────────────────────────────────── */
/* Centrado con márgenes, no con translate: un translate haría de la pila el bloque contenedor de .da-toasts-fijos, que en
   el teléfono es fixed respecto a la ventana. */
.da-toasts { position: fixed; z-index: var(--da-z-toast); inset-inline: 0; margin-inline: auto; bottom: var(--da-e-6); display: grid; gap: var(--da-e-2); width: min(440px, calc(100vw - 32px)); }
/* Los fijos (<da-avisos> con fijo): en escritorio, al pie de la pila; vacío, no ocupa ni hueco de rejilla. */
.da-toasts-fijos { display: grid; gap: var(--da-e-2); }
.da-toasts-fijos:empty { display: none; }
.da-toast { display: flex; align-items: center; gap: var(--da-e-3); padding: var(--da-e-3) var(--da-e-3) var(--da-e-3) var(--da-e-4); border-radius: var(--da-r-3); background: var(--da-tinta); color: var(--da-invertido); box-shadow: var(--da-sombra-3); font-size: var(--da-t-30); animation: da-toast-entra var(--da-m-vivo-d) var(--da-m-vivo) both; }
.da-toast.da-saliendo { animation: da-toast-sale var(--da-d-rapida) var(--da-c-entrada) both; }
.da-toast p { flex: 1; }
.da-toast button { border: 0; background: transparent; color: var(--da-invertido); font-weight: 600; padding: 6px 10px; border-radius: var(--da-r-2); text-decoration: underline; text-underline-offset: 3px; }
.da-toast--error { box-shadow: inset 3px 0 0 var(--da-rojo-vivo), var(--da-sombra-3); }
@keyframes da-toast-entra { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
@keyframes da-toast-sale { to { opacity: 0; transform: translateY(8px); } }
@keyframes da-toast-baja { from { opacity: 0; transform: translateY(-16px) scale(0.98); } }
@keyframes da-toast-sube { to { opacity: 0; transform: translateY(-8px); } }

/* ── Vacío y error de pantalla ────────────────────────────────────────────── */
.da-vacio { display: grid; justify-items: center; gap: var(--da-e-3); padding: var(--da-e-9) var(--da-e-5); text-align: center; }
.da-vacio-figura { display: grid; grid-template-columns: repeat(5, 6px); gap: 6px; margin-bottom: var(--da-e-2); }
.da-vacio-figura i { width: 6px; height: 6px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px var(--da-borde-campo); }
.da-vacio-figura i:nth-child(3) { background: var(--da-tinta); box-shadow: none; }
.da-vacio p { max-width: 44ch; color: var(--da-texto-2); line-height: 1.55; }
.da-vacio .da-acciones { justify-content: center; margin-top: var(--da-e-2); }
.da-vacio--error .da-vacio-figura i:nth-child(3) { background: var(--da-error); border-radius: 1px; }

/* ── Acceso: entrar y darse de alta ──────────────────────────────────────────
   Una hoja centrada sobre el fondo de la marca. La identidad la pone el proveedor (OIDC); esta pantalla solo
   presenta, recoge lo mínimo y manda. .da-acceso es la página entera; .da-acceso-hoja, la tarjeta (sirve suelta). */
.da-acceso { display: grid; place-items: center; min-height: 100dvh; padding: var(--da-e-6) var(--da-margen); }
.da-acceso-hoja { width: min(100%, 420px); display: grid; gap: var(--da-e-5); padding: var(--da-e-7) var(--da-e-6); border-radius: var(--da-r-4); background: var(--da-superficie); box-shadow: var(--da-sombra-2); }
.da-acceso-hoja .da-logo { padding: 0; justify-self: start; }
.da-acceso-cabeza { display: grid; gap: var(--da-e-2); }
.da-acceso-cabeza p { color: var(--da-texto-2); line-height: 1.55; }
.da-acceso-hoja form { display: grid; gap: var(--da-e-4); }
.da-acceso-hoja form > .da-boton { width: 100%; justify-content: center; }
.da-acceso-separador { display: flex; align-items: center; gap: var(--da-e-3); font-size: var(--da-t-20); color: var(--da-texto-2); }
.da-acceso-separador::before, .da-acceso-separador::after { content: ""; flex: 1; height: var(--da-filete); background: var(--da-linea); }
.da-acceso-pie { font-size: var(--da-t-30); color: var(--da-texto-2); text-align: center; }
.da-acceso-pie a { color: var(--da-tinta); font-weight: 500; }
@media (max-width: 600px) { .da-acceso-hoja { padding: var(--da-e-6) var(--da-e-5); } }
/* Variantes de la hoja de acceso (beta): la marca con su insignia («Beta») a la derecha; ancha, para formularios largos
   como el alta del despacho; acciones-enlace centradas debajo. El recorrido dentro de la hoja no deja su margen de página. */
.da-acceso-marca { display: flex; align-items: center; justify-content: space-between; gap: var(--da-e-3); }
.da-acceso-marca .da-logo { padding: 0; }
.da-acceso-hoja--ancha { width: min(100%, 520px); }
.da-acceso-acciones { display: grid; justify-items: center; gap: var(--da-e-2); }
/* Los botones de la hoja, a todo lo ancho y del mismo tamaño: si no, la primaria («Entrar», corta) sale más pequeña que
   la secundaria («Tengo un código de invitación»). Los enlaces siguen centrados. */
.da-acceso-acciones > .da-boton { justify-self: stretch; }
.da-acceso-hoja .da-recorrido { margin: 0; }

/* ══ Buscador (Spotlight) ════════════════════════════════════════════════ */
.da-buscar { --ancho: min(640px, calc(100vw - 32px)); width: var(--ancho); max-width: none; max-height: none; padding: 0; margin: 14vh auto auto; border: 0; background: transparent; color: var(--da-texto); overflow: visible; }
.da-buscar::backdrop { background: var(--da-velo-modal); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.da-buscar[open] { animation: da-buscar-entra var(--da-m-vivo-d) var(--da-m-vivo) both; }
.da-buscar[open]::backdrop { animation: da-aparece var(--da-d-base) var(--da-c-salida) both; }
.da-buscar.da-saliendo { animation: da-buscar-sale var(--da-d-rapida) var(--da-c-entrada) both; }
@keyframes da-buscar-entra { from { opacity: 0; transform: translateY(-8px) scale(0.97); } }
@keyframes da-buscar-sale { to { opacity: 0; transform: scale(0.98); } }
.da-buscar-fondo { position: absolute; inset: 0; border-radius: var(--da-r-4); transform-origin: top; background: var(--da-vidrio); box-shadow: var(--da-sombra-3); backdrop-filter: saturate(1.6) blur(24px); -webkit-backdrop-filter: saturate(1.6) blur(24px); }
.da-buscar-caja { position: relative; }
.da-buscar-campo { display: flex; align-items: center; gap: var(--da-e-3); padding: 0 var(--da-e-4) 0 var(--da-e-5); height: 60px; border-bottom: var(--da-filete) solid var(--da-linea); }
.da-buscar-lupa svg { width: 20px; height: 20px; color: var(--da-texto-2); }
.da-buscar-entrada { position: relative; flex: 1; min-width: 0; }
.da-buscar-entrada input, .da-buscar-sombra { width: 100%; border: 0; padding: 0; background: transparent; outline: none; font: 400 1.25rem/1.4 var(--da-f-sans); letter-spacing: -0.005em; color: var(--da-tinta); }
.da-buscar-entrada input:focus-visible { outline: none; box-shadow: none; }
.da-buscar-entrada input::placeholder { color: var(--da-texto-2); }
.da-buscar-sombra { position: absolute; inset: 0; color: var(--da-texto-3); pointer-events: none; white-space: pre; overflow: hidden; }
.da-buscar-sombra-escrito { color: transparent; }
.da-buscar-interpretado { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--da-e-2); padding: var(--da-e-2) var(--da-e-5); border-bottom: var(--da-filete) solid var(--da-linea); font-size: var(--da-t-30); color: var(--da-tinta); }
.da-buscar-interpretado[hidden] { display: none; }
.da-buscar-interpretado .da-versalitas { color: var(--da-texto-2); }
.da-buscar-lista { max-height: min(420px, 56vh); overflow: auto; padding: var(--da-e-2); overscroll-behavior: contain; scroll-padding: var(--da-e-2); }
.da-buscar-grupo { padding: var(--da-e-3) var(--da-e-3) var(--da-e-1); }
.da-buscar-fila { display: flex; align-items: center; gap: var(--da-e-3); min-height: 48px; padding: var(--da-e-2) var(--da-e-3); border-radius: var(--da-r-3); cursor: pointer; animation: da-fila-entra var(--da-d-base) var(--da-c-salida) both; animation-delay: calc(var(--i, 0) * 14ms); }
@keyframes da-fila-entra { from { opacity: 0; transform: translateY(3px); } }
.da-buscar-fila[aria-selected="true"] { background: var(--da-tinta); color: var(--da-invertido); }
.da-buscar-fila[aria-selected="true"] :is(.da-meta, .da-buscar-glifo) { color: color-mix(in srgb, var(--da-invertido) 72%, transparent); }
.da-buscar-fila[aria-selected="true"] :is(.da-buscar-titulo, .da-estado) { color: var(--da-invertido); }
.da-buscar-fila[aria-selected="true"] .da-tecla { background: transparent; color: var(--da-invertido); border-color: color-mix(in srgb, var(--da-invertido) 40%, transparent); }
.da-buscar-fila[aria-selected="true"] .da-estado--falta::before { background: var(--da-invertido); }
.da-buscar-fila[aria-selected="true"] .da-estado--falta::after { background: var(--da-tinta); }
.da-buscar-glifo { color: var(--da-texto-2); }
.da-buscar-glifo svg { width: 20px; height: 20px; }
.da-buscar-texto { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.da-buscar-titulo { color: var(--da-tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.da-buscar-titulo mark { background: var(--da-marca-fondo); color: var(--da-marca-texto); font-weight: 600; border-radius: 2px; box-shadow: 0 0 0 1px var(--da-marca-fondo); }
.da-buscar-fila[aria-selected="true"] mark { background: transparent; color: inherit; box-shadow: none; text-decoration: underline 1.5px; text-underline-offset: 3px; }
.da-buscar-enter { opacity: 0; }
.da-buscar-fila[aria-selected="true"] .da-buscar-enter { opacity: 1; }
.da-buscar-fila--nuevo { border-top: var(--da-filete) dashed var(--da-linea-fuerte); border-radius: 0 0 var(--da-r-3) var(--da-r-3); margin-top: var(--da-e-1); }
.da-buscar-fila--nuevo[aria-selected="true"] { border-radius: var(--da-r-3); border-top-color: transparent; }
.da-buscar-vacio { padding: var(--da-e-5) var(--da-e-3) var(--da-e-2); }
.da-buscar-vacio .da-meta { margin-top: var(--da-e-1); font-size: var(--da-t-30); }
.da-buscar-pie { display: flex; gap: var(--da-e-5); padding: var(--da-e-3) var(--da-e-5); border-top: var(--da-filete) solid var(--da-linea); font-size: var(--da-t-20); color: var(--da-texto-2); }
.da-buscar-pie span { display: inline-flex; align-items: center; gap: 4px; }
.da-buscar-cancelar { display: none; }
/* Teléfono (o apaisado bajo): el buscador ocupa la pantalla entera, sin esquinas, con «Cancelar» en lugar de esc,
   y la lista llega hasta el teclado. */
@media (max-width: 640px), (max-height: 500px) {
  .da-buscar { --ancho: 100vw; width: 100vw; height: calc(100dvh - var(--da-teclado, 0px)); margin: 0; }
  .da-buscar-fondo { border-radius: 0; background: var(--da-superficie-opaca); } /* a pantalla completa no se ve la página detrás */
  .da-buscar-caja { display: flex; flex-direction: column; height: 100%; padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left); }
  .da-buscar-campo { flex: none; padding-right: var(--da-e-2); }
  .da-buscar-campo .da-tecla { display: none; }
  .da-buscar-cancelar {
    display: inline-flex; align-items: center; height: var(--da-toque); padding: 0 var(--da-e-3); border: 0; border-radius: var(--da-r-2);
    background: transparent; color: var(--da-tinta); font: 500 var(--da-t-40)/1 var(--da-f-sans);
  }
  .da-buscar-entrada input, .da-buscar-sombra { font-size: 1.0625rem; } /* ≥ 16 px: iOS no hace zoom al enfocar */
  .da-buscar-lista { flex: 1; max-height: none; padding-bottom: calc(var(--da-e-4) + env(safe-area-inset-bottom)); }
  .da-buscar-pie { display: none; }
}

/* ══ Navegación inferior · <da-nav-inferior> (teléfono) ═══════════════════════
   La barra de pestañas del teléfono: 4 o 5 destinos con icono y una palabra, y «Más» para el resto (una <da-hoja>).
   --da-barra-inferior dice cuánto ocupa la barra que haya (esta o el lateral convertido en barra) y es lo que
   reservan el contenido, los toasts y los botones fijos; con el teclado o un diálogo abiertos la barra se va y vale 0. */
:root {
  --da-barra-inferior-alto: calc(64px + env(safe-area-inset-bottom));
  /* hay (0/1) × no oculta (0/1) × alto: así la presencia y el ocultado no compiten por especificidad. */
  --da-barra-inferior: calc(var(--da-barra-hay, 0) * (1 - var(--da-barra-oculta, 0)) * var(--da-barra-inferior-alto));
}
.da-nav-inferior { display: none; }
/* Lista de enlaces de una hoja («Más» de la barra, menú de la cuenta en el teléfono): filas de 48 px. */
.da-lista-enlaces { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.da-lista-enlaces :is(a, button) {
  display: flex; align-items: center; gap: var(--da-e-3); width: 100%; min-height: 48px; padding: 0 var(--da-e-3);
  border: 0; border-radius: var(--da-r-3); background: transparent; color: var(--da-tinta); text-decoration: none;
  font: 400 var(--da-t-40)/1.3 var(--da-f-sans); text-align: left; cursor: pointer;
  transition: background-color var(--da-d-rapida) var(--da-c-estandar);
}
.da-lista-enlaces svg { flex: none; width: 20px; height: 20px; color: var(--da-texto-2); }
.da-lista-enlaces a::after { content: "›"; margin-left: auto; font-size: var(--da-t-60); line-height: 1; color: var(--da-texto-2); }
.da-lista-enlaces .da-contador { margin-left: auto; }
.da-lista-enlaces a:has(.da-contador)::after { margin-left: 0; }
.da-lista-enlaces :is(a, button):hover { background: var(--da-superficie-2); }
.da-lista-enlaces [aria-current="page"] { background: var(--da-superficie-2); font-weight: 600; box-shadow: inset 3px 0 0 var(--da-tinta); }
.da-lista-enlaces .da-peligro { color: var(--da-error); }
.da-lista-enlaces .da-peligro svg { color: currentColor; }
.da-lista-enlaces hr { border: 0; border-top: var(--da-filete) solid var(--da-linea); margin: var(--da-e-1) var(--da-e-3); }
@media (max-width: 900px) {
  :root:is(:has(da-nav-inferior), :has(.da-lateral)) { --da-barra-hay: 1; }
  :root:is([data-teclado], :has(dialog[open])) { --da-barra-oculta: 1; }
  :root:has(da-nav-inferior) .da-lateral { display: none; }
  /* El buscador sale de la barra: la cabecera se queda con la marca, los créditos y la cuenta. */
  :root:has(da-nav-inferior [data-abrir-buscar]) .da-disparador-buscar { display: none; }

  .da-nav-inferior {
    position: fixed; inset: auto 0 0 0; z-index: var(--da-z-cabecera);
    display: flex; justify-content: space-around; gap: 2px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--da-superficie) 90%, transparent);
    backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-top: var(--da-filete) solid var(--da-linea);
    transition: transform var(--da-d-base) var(--da-c-salida), visibility 0s;
  }
  :root:is([data-teclado], :has(dialog[open])) :is(.da-nav-inferior, .da-lateral) {
    transform: translateY(calc(100% + var(--da-e-4))); visibility: hidden;
    transition: transform var(--da-d-rapida) var(--da-c-entrada), visibility 0s var(--da-d-rapida);
  }
  .da-nav-inferior-item {
    position: relative; flex: 1 1 0; min-width: 0; max-width: 112px; height: 52px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    border: 0; border-radius: var(--da-r-2); padding: 0 2px; background: transparent;
    color: var(--da-texto-2); font: 500 var(--da-t-10)/1.1 var(--da-f-sans); text-decoration: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--da-d-rapida) var(--da-c-estandar), transform var(--da-d-micro) var(--da-c-estandar);
  }
  .da-nav-inferior-item > span:not(.da-contador) { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Pantallas estrechas: la etiqueta se estrecha (Archivo es variable en anchura) antes que recortarse. */
  @media (max-width: 380px) { .da-nav-inferior-item > span:not(.da-contador) { font-stretch: 80%; letter-spacing: -0.01em; } }
  /* El icono lleva su propia cápsula: en la pestaña actual se llena de tinta (estado activo claro sin depender del color). */
  .da-nav-inferior-item svg {
    width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: var(--da-r-lleno);
    transition: background-color var(--da-d-rapida) var(--da-c-estandar), color var(--da-d-rapida) var(--da-c-estandar);
  }
  .da-nav-inferior-item:active { transform: scale(0.96); }
  .da-nav-inferior-item:is([aria-current="page"], [data-actual]) { color: var(--da-tinta); font-weight: 600; }
  .da-nav-inferior-item:is([aria-current="page"], [data-actual]) svg { background: var(--da-tinta); color: var(--da-invertido); }
  .da-nav-inferior-item:focus-visible { outline: var(--da-filete-foco) solid var(--da-foco); outline-offset: -2px; }
  .da-nav-inferior-item .da-contador { position: absolute; top: 1px; left: calc(50% + 6px); margin: 0; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .da-nav-inferior, :root:is([data-teclado], :has(dialog[open])) :is(.da-nav-inferior, .da-lateral) { transition: none; }
}
/* Apaisado en el teléfono (poca altura): la barra se compacta a 48 px, con el icono y la etiqueta en una fila. */
@media (max-width: 900px) and (max-height: 500px) {
  :root { --da-barra-inferior-alto: calc(48px + env(safe-area-inset-bottom)); }
  .da-nav-inferior { padding-block: 4px calc(4px + env(safe-area-inset-bottom)); padding-inline: max(6px, env(safe-area-inset-left)) max(6px, env(safe-area-inset-right)); }
  .da-nav-inferior-item { height: 40px; flex-direction: row; gap: 6px; max-width: 160px; }
  .da-nav-inferior-item svg { padding: 3px 8px; }
  .da-nav-inferior-item .da-contador { position: static; margin-left: -2px; }
}

/* ══ Responsive ═════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
  .da-dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .da-dos-columnas > aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--da-e-4); }
  .da-dos-columnas > aside.da-pila > * + * { margin-top: 0; }
}
@media (max-width: 900px) {
  :root { --da-lateral: 0px; }
  .da-app { grid-template: "fase" auto "vista" auto "cab" var(--da-cabecera) "prin" 1fr / minmax(0, 1fr); }
  .da-cabecera { grid-template-columns: auto minmax(0, 1fr) auto; }
  .da-logo { padding: 0 var(--da-e-4); }
  .da-cabecera-centro { padding-left: 0; }
  .da-lateral {
    position: fixed; inset: auto 0 0 0; top: auto; z-index: var(--da-z-cabecera); height: auto;
    flex-direction: row; justify-content: center; padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--da-superficie) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: var(--da-filete) solid var(--da-linea);
  }
  .da-lateral > div { display: contents; }
  .da-lateral .da-versalitas, .da-lateral-pie, .da-nav-item.da-secundario, .da-nav-item .da-cuenta { display: none; }
  .da-nav-item { flex: 1; max-width: 140px; flex-direction: column; justify-content: center; gap: 2px; height: 52px; font-size: var(--da-t-10); padding: 0 4px; }
  .da-nav-largo { display: none; }
  .da-nav-corto { display: inline; }
  .da-nav-item .da-contador { position: absolute; top: 2px; right: calc(50% - 22px); margin: 0; }
  .da-principal { padding-bottom: calc(var(--da-barra-inferior) + var(--da-e-8)); }
  .da-app--sin-lateral .da-principal { padding-bottom: calc(var(--da-barra-inferior) + var(--da-e-10)); }
  /* Los toasts, siempre por encima de la barra y del teclado. */
  .da-toasts { bottom: calc(max(var(--da-barra-inferior), var(--da-teclado, 0px)) + var(--da-e-3)); }
}
@media (max-width: 640px) {
  .da-logo-palabra, .da-organizacion { display: none; } /* en teléfono, la organización se cambia desde el menú de la cuenta */
  /* En la hoja de acceso sí hay sitio, y es la primera vez que se ve la marca: el nombre se queda junto al glifo. */
  .da-acceso-hoja .da-logo-palabra { display: inline; }
  .da-disparador-buscar > span:first-of-type, .da-disparador-buscar .da-tecla { display: none; }
  .da-disparador-buscar { width: 36px; padding: 0; justify-content: center; }
  .da-titulo-expediente { font-size: var(--da-t-80); }
  .da-recorrido { margin-bottom: var(--da-e-7); }
  .da-paso { font-size: 0; padding-top: 20px; }
  .da-paso b { font-size: var(--da-t-20); font-weight: 500; color: var(--da-texto-2); }
  .da-paso--ahora b { color: var(--da-tinta); font-weight: 600; }
  .da-doc { grid-template-columns: 22px minmax(0, 1fr); padding: var(--da-e-4); }
  .da-doc > .da-estado, .da-doc-acciones { grid-column: 2; justify-self: start; }
  .da-acciones--pagina { width: 100%; }
  .da-acciones--pagina .da-boton--primario { flex: 1; }
  .da-buscar-fila .da-estado { display: none; }
  .da-tabla .da-ocultable { display: none; }
  .da-tabla td, .da-tabla th { padding-inline: var(--da-e-4); }
  .da-dato { grid-template-columns: minmax(0, 1fr); }
  .da-dato-acciones { grid-column: 1; grid-row: auto; }
}

/* ── Teléfono: formularios, tablas que se apilan y botones fijos ──────────────
   Campos a 16 px (iOS no hace zoom al enfocar) y con objetivo táctil de 44 px. */
@media (max-width: 640px) {
  .da-entrada, .da-selector, .da-area { font-size: 1rem; min-height: var(--da-toque); }

  /* .da-tabla--apilable: cada fila es una tarjeta. La primera celda (o el th de fila) es el título; las demás,
     «etiqueta: valor» con la etiqueta en data-etiqueta. Las filas de grupo (la sede) quedan como encabezado.
     La cabecera de la tabla sigue en el árbol para el lector de pantalla. */
  .da-tabla-caja:has(> .da-tabla--apilable) { overflow: visible; background: transparent; box-shadow: none; border-radius: 0; }
  .da-tabla--apilable, .da-tabla--apilable tbody { display: block; }
  .da-tabla--apilable caption:not(.da-solo-lector) { display: block; padding: 0 0 var(--da-e-3); }
  .da-tabla--apilable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .da-tabla--apilable tbody tr:not(.da-grupo) {
    display: grid; grid-template-columns: minmax(0, 1fr); margin-bottom: var(--da-e-3); padding: var(--da-e-2) var(--da-e-4);
    border-radius: var(--da-r-3); background: var(--da-superficie); box-shadow: var(--da-sombra-1);
  }
  .da-tabla--apilable tbody tr:not(.da-grupo):hover { background: var(--da-superficie); }
  .da-tabla--apilable tbody :is(td, th) { display: flex; justify-content: space-between; align-items: baseline; gap: var(--da-e-4); padding: var(--da-e-2) 0; border-bottom: 0; text-align: right; }
  .da-tabla--apilable tbody tr:not(.da-grupo) > :is(td, th) + :is(td, th) { border-top: var(--da-filete) solid var(--da-linea); }
  .da-tabla--apilable tbody tr:not(.da-grupo) > :first-child { display: block; text-align: left; font-size: var(--da-t-40); font-weight: 500; color: var(--da-tinta); }
  .da-tabla--apilable tbody td[data-etiqueta]::before {
    content: attr(data-etiqueta); flex: none; text-align: left;
    font-size: var(--da-t-10); font-weight: 600; letter-spacing: var(--da-tracking-versalitas); text-transform: uppercase; color: var(--da-texto-2);
  }
  .da-tabla--apilable .da-ocultable { display: flex; }
  .da-tabla--apilable tr.da-grupo { display: block; }
  .da-tabla--apilable tr.da-grupo th { display: block; padding: var(--da-e-5) 0 var(--da-e-2); background: transparent; text-align: left; font: 400 var(--da-t-60)/1.3 var(--da-f-serif); }

  /* .da-acciones--fijas: los botones del final de un formulario se quedan pegados abajo, encima de la barra.
     Con el teclado abierto vuelven a su sitio (al final del formulario) para no tapar ningún campo. */
  .da-acciones--fijas {
    --banda: var(--da-superficie-opaca); /* opaca: lo que pasa por debajo no se transparenta */
    position: sticky; bottom: var(--da-barra-inferior); z-index: 1; padding-block: var(--da-e-3);
    /* La banda llega de borde a borde de la pantalla aunque el formulario esté dentro de una tarjeta. */
    background: var(--banda); box-shadow: 0 0 0 100vmax var(--banda), 0 -1px 0 100vmax var(--da-linea); clip-path: inset(-1px -100vmax 0);
  }
  .da-acciones--fijas > .da-boton { flex: 1; justify-content: center; }
  :root[data-teclado] .da-acciones--fijas { position: static; background: none; box-shadow: none; clip-path: none; }
  :root:has(.da-acciones--fijas) { scroll-padding-bottom: calc(var(--da-barra-inferior) + 88px + var(--da-avisos-alto, 0px)); }
  /* Los toasts suben por encima de la banda de acciones fijas (salvo con el teclado, que la devuelve a su sitio). */
  :root:has(.da-acciones--fijas):not([data-teclado]) .da-toasts { bottom: calc(var(--da-barra-inferior) + 88px); }
  /* Los avisos fijos («sin conexión»), en el teléfono, arriba bajo la cabecera, como franja de estado: abajo taparían la
     banda de acciones cuando no está pegada (página corta) y el final de los formularios. Los normales siguen abajo.
     El contenido baja lo que miden los fijos (--da-avisos-alto, lo escribe <da-avisos>; un normal no lo cambia) y el
     scroll-padding de arriba lo cuenta; el de abajo vuelve a ser el de la barra y la banda. */
  /* --da-bandas-alto (lo escribe <da-avisos> con un fijo a la vista): las bandas de encima de la cabecera; sin ellas, 0. */
  .da-toasts-fijos { position: fixed; z-index: var(--da-z-toast); top: calc(var(--da-cabecera) + var(--da-bandas-alto, 0px) + var(--da-e-2)); inset-inline: 0; margin-inline: auto; width: min(440px, calc(100vw - 32px)); }
  .da-toasts-fijos > .da-toast { animation-name: da-toast-baja; }
  .da-toasts-fijos > .da-toast.da-saliendo { animation-name: da-toast-sube; }
  :root:has(.da-toasts-fijos > *) .da-principal { margin-block: var(--da-avisos-alto, 0px) 0; }
  :root:has(.da-toasts-fijos > *) {
    scroll-padding-top: calc(var(--da-cabecera) + var(--da-bandas-alto, 0px) + var(--da-e-2) + var(--da-avisos-alto, 0px));
    scroll-padding-bottom: calc(var(--da-barra-inferior) + var(--da-e-4));
  }
  :root:has(.da-toasts-fijos > *):has(.da-acciones--fijas) { scroll-padding-bottom: calc(var(--da-barra-inferior) + 88px); }
}

/* ── Formulario de documento · <da-formulario-documento> (oleada 2, O) ─────────────────────────────────────────── */
.da-form-doc-todo { display: grid; gap: var(--da-e-5); }
.da-form-doc-cabeza { display: grid; gap: var(--da-e-1); }
.da-form-doc-nombre { font: 400 var(--da-t-70) / 1.25 var(--da-f-serif); color: var(--da-tinta); text-wrap: balance; }
.da-form-doc-coste { display: flex; align-items: baseline; gap: var(--da-e-2); font-size: var(--da-t-30); color: var(--da-tinta); }
.da-form-doc-coste b { font-variant-numeric: tabular-nums; font-weight: 600; }
.da-form-doc-requisitos { border: 0; padding: 0; margin: 0; }
.da-form-doc-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--da-e-4); }
.da-form-doc-rejilla > [data-tipo="texto"] { grid-column: 1 / -1; }
.da-form-doc-casillas { display: flex; flex-wrap: wrap; gap: var(--da-e-2) var(--da-e-5); }
.da-form-doc-cuenta { font-variant-numeric: tabular-nums; white-space: nowrap; }
.da-form-doc-general.da-campo--error { display: block; }
.da-form-doc-pie { justify-content: flex-end; padding-top: var(--da-e-2); border-top: var(--da-filete) solid var(--da-linea); }
.da-form-doc[aria-busy] .da-form-doc-pie .da-boton--tinta { cursor: progress; }
fieldset.da-campo { border: 0; padding: 0; margin: 0; min-width: 0; }
.da-entrada-unidad { display: flex; align-items: center; gap: var(--da-e-2); color: var(--da-texto-2); font-size: var(--da-t-30); }
.da-entrada-unidad .da-entrada { flex: 1; min-width: 0; }
.da-entrada--corta { max-width: 18ch; }
.da-area--baja { min-height: 72px; }

/* ── Revisión de lo offline · <da-revision-offline> (oleada 2, O) ──────────────────────────────────────────────── */
.da-revision { display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: var(--da-e-5); align-items: start; }
.da-revision-lista { list-style: none; margin: 0; padding: var(--da-e-2); display: grid; gap: var(--da-e-1); border-radius: var(--da-r-4); background: var(--da-superficie); box-shadow: var(--da-sombra-1); }
.da-revision-item {
  all: unset; box-sizing: border-box; width: 100%; display: grid; gap: var(--da-e-1); padding: var(--da-e-3); border-radius: var(--da-r-3); cursor: pointer;
  transition: background-color var(--da-d-rapida) var(--da-c-estandar);
}
.da-revision-item:hover { background: var(--da-superficie-2); }
.da-revision-item[aria-current="true"] { background: var(--da-superficie-2); box-shadow: inset 3px 0 0 var(--da-tinta); }
.da-revision-item[aria-current="true"] .da-meta { color: var(--da-texto); }
.da-revision-item:focus-visible { outline: var(--da-filete-foco) solid var(--da-foco); outline-offset: 2px; }
.da-revision-item-titulo { font-size: var(--da-t-40); font-weight: 500; color: var(--da-tinta); }
.da-revision-archivo { overflow-wrap: anywhere; }
.da-revision-detalle { display: grid; gap: var(--da-e-5); padding: var(--da-e-6); border-radius: var(--da-r-4); background: var(--da-superficie); box-shadow: var(--da-sombra-1); min-width: 0; }
.da-revision-cabeza { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--da-e-3); }
.da-revision-cabeza h3:focus { outline: none; }
.da-revision-cabeza h3:focus-visible { outline: var(--da-filete-foco) solid var(--da-foco); outline-offset: 4px; }
.da-revision-visor { margin: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--da-e-4); align-items: start; }
.da-revision-visor figcaption { display: grid; gap: var(--da-e-2); justify-items: start; font-size: var(--da-t-30); color: var(--da-tinta); }
.da-revision-miniatura { width: 120px; aspect-ratio: 210 / 297; object-fit: cover; border-radius: var(--da-r-1); background: var(--da-superficie-2); box-shadow: var(--da-sombra-1); }
.da-revision-miniatura--sin { display: block; }
.da-revision-comprobaciones { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--da-e-2); font-size: var(--da-t-30); }
.da-revision-comprobaciones li { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--da-e-3); align-items: baseline; }
.da-revision-motivo-dado { font-size: var(--da-t-30); color: var(--da-texto); }
.da-revision-motivo { display: grid; gap: var(--da-e-3); }
.da-revision-motivo .da-acciones, .da-revision-acciones { justify-content: flex-end; }
@media (max-width: 900px) {
  .da-revision { grid-template-columns: minmax(0, 1fr); }
  .da-revision-detalle { padding: var(--da-e-4); }
  .da-revision-visor { grid-template-columns: 88px minmax(0, 1fr); }
  .da-revision-miniatura { width: 88px; }
}

/* ── Transiciones de vista (MOVIMIENTO.md §3) ───────────────────────────────────────────────────────────────────────
   Entre páginas del mismo origen (y con document.startViewTransition en una SPA): la cabecera y el lateral no se
   mueven; solo el contenido principal se funde y sube 8 px. Sin JS ni nada en línea. */
@view-transition { navigation: auto; }
.da-cabecera { view-transition-name: da-cabecera; }
.da-lateral { view-transition-name: da-lateral; }
.da-principal { view-transition-name: da-principal; }
::view-transition-group(da-cabecera), ::view-transition-group(da-lateral) { animation: none; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(da-principal) { animation: da-vista-sale var(--da-d-rapida) var(--da-c-entrada) both; }
::view-transition-new(da-principal) { animation: da-vista-entra var(--da-d-amplia) var(--da-c-salida) both; }
@keyframes da-vista-sale { to { opacity: 0; } }
@keyframes da-vista-entra { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(da-principal) { animation: da-aparece var(--da-d-base) linear both; }
  ::view-transition-old(da-principal) { animation: da-desaparece var(--da-d-base) linear both; }
}