/* Documentos.app · paquetes/ui · vidrio.css — material «cristal líquido»
   Va después de app.css y solo actúa con <html data-material="cristal">: sin el atributo, esta hoja no cambia nada.
   Los valores salen de tokens.css (bloque «Material cristal líquido»); la luz del puntero y la lente, de dist/luz.js.

   Cinco piezas:
   1. Fondo de luz: tres charcos quietos (amarillo de la marca, plata fría y papel) y la trama de puntos de la marca.
      No respira ni se mueve con el scroll (MOVIMIENTO.md §6).
   2. Filo especular: un borde de luz de 1 px, más fuerte arriba a la izquierda, en toda superficie de cristal.
   3. Luz del puntero: un halo bajo el contenido que sigue al ratón dentro de la superficie. Se mueve con transform;
      sin ratón o con movimiento reducido no aparece.
   4. Profundidad: hojas en el plano 1 (vidrio sin desenfoque), cabecera y lateral en el 2, capas flotantes en el 3
      (vidrio denso con desenfoque: la capa de refuerzo que mantiene el texto en AA).
   5. Lente: la refracción del borde en el buscador (solo Chromium; en los demás, desenfoque normal).
   6. El resto de piezas: las que ya pintan su propio ::before (avisos, filas que piden algo) llevan el filo como sombra
      interior; los controles pequeños, una media luna de luz. */

/* ── 1. Fondo de luz ───────────────────────────────────────────────────────── */
:root[data-material="cristal"] body::before,
:root[data-material="cristal"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--da-cristal-ambiente);
}
:root[data-material="cristal"] body::before {
  background:
    radial-gradient(62vmax 48vmax at 0% 0%, var(--da-cristal-amb-1), transparent 64%),
    radial-gradient(56vmax 52vmax at 100% 22%, var(--da-cristal-amb-2), transparent 66%),
    radial-gradient(64vmax 44vmax at 38% 108%, var(--da-cristal-amb-3), transparent 68%);
}
:root[data-material="cristal"] body::after {
  background: radial-gradient(circle, var(--da-cristal-punto) 1px, transparent 1.6px) 0 0 / 24px 24px;
  -webkit-mask: linear-gradient(160deg, black, transparent 72%);
  mask: linear-gradient(160deg, black, transparent 72%);
}

/* ── 2. Filo especular ─────────────────────────────────────────────────────── */
/* .da-cristal es la utilidad pública: filo + luz del puntero para cualquier superficie propia de una vista. */
/* Solo las que no traen ya su posición (el lateral es sticky; diálogo, menú y fondo del buscador, fixed o absolute). */
:root[data-material="cristal"] :is(.da-hoja, .da-tabla-caja, .da-tarjeta-doc, .da-sede, .da-revision-lista, .da-revision-detalle, .da-acceso-hoja, .da-cristal) { position: relative; }
:root[data-material="cristal"] :is(.da-hoja, .da-tabla-caja, .da-tarjeta-doc, .da-sede, .da-revision-lista, .da-revision-detalle, .da-acceso-hoja,
  .da-lateral, .da-nav-inferior, .da-dialogo, .da-hoja-lateral, .da-hoja-inferior, .da-buscar-fondo, .da-menu, .da-cristal)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(150deg, var(--da-cristal-filo), transparent 30%, transparent 66%, var(--da-cristal-filo-bajo));
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
}

/* ── 3. Luz del puntero ────────────────────────────────────────────────────── */
:root[data-material="cristal"] :is(.da-hoja, .da-tabla-caja, .da-tarjeta-doc:not(.da-completo), .da-sede, .da-revision-lista, .da-revision-detalle, .da-acceso-hoja, .da-cristal) {
  isolation: isolate; overflow: clip;
}
:root[data-material="cristal"] :is(.da-hoja, .da-tabla-caja, .da-tarjeta-doc:not(.da-completo), .da-sede, .da-revision-lista, .da-revision-detalle, .da-acceso-hoja, .da-cristal)::after {
  content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 420px; height: 420px; margin: -210px 0 0 -210px;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--da-cristal-luz), transparent);
  transform: translate(var(--da-luz-x, -999px), var(--da-luz-y, -999px));
  opacity: 0; transition: opacity var(--da-d-base) var(--da-c-estandar);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  :root[data-material="cristal"] :is(.da-hoja, .da-tabla-caja, .da-tarjeta-doc:not(.da-completo), .da-sede, .da-revision-lista, .da-revision-detalle, .da-acceso-hoja, .da-cristal):hover::after { opacity: 1; }
}

