/* ══════════════════════════════════════════════════════════════════════════
   CoreFlow CRM · CRISTAL LÍQUIDO                               22-oct-2026

   Capa de acabado que se carga DESPUÉS de estilos.css, importar.css y
   correo.css. Trae al CRM propio el lenguaje de vidrio del CRM clínico
   (dps-crm, rama claude/crm-v2: public/css/cristal.css, estilos.css «VIDRIO»
   y app.css «CRISTAL: SOLO LO QUE FLOTA»), adaptado a la identidad de aquí:
   oscuro, dorado, Sora + DM Sans.

   Para apagarla basta quitar su <link> de index.html: no hay una sola clase
   nueva, solo cambia el aspecto de las que ya existen.

   REGLAS QUE SE TRAEN TAL CUAL DEL DPS-CRM
   1. NO MUEVE NADA. Ni padding, ni margin, ni width, ni font-size, ni
      border-width. Todo grosor extra va con `box-shadow: inset`, que se pinta
      y no ocupa (dps cristal.css, cabecera). Los radios sí cambian: no
      empujan a nadie.
   2. EL DESENFOQUE SOLO DONDE DETRÁS PASA ALGO: barra superior, barra
      inferior del móvil, menú lateral en el móvil, modales, cajón, Iris,
      avisos y el acceso. NUNCA en tarjetas, tablas, columnas ni filas (dps
      app.css «CRISTAL: SOLO LO QUE FLOTA»). Las tarjetas son vidrio por
      translucidez, filo de luz y sombra; detrás solo tienen la aurora quieta,
      así que desenfocarla no se vería y sí costaría en cada scroll.
   3. SIEMPRE CON RESPALDO SÓLIDO: el color opaco va fuera y el
      `backdrop-filter` dentro de un @supports (dps estilos.css «Sin
      backdrop-filter: superficies sólidas»).
   4. EL CRISTAL NO PUEDE COSTAR CONTRASTE. Medido, no supuesto (dps app.css
      «EL CRISTAL NO PUEDE COSTAR CONTRASTE» y cristal.css «EL GRIS MÁS
      FLOJO, MEDIDO»). Ver --faint más abajo.
   5. NADA DEPENDE SOLO DEL :hover: todo gesto tiene su gemelo en :active,
      que sí dispara con el dedo (dps cristal.css, decisión 3).

   LA AURORA NO SE MUEVE. En el dps-crm el estilo Vidrio la anima 38 s; aquí
   se queda quieta a propósito: con vidrio desenfocado encima, un fondo que se
   mueve obliga a recalcular el desenfoque en cada cuadro, y eso se nota en un
   portátil modesto. Quieta se ve igual en una captura y no cuesta nada.
   ══════════════════════════════════════════════════════════════════════════ */


/* ── Fichas de luz ─────────────────────────────────────────────────────────
   Prefijo --cr- para no pisar nada de estilos.css. Una sola luz cenital para
   toda la aplicación: arriba pega (filo), abajo cae la sombra (alturas).   */