/* ── 4. Profundidad ────────────────────────────────────────────────────────── */
/* Plano 1: hojas. Vidrio sin desenfoque: debajo solo hay luz quieta, que el vidrio ya tiñe. */
:root[data-material="cristal"] :is(.da-hoja, .da-tabla-caja) { background: var(--da-superficie); box-shadow: var(--da-sombra-1); }
:root[data-material="cristal"] .da-tarjeta-doc { transition: transform var(--da-m-vivo-d) var(--da-m-vivo), box-shadow var(--da-d-rapida) var(--da-c-estandar); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-material="cristal"] .da-tarjeta-doc:hover { transform: translateY(-2px); box-shadow: var(--da-sombra-2); }
}
:root[data-material="cristal"] .da-tabla tr.da-grupo th { background: var(--da-superficie-2); }
:root[data-material="cristal"] .da-sede--revisar { box-shadow: inset 3px 0 0 var(--da-error), var(--da-sombra-1); }

/* Plano 2: cabecera y lateral. La cabecera sí desenfoca: el contenido pasa por debajo al hacer scroll. */
:root[data-material="cristal"] .da-cabecera {
  background: var(--da-cristal-barra); border-bottom-color: transparent;
  backdrop-filter: var(--da-cristal-desenfoque-alto); -webkit-backdrop-filter: var(--da-cristal-desenfoque-alto);
  box-shadow: inset 0 -1px 0 var(--da-cristal-filo-bajo), 0 1px 0 var(--da-linea), 0 10px 30px -24px var(--da-linea-fuerte);
}
@media (min-width: 901px) {
  :root[data-material="cristal"] .da-lateral {
    margin: var(--da-e-3) 0 var(--da-e-3) var(--da-e-3); top: calc(var(--da-cabecera) + var(--da-e-3));
    height: calc(100dvh - var(--da-cabecera) - 2 * var(--da-e-3)); padding: var(--da-e-4) var(--da-e-2);
    border-radius: var(--da-r-4); background: var(--da-cristal-barra); box-shadow: var(--da-sombra-1);
  }
  :root[data-material="cristal"] .da-principal { padding-left: calc(var(--da-margen) + var(--da-e-2)); }
}
:root[data-material="cristal"] .da-nav-item { border-radius: var(--da-r-lleno); transition: background-color var(--da-d-rapida) var(--da-c-estandar), transform var(--da-d-micro) var(--da-c-estandar); }
:root[data-material="cristal"] .da-nav-item:hover { background: var(--da-superficie); }
:root[data-material="cristal"] .da-nav-item:active { transform: scale(0.98); }
/* La sección actual: una gota de tinta con su brillo, no un rectángulo plano. */
:root[data-material="cristal"] .da-nav-item[aria-current="page"] {
  background: var(--da-tinta) linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 16%, transparent), transparent 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--da-invertido) 22%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--da-tinta) 70%, transparent);
}

/* Plano 3: capas flotantes. Vidrio denso + desenfoque alto: el texto siempre sobre ≥ 72 % de opacidad. */
:root[data-material="cristal"] :is(.da-dialogo, .da-hoja-lateral, .da-hoja-inferior, .da-menu) {
  background: var(--da-cristal-denso);
  backdrop-filter: var(--da-cristal-desenfoque-alto); -webkit-backdrop-filter: var(--da-cristal-desenfoque-alto);
}
:root[data-material="cristal"] :is(.da-dialogo, .da-hoja-lateral, .da-hoja-inferior, .da-buscar)::backdrop {
  backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%);
}
:root[data-material="cristal"] .da-buscar-fondo {
  backdrop-filter: var(--da-cristal-desenfoque-alto); -webkit-backdrop-filter: var(--da-cristal-desenfoque-alto);
}
:root[data-material="cristal"] .da-toast {
  background: var(--da-cristal-tinta);
  backdrop-filter: var(--da-cristal-desenfoque); -webkit-backdrop-filter: var(--da-cristal-desenfoque);
}
:root[data-material="cristal"] .da-buscar-fila[aria-selected="true"] {
  background: var(--da-tinta) linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 14%, transparent), transparent 70%);
}

/* ── Controles: cristal fino sobre el cristal ──────────────────────────────── */
:root[data-material="cristal"] .da-boton {
  border-color: var(--da-linea-fuerte); background-color: var(--da-superficie);
  box-shadow: inset 0 1px 0 var(--da-cristal-filo), 0 1px 2px var(--da-linea);
}
:root[data-material="cristal"] .da-boton:hover { background-color: var(--da-cristal-denso); }
:root[data-material="cristal"] :is(.da-boton--fantasma, .da-boton--fantasma:hover) { box-shadow: none; }
:root[data-material="cristal"] .da-boton--fantasma { background-color: transparent; border-color: transparent; }
:root[data-material="cristal"] .da-boton--fantasma:hover { background-color: var(--da-superficie); }
/* Tinta: vidrio negro con media luna de luz. */
:root[data-material="cristal"] .da-boton--tinta,
:root[data-material="cristal"] .da-boton--tinta:hover {
  border-color: var(--da-tinta); background-color: var(--da-tinta);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 20%, transparent), transparent 58%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--da-invertido) 26%, transparent), 0 8px 18px -10px color-mix(in srgb, var(--da-tinta) 75%, transparent);
}
/* Primaria: una gota del color de --da-primario (negro hoy: provisional del orquestador, 7-nov, pendiente de Luis; solo cambian los tokens). */
:root[data-material="cristal"] .da-boton--primario,
:root[data-material="cristal"] .da-boton--primario:hover {
  border-color: var(--da-primario-borde); background-color: var(--da-primario);
  background-image: linear-gradient(180deg, var(--da-cristal-brillo), transparent 56%);
  /* Sin halo del color: la gota tiene su brillo y una sombra neutra corta (menos llamativa, 6-nov). */
  box-shadow: inset 0 1px 0 var(--da-cristal-filo), inset 0 -2px 3px -1px color-mix(in srgb, var(--da-primario-borde) 14%, transparent),
    0 2px 6px -3px var(--da-linea-fuerte);
}
:root[data-material="cristal"] .da-boton--primario:hover { background-color: var(--da-primario-pulsado); }
:root[data-material="cristal"] .da-boton:disabled { box-shadow: none; }
/* aria-disabled (base.css): sin gota ni brillo de la variante; el mismo neutro. */
:root[data-material="cristal"] :is(.da-boton[aria-disabled="true"], .da-boton[aria-disabled="true"]:hover) {
  border-color: var(--da-linea); background-color: var(--da-superficie-2); background-image: none; box-shadow: none;
}
:root[data-material="cristal"] .da-boton[aria-disabled="true"]:focus-visible { box-shadow: 0 0 0 2px var(--da-foco-aire); }
:root[data-material="cristal"] :is(.da-entrada, .da-selector, .da-area) {
  background-color: var(--da-cristal-denso); box-shadow: inset 0 1px 2px var(--da-linea);
}
/* El botón del navegador en <input type="file" class="da-entrada">: el mismo cristal fino que .da-boton. */
:root[data-material="cristal"] .da-entrada[type="file"]::file-selector-button {
  border-color: var(--da-linea-fuerte); background-color: var(--da-superficie);
  box-shadow: inset 0 1px 0 var(--da-cristal-filo), 0 1px 2px var(--da-linea);
}
:root[data-material="cristal"] .da-entrada[type="file"]:hover::file-selector-button { background-color: var(--da-cristal-denso); }
:root[data-material="cristal"] .da-segmentado { box-shadow: inset 0 1px 2px var(--da-linea); }
:root[data-material="cristal"] .da-segmentado input:checked + span { background: var(--da-cristal-denso); }
:root[data-material="cristal"] .da-disparador-buscar {
  border-color: var(--da-linea-fuerte); background: var(--da-superficie);
  box-shadow: inset 0 1px 0 var(--da-cristal-filo), 0 1px 2px var(--da-linea);
}
:root[data-material="cristal"] .da-avatar {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 22%, transparent), transparent 60%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--da-invertido) 25%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--da-tinta) 70%, transparent);
}
:root[data-material="cristal"] .da-contador--foco { box-shadow: 0 0 0 2px var(--da-superficie-opaca); }