:root {
  /* Vidrio: tres densidades. La del contenido, la de lo que flota y la de las
     barras fijas. */
  --cr-vidrio:       linear-gradient(160deg, rgba(26,32,44,.64), rgba(14,18,26,.58));
  --cr-vidrio-plano: rgba(18,23,33,.62);
  --cr-vidrio-alto:  rgba(16,21,30,.82);
  --cr-vidrio-barra: rgba(9,12,18,.70);
  --cr-solido:       #0E1219;          /* = --bg-2: el respaldo sin desenfoque */
  --cr-blur:         18px;             /* dps estilos.css --vd-blur */
  --cr-blur-alto:    24px;             /* dps estilos.css: modal y menús */

  /* Bordes de vidrio: más claros que --line para que el canto se lea. */
  --cr-borde:        rgba(255,255,255,.10);
  --cr-borde-oro:    rgba(201,169,110,.30);

  /* Filo especular (dps cristal.css --cr-filo, valores del tema oscuro). */
  --cr-filo:         inset 0 1px 0 rgba(255,255,255,.08);
  --cr-filo-fuerte:  inset 0 1px 0 rgba(255,255,255,.14);
  --cr-marco:        inset 0 0 0 1px rgba(255,255,255,.035);

  /* Tres alturas: sombra de CONTACTO + sombra DIFUSA (dps cristal.css, tema
     oscuro). Una sola se ve plana; las dos juntas levantan la caja. */
  --cr-alt-1: 0 1px 1px rgba(0,0,0,.45), 0 3px 8px -3px rgba(0,0,0,.55), 0 12px 24px -12px rgba(0,0,0,.65);
  --cr-alt-2: 0 1px 2px rgba(0,0,0,.50), 0 8px 18px -6px rgba(0,0,0,.65), 0 24px 44px -16px rgba(0,0,0,.75);
  --cr-alt-3: 0 2px 8px rgba(0,0,0,.55), 0 18px 38px -10px rgba(0,0,0,.75), 0 48px 80px -28px rgba(0,0,0,.85);

  /* Barniz: SOLO sobre superficies rellenas con letra que sobra de contraste
     (el dorado con letra casi negra). Abajo oscurece poco: medido, el texto
     #14100A sobre el dorado más oscuro queda en 5,8:1. */
  --cr-barniz: linear-gradient(180deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,0) 48%, rgba(0,0,0,.08) 100%);

  /* Brillo dorado para lo activo y lo destacado. */
  --cr-halo-oro: 0 0 0 1px rgba(201,169,110,.28), 0 14px 34px -14px rgba(201,169,110,.35);

  /* Movimiento: el pulsado se siente seco (dps cristal.css --cr-curva/--cr-pulso). */
  --cr-curva: cubic-bezier(.2,.9,.25,1);
  --cr-pulso: .985;

  /* ── El gris más flojo, medido ──────────────────────────────────────────
     --faint era el 42 % de la tinta. Sobre el papel sólido daba 3,7:1 y sobre
     una fila resaltada 3,4:1: por debajo de AA ANTES del vidrio. Al 58 %:
       papel sólido 6,1 · vidrio en su peor punto (aurora dorada + reflejo)
       5,3 · fila al pasar 5,0 · modal 5,9.   Todas ≥ 4,5:1.
     --tenue (marcadores de posición y el atajo «/») sube al 48 %, que sobre
     un campo da ~4,3:1: es una pista, no un dato, pero ya se lee.         */
  --faint: rgba(243,240,234,.58);
  --tenue: rgba(243,240,234,.48);
}


/* ══ LA AURORA ═════════════════════════════════════════════════════════════
   estilos.css ya pinta dos manchas suaves en body::before. Se cambian por la
   aurora de tres focos del estilo Vidrio del dps-crm (estilos.css,
   «La aurora»), en los colores de la casa: dorado, azul y violeta. Es lo que
   da algo detrás para que el vidrio se lea como vidrio.                     */
body::before {
  inset: -25%;
  background:
    radial-gradient(38% 34% at 22% 24%, rgba(201,169,110,.16), transparent 70%),
    radial-gradient(36% 32% at 80% 20%, rgba(91,155,255,.10), transparent 70%),
    radial-gradient(40% 36% at 62% 80%, rgba(167,139,250,.10), transparent 72%);
}


/* ══ FOCO ══════════════════════════════════════════════════════════════════
   Hoy los botones y enlaces no tienen anillo propio. `outline` no ocupa
   sitio: no mueve nada (dps cristal.css «FOCO»). */
:where(button, a, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}


/* ══ LA CÁSCARA ════════════════════════════════════════════════════════════ */

/* Barra superior: ya era translúcida y desenfocada. Respaldo opaco primero;
   el vidrio, solo si el navegador lo tiene. La sombra corta hace que el
   contenido se meta POR DEBAJO al hacer scroll (dps cristal.css, header). */
.cima {
  background: rgba(8,11,16,.96);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-bottom-color: var(--cr-borde);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.02), 0 10px 20px -18px rgba(0,0,0,.9);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cima {
    background: var(--cr-vidrio-barra);
    backdrop-filter: blur(var(--cr-blur)) saturate(1.4);
    -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.4);
  }
}

/* Menú lateral: plano por delante del contenido, con el filo de luz fino en
   el canto derecho (dps app.css nav.lateral) y su caída de sombra (dps
   cristal.css nav.lateral). Translúcido sobre la aurora; sin desenfoque en
   escritorio porque detrás no pasa nada. */
.lateral {
  background: linear-gradient(180deg, rgba(14,18,25,.80), rgba(10,13,18,.86));
  border-right-color: var(--cr-borde);
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04), 10px 0 24px -20px rgba(0,0,0,.8);
}
.menu .it.on {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(201,169,110,.16);
}
.menu .it:active:not(.on) { background: rgba(255,255,255,.07); }
.lateral .marca i { box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 0 14px rgba(201,169,110,.25); }
.avatar { box-shadow: var(--cr-filo-fuerte), 0 2px 6px -2px rgba(0,0,0,.6); }

/* Buscador de la barra: campo hundido en el vidrio. */
.buscar input { box-shadow: inset 0 1px 2px rgba(0,0,0,.35), inset 0 -1px 0 rgba(255,255,255,.03); }
.buscar kbd { box-shadow: inset 0 -1px 0 rgba(255,255,255,.06); }


/* ══ TARJETAS Y KPI ════════════════════════════════════════════════════════
   Vidrio por translucidez, sin desenfoque (regla 2). Radio 14 → 18 como las
   tarjetas del estilo Vidrio (dps estilos.css). Filo de luz arriba, marco
   interior de 1 px y altura 1 (dps cristal.css .tarjeta/.kpi). */
.tarjeta {
  background: var(--cr-vidrio);
  border-color: var(--cr-borde);
  border-radius: 18px;
  box-shadow: var(--cr-filo), var(--cr-marco), var(--cr-alt-1);
}
/* El reflejo que ya existía, un poco más vivo y con la curva del cristal. */
.tarjeta::after {
  background:
    linear-gradient(120deg, rgba(255,255,255,.055), transparent 38%),
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.03), transparent 60%);
}
.tarjeta .cab { border-bottom-color: rgba(255,255,255,.06); }

/* KPI: al pasar, además de subir (eso ya lo hacía), se enciende el filo
   (dps estilos.css «Hover: además de subir, se enciende el filo»). */
@media (hover: hover) and (pointer: fine) {
  .kpi:hover, .cli:hover {
    box-shadow: var(--cr-filo-fuerte), 0 0 0 1px rgba(201,169,110,.30), var(--cr-alt-2);
  }
}
.kpi.clic:active, .cli:active { transform: scale(var(--cr-pulso)); transition-duration: 60ms; }

/* KPI destacado (.oro): vidrio teñido de dorado, como el primer indicador
   lleno del estilo Vidrio (dps estilos.css .kpi.destaca), pero sin pintarlo
   entero: sobre un dorado lleno la tinta clara no llegaría a AA. Dentro, el
   gris flojo sube un escalón: sobre el tinte dorado el 58 % daba 4,25:1, el
   68 % da 5,2:1. */
.kpi.oro {
  --faint: rgba(243,240,234,.68);
  background:
    linear-gradient(135deg, rgba(201,169,110,.20), rgba(201,169,110,.05) 70%),
    var(--cr-vidrio);
  border-color: var(--cr-borde-oro);
  box-shadow: var(--cr-filo-fuerte), var(--cr-halo-oro), var(--cr-alt-1);
}


/* ══ BOTONES ═══════════════════════════════════════════════════════════════
   La jerarquía no se toca: normal / oro / verde / rojo / fantasma siguen
   siendo lo que eran. Cambia cómo se sienten (dps cristal.css «BOTONES»). */
.btn {
  background-image: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  box-shadow: var(--cr-filo), var(--cr-alt-1);
}
.btn:hover {
  background-image: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
  box-shadow: var(--cr-filo), 0 0 0 1px rgba(201,169,110,.16), var(--cr-alt-2);
}

/* El dorado es la única superficie rellena con letra oscura: aquí sí va el
   barniz, encima de su degradado (dps cristal.css «SUPERFICIES NEGRAS: aquí
   sí va el barniz», con la misma razón: le sobra contraste). El :hover de
   estilos.css redeclara `background:` en atajo y borraría el barniz; por eso
   se repite aquí con su propio degradado (dps cristal.css, «LOS :hover QUE
   VUELVEN A DECLARAR background»). */