/* El sello de créditos (shadow DOM): cápsula de cristal y panel flotante del plano 3. */
:root[data-material="cristal"] da-creditos::part(boton) {
  border-color: var(--da-linea-fuerte); background-color: var(--da-superficie);
  box-shadow: inset 0 1px 0 var(--da-cristal-filo), 0 1px 2px var(--da-linea);
}
:root[data-material="cristal"] da-creditos::part(boton):hover { background-color: var(--da-cristal-denso); }
:root[data-material="cristal"] da-creditos::part(panel) {
  background: var(--da-cristal-denso); box-shadow: var(--da-sombra-3);
  backdrop-filter: var(--da-cristal-desenfoque-alto); -webkit-backdrop-filter: var(--da-cristal-desenfoque-alto);
}

/* ── 6. El resto de piezas ─────────────────────────────────────────────────── */
/* Avisos: su ::before es el punto de estado, así que el filo va como sombra interior, encima del canto de color. */
:root[data-material="cristal"] .da-aviso { box-shadow: inset 0 1px 0 var(--da-cristal-filo), var(--da-sombra-1); }
:root[data-material="cristal"] .da-aviso--exito { box-shadow: inset 0 1px 0 var(--da-cristal-filo), inset 3px 0 0 var(--da-exito), var(--da-sombra-1); }
:root[data-material="cristal"] .da-aviso--vigilar { box-shadow: inset 0 1px 0 var(--da-cristal-filo), inset 3px 0 0 var(--da-vigilar), var(--da-sombra-1); }
:root[data-material="cristal"] .da-aviso--error { box-shadow: inset 0 1px 0 var(--da-cristal-filo), inset 3px 0 0 var(--da-error), var(--da-sombra-1); }

/* Lista de documentos: la fila bajo el ratón se aclara como una gota; la que pide algo conserva su canto amarillo. */
:root[data-material="cristal"] .da-doc { transition: background-color var(--da-d-rapida) var(--da-c-estandar); }
@media (hover: hover) and (pointer: fine) {
  :root[data-material="cristal"] .da-doc:not(.da-doc--falta):hover { background-color: var(--da-superficie-2); }
}

/* Recorrido del expediente: el aro del paso actual deja ver el vidrio (en sólido es un anillo del color de la hoja). */
:root[data-material="cristal"] .da-paso--ahora::before { box-shadow: none; outline: 1px solid var(--da-tinta); outline-offset: 3px; }
:root[data-material="cristal"] .da-paso--hecho::before,
:root[data-material="cristal"] .da-linea-tiempo li:not(.da-error, .da-pendiente)::before {
  background-image: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--da-invertido) 45%, transparent), transparent 60%);
}

/* Revisión de lo offline: lista y detalle son hojas (filo + luz, arriba); el elemento elegido, una gota. */
:root[data-material="cristal"] .da-revision-item { transition: background-color var(--da-d-rapida) var(--da-c-estandar); }
:root[data-material="cristal"] .da-revision-item[aria-current="true"] {
  background-color: var(--da-cristal-denso); box-shadow: inset 3px 0 0 var(--da-tinta), inset 0 1px 0 var(--da-cristal-filo), 0 6px 16px -12px var(--da-linea-fuerte);
}
:root[data-material="cristal"] .da-revision-miniatura { box-shadow: var(--da-sombra-2); }