.btn.oro {
  background: var(--cr-barniz), linear-gradient(140deg, var(--gold-hi), var(--gold) 55%, #B8935A);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12), 0 6px 18px rgba(201,169,110,.22), var(--cr-alt-1);
}
.btn.oro:hover {
  background: var(--cr-barniz), linear-gradient(140deg, #fff3d8, var(--gold-hi) 55%, var(--gold));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 24px rgba(201,169,110,.35), var(--cr-alt-2);
}
.btn.verde, .btn.rojo { box-shadow: var(--cr-filo), var(--cr-alt-1); }

/* El fantasma es terciario: plano en reposo y al pasar, como estaba. */
.btn.fantasma, .btn.fantasma:hover { box-shadow: none; background-image: none; }

/* PULSADO: el único gesto que llega en tablet y móvil. `transform` no ocupa
   sitio; es un 1,5 % durante el instante del clic (dps cristal.css). */
.btn:active {
  transform: scale(var(--cr-pulso));
  box-shadow: var(--cr-filo), 0 1px 2px rgba(0,0,0,.4);
  transition-duration: 60ms;
}
.btn.fantasma:active { box-shadow: none; }

/* Deshabilitado: plano y sin gesto; con sombra parecería pulsable. */
.btn:disabled, .btn:disabled:hover, .btn:disabled:active {
  box-shadow: none; transform: none;
}


/* ══ CHIPS, SEGMENTOS, ETIQUETAS ═══════════════════════════════════════════ */
.chip {
  background-image: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
  box-shadow: var(--cr-filo);
  transition: all .18s, transform 60ms var(--cr-curva);
}
.chip:hover { box-shadow: var(--cr-filo), var(--cr-alt-1); }
.chip.on { box-shadow: var(--cr-filo-fuerte), 0 0 0 1px rgba(201,169,110,.12), var(--cr-alt-1); }
.chip:active { transform: scale(var(--cr-pulso)); box-shadow: none; }

/* Segmentos: el carril hundido y la opción elegida levantada, como un
   control de vidrio de verdad. */
.segm {
  background: rgba(0,0,0,.22);
  border-color: var(--cr-borde);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.45), inset 0 -1px 0 rgba(255,255,255,.03);
}
.segm button { transition: background .2s var(--cr-curva), color .2s, box-shadow .2s; }
.segm button:hover:not(.on) { color: var(--ink); background: rgba(255,255,255,.04); }
.segm button.on {
  background: linear-gradient(180deg, rgba(201,169,110,.26), rgba(201,169,110,.12));
  box-shadow: var(--cr-filo-fuerte), 0 0 0 1px rgba(201,169,110,.22), 0 2px 8px -2px rgba(0,0,0,.6);
}
.segm button:active { background: rgba(255,255,255,.07); }

/* Etiquetas y pastillas: un filo de luz de 1 px y nada más; hay decenas por
   pantalla (dps cristal.css .pastilla). */
.etq, .tag { box-shadow: var(--cr-filo); }
.punto { box-shadow: 0 0 8px var(--c, var(--gold)), inset 0 1px 0 rgba(255,255,255,.35); }


/* ══ FILAS Y TABLAS ════════════════════════════════════════════════════════ */

/* La fila pulsable tiene :hover; aquí, el mismo aviso al PULSAR (dps
   cristal.css «LISTAS Y DESPLEGABLES: respuesta al dedo»). */
.fila:active, tbody tr:active, .tarea:active { background: rgba(201,169,110,.08); }

/* La tabla: vidrio sin desenfoque (regla 2), con el radio de las tarjetas. */
.tabla-env {
  background: var(--cr-vidrio-plano);
  border-color: var(--cr-borde);
  border-radius: 18px;
  box-shadow: var(--cr-filo), var(--cr-marco), var(--cr-alt-1);
}
/* Cabecera pegajosa: las filas se meten POR DEBAJO en vez de desaparecer
   detrás de una línea (dps cristal.css table.datos th). */
th { background: rgba(14,18,25,.97); box-shadow: 0 8px 12px -12px rgba(0,0,0,.9); }

/* Filas de icono: la cajita del icono, un poco de vidrio. */
.fila .ico, .act .pto, .tarea .tipo-t { box-shadow: var(--cr-filo); }


/* ══ TABLERO (kanban) Y SEMANA ═════════════════════════════════════════════
   Columnas: vidrio translúcido sin desenfoque. Tarjetas del tablero: filo y
   altura 1 — son muchas, nada de capas caras (dps estilos.css: «nunca en las
   tarjetas de una lista larga»). */
.col {
  background: var(--cr-vidrio-plano);
  border-color: var(--cr-borde);
  border-radius: 18px;
  box-shadow: var(--cr-filo), var(--cr-alt-1);
}
.col.drop { box-shadow: var(--cr-filo), 0 0 0 3px color-mix(in srgb, var(--c) 25%, transparent), var(--cr-alt-2); }
.card {
  background: linear-gradient(160deg, rgba(30,37,50,.86), rgba(18,23,33,.86));
  border-radius: 12px;
  box-shadow: var(--cr-filo), var(--cr-alt-1);
}
.card:hover { box-shadow: var(--cr-filo), 0 8px 20px rgba(0,0,0,.3); }
.card:active { box-shadow: var(--cr-filo), 0 1px 2px rgba(0,0,0,.4); }

.embudo-mini button { box-shadow: var(--cr-filo); background-color: rgba(255,255,255,.02); }
.embudo-mini button:active { transform: scale(var(--cr-pulso)); transition-duration: 60ms; }

.dia-col {
  background: var(--cr-vidrio-plano);
  border-color: var(--cr-borde);
  border-radius: 18px;
  box-shadow: var(--cr-filo), var(--cr-alt-1);
}
.dia-col.hoy {
  border-color: var(--gold);
  box-shadow: var(--cr-filo-fuerte), 0 0 0 3px rgba(201,169,110,.12), 0 0 26px -8px rgba(201,169,110,.35), var(--cr-alt-1);
}
.dia-col h4 { border-bottom-color: rgba(255,255,255,.06); }
.mini-t { box-shadow: var(--cr-filo); }
.mini-t:active { background: color-mix(in srgb, var(--c, var(--gold)) 12%, transparent); }


/* ══ FICHA (cajón), SECCIONES, CAMPOS ══════════════════════════════════════ */

/* El velo: más desenfoque y una pizca de saturación (dps app.css .velo 6px;
   dps cristal.css .velo saturate). Solo existe con algo abierto. */
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #velo, .modal {
    backdrop-filter: blur(6px) saturate(1.15);
    -webkit-backdrop-filter: blur(6px) saturate(1.15);
  }
}