/* Subida: la zona es vidrio hundido; al arrastrar encima se aclara. Cada archivo, una lámina con su filo. */
:root[data-material="cristal"] .da-subida-zona { box-shadow: inset 0 1px 3px var(--da-linea); }
:root[data-material="cristal"] .da-subida-zona[data-encima] { background: var(--da-cristal-denso); box-shadow: inset 0 1px 0 var(--da-cristal-filo), var(--da-sombra-2); }
:root[data-material="cristal"] .da-subida-archivo { box-shadow: inset 0 1px 0 var(--da-cristal-filo), var(--da-sombra-1); }
:root[data-material="cristal"] .da-progreso { box-shadow: inset 0 1px 1px var(--da-linea); }

/* Controles pequeños: interruptor con bola opaca (sobre vidrio, una bola translúcida se pierde), insignias y la
   etiqueta llena con su media luna. */
:root[data-material="cristal"] .da-interruptor { box-shadow: inset 0 1px 2px var(--da-linea-fuerte); }
:root[data-material="cristal"] .da-interruptor::after {
  background-color: var(--da-superficie-opaca); background-image: linear-gradient(180deg, var(--da-cristal-brillo), transparent 70%);
  box-shadow: 0 1px 3px var(--da-linea-fuerte), inset 0 1px 0 var(--da-cristal-filo);
}
:root[data-material="cristal"] .da-interruptor:checked {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 18%, transparent), transparent 60%);
}
:root[data-material="cristal"] .da-contador--foco { background-image: linear-gradient(180deg, var(--da-cristal-brillo), transparent 60%); }
:root[data-material="cristal"] .da-insignia { box-shadow: inset 0 1px 0 var(--da-cristal-filo); }
:root[data-material="cristal"] .da-insignia--tinta { background-image: linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 18%, transparent), transparent 60%); box-shadow: none; }

/* Pestañas: la tinta del subrayado brilla un poco, como la gota de la navegación. */
:root[data-material="cristal"] .da-pestanas-lista { border-bottom-color: var(--da-linea-fuerte); }
:root[data-material="cristal"] .da-pestanas-tinta { box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--da-tinta) 45%, transparent); }

/* Vista admin: la banda «estás viendo como…» es una lámina de tinta con su brillo; el cambio de organización, una cápsula. */
:root[data-material="cristal"] .da-banda-vista {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 14%, transparent), transparent 70%);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--da-invertido) 12%, transparent);
}
:root[data-material="cristal"] .da-organizacion { border-radius: var(--da-r-lleno); }
:root[data-material="cristal"] .da-organizacion:hover { background: var(--da-superficie); box-shadow: inset 0 1px 0 var(--da-cristal-filo); }

/* Acceso (entrar y alta): la hoja flota en el plano 2 sobre el fondo de luz. */
:root[data-material="cristal"] .da-acceso-hoja { box-shadow: var(--da-sombra-3); }

/* Formulario de documento: el pie que separa las acciones es un filo de luz, no una raya. */
:root[data-material="cristal"] .da-form-doc-pie { border-top-color: var(--da-linea-fuerte); box-shadow: inset 0 1px 0 var(--da-cristal-filo); }

/* ── 5. Lente (luz.ts pone data-con-lente en <html> si el motor la admite, y --da-lente en cada elemento) ──
   La refracción vive en un canto de 12 px de vidrio claro; el texto empieza más adentro, sobre el vidrio denso. */