/* El cajón flota: respaldo opaco, vidrio alto si se puede. */
.cajon {
  border-left-color: var(--cr-borde-oro);
  box-shadow: inset 1px 0 0 rgba(255,255,255,.05), -20px 0 60px rgba(0,0,0,.5);
}
.cajon .pie { box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .cajon {
    background: var(--cr-vidrio-alto);
    backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.5);
  }
  .cajon .pie { background: rgba(14,18,25,.72); }
}
.cajon .top .x { box-shadow: var(--cr-filo); }

/* Secciones fijas y plegables: superficies hundidas dentro del vidrio. */
.sec-fija, details.pleg {
  border-color: rgba(255,255,255,.08);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.03);
}
.contacto-grande { box-shadow: var(--cr-filo-fuerte), var(--cr-alt-1); }
.ac, .plant, .reg, .pasos button { box-shadow: var(--cr-filo); }
.ac:active, .plant:active, .reg:active { transform: scale(var(--cr-pulso)); transition-duration: 60ms; }
.pasos button.on { box-shadow: var(--cr-filo-fuerte), 0 0 14px color-mix(in srgb, var(--c) 60%, transparent); }

/* Campos: hundidos en el vidrio; al enfocar, el anillo dorado de siempre más
   un halo exterior que se lee a un metro (dps cristal.css «Campos»).
   `:where()` deja el peso en (0,0,1), así `.rapida input` sigue mandando. */
input:where(:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"])),
select, textarea {
  box-shadow: inset 0 1px 2px rgba(0,0,0,.30);
}
input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,169,110,.16), 0 0 0 7px rgba(201,169,110,.05);
}


/* ══ PROGRESO ══════════════════════════════════════════════════════════════
   Carril hundido y relleno con brillo (dps cristal.css .pista-b .relleno). */
.barra { box-shadow: inset 0 1px 2px rgba(0,0,0,.45); }
.barra > div {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.12) 100%),
    linear-gradient(90deg, var(--gold), var(--gold-hi));
}
.barra.verde > div {
  background:
    linear-gradient(180deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.12) 100%),
    linear-gradient(90deg, var(--emerald), var(--green));
}


/* ══ MODAL ═════════════════════════════════════════════════════════════════
   Lo más alto que hay en pantalla y tiene que parecerlo (dps cristal.css
   .modal, altura 3; dps estilos.css .modal en Vidrio: blur 24 y saturate
   1.6). El radio sube de 18 a 22. */
.modal .caja {
  border-radius: 22px;
  box-shadow: var(--cr-filo-fuerte), var(--cr-marco), var(--cr-alt-3);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .modal .caja {
    background: var(--cr-vidrio-alto);
    backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.6);
    -webkit-backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.6);
  }
}
.modal h3, .modal .pie { border-color: rgba(255,255,255,.06); }


/* ══ AVISOS (toasts) ═══════════════════════════════════════════════════════
   Caen encima de todo: filo fuerte y la sombra más alta (dps cristal.css
   .aviso). */
.toast { border-color: var(--cr-borde); box-shadow: var(--cr-filo-fuerte), var(--cr-alt-3); }
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .toast {
    background: rgba(27,34,49,.82);
    backdrop-filter: blur(var(--cr-blur)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.5);
  }
}


/* ══ IRIS ══════════════════════════════════════════════════════════════════ */
#iris { box-shadow: inset 1px 0 0 rgba(255,255,255,.05), -20px 0 60px rgba(0,0,0,.5); }
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #iris {
    background: linear-gradient(180deg, rgba(15,19,27,.84), rgba(10,13,18,.90));
    backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.5);
  }
}
/* Las burbujas: objetos pequeños y redondeados, donde el cristal se lee
   mejor (dps cristal.css .cv-globo). */
.msg { box-shadow: var(--cr-filo), var(--cr-alt-1); }
.msg.iris.pensando { box-shadow: none; }
.propuesta { box-shadow: var(--cr-filo), var(--cr-alt-1); }
#iris .sug button { box-shadow: var(--cr-filo); }
#iris .sug button:active { background: rgba(201,169,110,.08); }
/* El botón flotante: una gota de cristal dorado con su reflejo. */
#irisFlot {
  box-shadow: inset 0 2px 1px rgba(255,255,255,.55), inset 0 -8px 14px rgba(0,0,0,.22),
              0 0 24px rgba(201,169,110,.55), 0 10px 30px rgba(0,0,0,.5);
}
#irisFlot:active { transform: scale(.94); }


/* ══ ACCESO ════════════════════════════════════════════════════════════════
   La caja del login ya usaba blur sin @supports. Respaldo opaco primero,
   vidrio alto si se puede, filo fuerte y altura 3. */
#login .caja {
  background: linear-gradient(160deg, rgba(20,26,36,.97), rgba(14,18,25,.98));
  backdrop-filter: none; -webkit-backdrop-filter: none;
  border-radius: 24px;
  box-shadow: var(--cr-filo-fuerte), var(--cr-marco), var(--cr-alt-3);
}
@supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  #login .caja {
    background: linear-gradient(160deg, rgba(24,30,42,.72), rgba(14,18,25,.80));
    backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.5);
    -webkit-backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.5);
  }
}
#login input { box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
#login input:focus { box-shadow: 0 0 0 3px rgba(201,169,110,.16), 0 0 0 7px rgba(201,169,110,.05); }
#login button {
  background: var(--cr-barniz), linear-gradient(140deg, var(--gold-hi), var(--gold) 50%, #B8935A);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.12), 0 8px 22px -6px rgba(201,169,110,.45);
  transition: transform 60ms var(--cr-curva), box-shadow .2s;
}
#login button:active { transform: scale(var(--cr-pulso)); }


/* ══ IMPORTADOR Y CORREO (sus hojas propias) ═══════════════════════════════
   Solo el acabado: filo de luz y radio de tarjeta; los colores y medidas
   siguen siendo los de importar.css y correo.css. */