:root[data-material="cristal"][data-con-lente] :is(.da-buscar-fondo, [data-lente])[style*="--da-lente"] {
  border: 12px solid transparent;
  background: linear-gradient(var(--da-vidrio), var(--da-vidrio)) padding-box, linear-gradient(var(--da-cristal-canto), var(--da-cristal-canto)) border-box;
  backdrop-filter: var(--da-cristal-desenfoque-lente) var(--da-lente);
}
:root[data-material="cristal"][data-con-lente] :is(.da-buscar-fondo, [data-lente])[style*="--da-lente"]::before { inset: -12px; }
:root[data-material="cristal"][data-con-lente] .da-buscar::backdrop { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
/* A pantalla completa (teléfono) no hay canto que refractar: el buscador es opaco. */
@media (max-width: 640px), (max-height: 500px) {
  :root[data-material="cristal"][data-con-lente] .da-buscar-fondo[style*="--da-lente"] { border: 0; background: var(--da-superficie-opaca); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
.da-lente-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ── Teléfono: la barra inferior se vuelve una cápsula flotante ────────────── */
/* Cuánto reserva: la cápsula (64) + su aire hasta el borde (12) + el borde seguro. */
:root[data-material="cristal"] { --da-barra-inferior-alto: calc(76px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) and (max-height: 500px) {
  :root[data-material="cristal"] { --da-barra-inferior-alto: calc(58px + env(safe-area-inset-bottom)); }
}
@media (max-width: 900px) {
  :root[data-material="cristal"] :is(.da-lateral, .da-nav-inferior) {
    inset: auto var(--da-e-3) calc(var(--da-e-3) + env(safe-area-inset-bottom)) var(--da-e-3);
    padding: 6px; border: 0; border-radius: 30px; background: var(--da-cristal-barra); box-shadow: var(--da-sombra-3);
    backdrop-filter: var(--da-cristal-desenfoque-alto); -webkit-backdrop-filter: var(--da-cristal-desenfoque-alto);
  }
  :root[data-material="cristal"] .da-nav-item { border-radius: 24px; }
  :root[data-material="cristal"] .da-nav-inferior { justify-content: space-around; }
  :root[data-material="cristal"] .da-nav-inferior-item { border-radius: 24px; }
  /* La pestaña actual: la gota de tinta con su brillo, como en el lateral. */
  :root[data-material="cristal"] .da-nav-inferior-item:is([aria-current="page"], [data-actual]) svg {
    background: var(--da-tinta) linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 16%, transparent), transparent 60%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--da-invertido) 22%, transparent), 0 6px 14px -8px color-mix(in srgb, var(--da-tinta) 70%, transparent);
  }
  :root:is([data-teclado], :has(dialog[open]))[data-material="cristal"] :is(.da-lateral, .da-nav-inferior) { transform: translateY(calc(100% + 40px)); }
}
/* Teléfono: la tabla apilada no lleva caja (cada fila ya es una tarjeta de vidrio) ni banda de grupo; el buscador a
   pantalla completa es opaco y sin lente. */
@media (max-width: 640px) {
  :root[data-material="cristal"] .da-tabla-caja:has(> .da-tabla--apilable) { background: transparent; box-shadow: none; overflow: visible; isolation: auto; }
  :root[data-material="cristal"] .da-tabla-caja:has(> .da-tabla--apilable)::before,
  :root[data-material="cristal"] .da-tabla-caja:has(> .da-tabla--apilable)::after { display: none; }
  :root[data-material="cristal"] .da-tabla--apilable tr.da-grupo th { background: transparent; }
}
@media (max-width: 640px), (max-height: 500px) {
  :root[data-material="cristal"] .da-buscar-fondo { background: var(--da-superficie-opaca); backdrop-filter: none; -webkit-backdrop-filter: none; }
  :root[data-material="cristal"] .da-buscar-fondo::before { display: none; }
}
@media (max-width: 900px) and (max-height: 500px) {
  :root[data-material="cristal"] :is(.da-lateral, .da-nav-inferior) { padding: 4px; bottom: calc(var(--da-e-2) + env(safe-area-inset-bottom)); border-radius: 26px; }
}

/* ── Compuerta de la Torre: echada, vidrio negro (como .da-boton--tinta), y su botón de contorno invertido ── */
:root[data-material="cristal"] .da-hoja.da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--da-invertido) 12%, transparent), transparent 55%);
}
:root[data-material="cristal"] .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;
}
:root[data-material="cristal"] .da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) .da-boton:hover {
  background-color: color-mix(in srgb, var(--da-invertido) 14%, transparent);
}
:root[data-material="cristal"] .da-compuerta:is(.da-compuerta--parada, .da-compuerta--sin-leer) :is(.da-boton[aria-disabled="true"], .da-boton[aria-disabled="true"]:hover) {
  background-color: transparent; color: color-mix(in srgb, var(--da-invertido) 55%, transparent); border-color: color-mix(in srgb, var(--da-invertido) 35%, transparent);
}
:root[data-material="cristal"] .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); }