#v-importar .imp-card {
  background: var(--cr-vidrio);
  border-color: var(--cr-borde);
  border-radius: 18px;
  box-shadow: var(--cr-filo), var(--cr-marco), var(--cr-alt-1);
}
.cor-btn { box-shadow: var(--cr-filo); }
.cor-btn.oro { background: var(--cr-barniz), linear-gradient(180deg, var(--gold), #B0904F); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
.cor-btn:active { transform: scale(var(--cr-pulso)); }
.cor-modal { box-shadow: var(--cr-filo-fuerte), var(--cr-alt-3); }


/* ══ MÓVIL ═════════════════════════════════════════════════════════════════
   Menos desenfoque (cuesta caro en un teléfono modesto; dps estilos.css
   «Celular: menos desenfoque»). El menú lateral pasa a ser un cajón que flota
   sobre el contenido: ahí sí desenfoca. */
@media (max-width: 900px) {
  :root { --cr-blur: 10px; --cr-blur-alto: 16px; }

  .lateral {
    background: linear-gradient(180deg, rgba(14,18,25,.97), rgba(10,13,18,.98));
    box-shadow: inset -1px 0 0 rgba(255,255,255,.04), 20px 0 60px rgba(0,0,0,.5);
  }
  .inferior { background: rgba(8,11,16,.96); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 -10px 24px -18px rgba(0,0,0,.9); }
  .inferior button:active { background: rgba(255,255,255,.06); }

  @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .lateral {
      background: linear-gradient(180deg, rgba(14,18,25,.86), rgba(10,13,18,.90));
      backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.4);
      -webkit-backdrop-filter: blur(var(--cr-blur-alto)) saturate(1.4);
    }
    .inferior {
      background: var(--cr-vidrio-barra);
      backdrop-filter: blur(var(--cr-blur)) saturate(1.4);
      -webkit-backdrop-filter: blur(var(--cr-blur)) saturate(1.4);
    }
    /* Iris ocupa toda la pantalla en el móvil: casi opaco para que no se lea
       el contenido a través. */
    #iris { background: linear-gradient(180deg, rgba(15,19,27,.96), rgba(10,13,18,.98)); }
  }
}
/* La hoja del modal en el teléfono es opaca: debajo hay texto de la página
   que se leería a través (dps estilos.css, «La ventana flotante del celular
   necesita fondo opaco»). */
@media (max-width: 520px) {
  .modal .caja { border-radius: 22px 22px 0 0; }
  @supports ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
    .modal .caja { background: var(--bg-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
  }
}


/* ══ MOVIMIENTO REDUCIDO ═══════════════════════════════════════════════════
   estilos.css ya apaga animaciones y transiciones. Esta hoja añade
   `transform` en :active, y estilos.css sube algunas cajas al pasar; con
   movimiento reducido no se mueve ninguna (dps cristal.css «MOVIMIENTO
   REDUCIDO»). Sombras, filos y barnices se quedan: son luz, no movimiento. */
@media (prefers-reduced-motion: reduce) {
  .btn:hover, .btn:active, .chip:active, .kpi:hover, .kpi.clic:active,
  .cli:hover, .cli:active, .card:hover, .ac:hover, .ac:active, .plant:active,
  .reg:active, .embudo-mini button:active, .cor-btn:active,
  #irisFlot, #irisFlot:hover, #irisFlot:active, #login button:active { transform: none !important; }
}


/* ══ TRANSPARENCIA REDUCIDA ════════════════════════════════════════════════
   Quien pide menos transparencia al sistema recibe papel opaco: mismas
   formas, mismos filos y sombras, sin vidrio ni desenfoque. */
@media (prefers-reduced-transparency: reduce) {
  body::before { opacity: .4; }
  .cima, .inferior, .lateral, .cajon, #iris, .toast, .modal .caja, #login .caja,
  #velo, .modal {
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .cima, .inferior { background: rgba(8,11,16,.98) !important; }
  .lateral { background: #0C1016 !important; }
  .cajon, .modal .caja, #login .caja, #iris { background: var(--bg-2) !important; }
  .toast { background: var(--bg-4) !important; }
  .tarjeta, .tabla-env, .col, .dia-col, #v-importar .imp-card { background: var(--bg-2); }
  .kpi.oro { background: linear-gradient(135deg, rgba(201,169,110,.16), rgba(201,169,110,.04) 70%), var(--bg-2); }
}


/* ══ ALTO CONTRASTE DE WINDOWS ═════════════════════════════════════════════
   El sistema ignora las sombras pero NO `background-image`: un degradado
   sobreviviría encima del color forzado y se comería el texto. Fuera
   barnices y aurora (dps cristal.css «ALTO CONTRASTE DE WINDOWS»). */
@media (forced-colors: active) {
  * { background-image: none !important; }
  body::before { display: none; }
}

@media print {
  body::before { display: none; }
}

/* Las filas: nombre y subtítulo alineados a la izquierda (.pri también es la insignia de prioridad, que centra). */
.fila .pri{display:block;place-items:normal;justify-items:normal;text-align:left}