/* ===========================================================================
   NEWLOG · MATERIAL DE CRISTAL

   Se activa desde Administración -> Apariencia. Todo lo de esta hoja cuelga de
   :root[data-material="cristal"], así que con el material en "sólido" el
   archivo se carga pero no pinta nada.

   QUÉ LLEVA CRISTAL Y QUÉ NO, Y POR QUÉ

   Cristal solo en lo que FLOTA por encima del contenido: la barra superior,
   los modales, NEWI, el chat y la barra del móvil. Ahí el material significa
   algo —dice "esto está encima, lo de abajo sigue ahí"— y el texto que lleva
   encima es corto.

   Las tarjetas, las tablas y los formularios se quedan opacos. Se probó
   ponerles cristal y el resultado está medido: 118 superficies con desenfoque
   en vez de 10, el fotograma medio de 35 ms a 86 ms, y cinco textos por
   debajo del mínimo de contraste —en Reportería los gráficos quedan sobre la
   cabecera oscura y las etiquetas de los ejes desaparecen—. Un portal de
   pagos no puede permitirse eso.

   La barra lateral tampoco: el cristal sobre una página clara la convierte en
   gris y pierde el color de marca, que es lo único que la identifica.

   Los colores del material salen de la paleta activa (--n-*), así que el
   cristal funciona igual con las seis paletas y con el color personalizado.
   =========================================================================== */

:root[data-material="cristal"]{
  --cr-r:16px;
  --cr-r2:12px;
  --cr-material:rgba(255,255,255,.34);
  --cr-borde:rgba(255,255,255,.45);
  --cr-filo:inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.45);
  --cr-sombra:0 16px 44px -22px rgba(12,22,32,.42);
  --cr-desenfoque:blur(26px) saturate(180%);
}
:root[data-material="cristal"][data-theme="dark"]{
  /* En oscuro el material se tiñe del panel de la paleta, no de un azul fijo:
     así el cristal acompaña al color elegido en vez de pelearse con él. */
  --cr-material:color-mix(in srgb, var(--n-panel) 58%, transparent);
  --cr-borde:rgba(255,255,255,.10);
  --cr-filo:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.09);
  --cr-sombra:0 18px 50px -24px rgba(0,0,0,.85);
  --cr-desenfoque:blur(28px) saturate(165%);
}

/* --- algo detrás del cristal ----------------------------------------------
   Sobre un fondo plano el cristal no se ve: no tiene nada que desenfocar. Se
   le pone detrás un lienzo con un poco de relieve y dos manchas MUY tenues,
   tomadas de los halos de la propia paleta. Nada se mueve: esto es una
   herramienta de trabajo. */
:root[data-material="cristal"] body.ui-modern{
  background:linear-gradient(160deg,
      var(--n-panel-3),
      var(--n-fondo) 58%,
      var(--n-panel-3)) !important;
}
:root[data-material="cristal"] body.ui-modern::before{
  display:block !important;
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none; opacity:1;
  background:
    radial-gradient(62% 54% at 16% 8%, var(--n-acento-halo), transparent 70%),
    radial-gradient(58% 52% at 88% 4%, var(--n-aqua-halo),   transparent 68%);
}

/* --- la barra superior ----------------------------------------------------
   La pieza que mejor luce, porque el contenido pasa por debajo al desplazar. */
:root[data-material="cristal"] body.ui-modern .topbar{
  background:var(--cr-material) !important;
  -webkit-backdrop-filter:var(--cr-desenfoque);
  backdrop-filter:var(--cr-desenfoque);
  border-bottom:1px solid var(--cr-borde);
  box-shadow:var(--cr-filo), 0 10px 30px -22px rgba(12,22,32,.5);
}

/* --- modales y avisos ----------------------------------------------------- */
:root[data-material="cristal"] body.ui-modern .modal,
:root[data-material="cristal"] body.ui-modern .modal-card,
:root[data-material="cristal"] body.ui-modern .modal-content,
:root[data-material="cristal"] body.ui-modern .alert,
:root[data-material="cristal"] body.ui-modern .info-banner{
  background:var(--cr-material) !important;
  -webkit-backdrop-filter:var(--cr-desenfoque);
  backdrop-filter:var(--cr-desenfoque);
  border:1px solid var(--cr-borde) !important;
  border-radius:var(--cr-r) !important;
  box-shadow:var(--cr-filo), var(--cr-sombra) !important;
}
/* El velo de detrás del modal también desenfoca: es lo que hace que el modal
   se lea como una capa y no como un recorte pegado encima. */
:root[data-material="cristal"] body.ui-modern .modal-backdrop{
  background:rgba(12,22,32,.28);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

/* --- NEWI, el chat y la barra del móvil ----------------------------------- */
:root[data-material="cristal"] body.ui-modern .ai-assistant,
:root[data-material="cristal"] body.ui-modern .ai-assistant-panel,
:root[data-material="cristal"] body.ui-modern .chat-window,
:root[data-material="cristal"] body.ui-modern .mobile-bottom-nav{
  background:var(--cr-material) !important;
  -webkit-backdrop-filter:var(--cr-desenfoque);
  backdrop-filter:var(--cr-desenfoque);
  border:1px solid var(--cr-borde) !important;
  border-radius:var(--cr-r) !important;
  box-shadow:var(--cr-filo), var(--cr-sombra) !important;
}
/* La cabecera oscura de NEWI y del chat se quedan como están: dentro del
   panel de cristal siguen siendo la firma de la marca. */

/* --- la pantalla de acceso ------------------------------------------------
   Aquí el cristal es donde mejor funciona de todo el portal: una sola tarjeta
   flotando sobre el degradado, sin una tabla cerca. */
:root[data-material="cristal"] body.login-redesign .login-form-panel{
  background:
    radial-gradient(60% 50% at 90% 6%, var(--n-acento-halo), transparent 68%),
    radial-gradient(56% 48% at 4% 92%, var(--n-aqua-halo),   transparent 68%),
    linear-gradient(155deg, var(--n-panel-2), var(--n-panel-3)) !important;
}
:root[data-material="cristal"] body.login-redesign .login-form-card{
  padding:32px;
  background:var(--cr-material);
  -webkit-backdrop-filter:var(--cr-desenfoque);
  backdrop-filter:var(--cr-desenfoque);
  border:1px solid rgba(255,255,255,.55);
  border-radius:20px;
  box-shadow:var(--cr-filo), var(--cr-sombra);
}
:root[data-material="cristal"] body.login-redesign .login-input-wrap{
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.7);
  border-radius:var(--cr-r2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
}
:root[data-material="cristal"] body.login-redesign .login-submit{
  border-radius:var(--cr-r2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 12px 30px -18px rgba(12,22,32,.7);
}
:root[data-material="cristal"] body.login-redesign .login-value-grid article{
  background:rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--cr-r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22);
}
:root[data-material="cristal"] body.login-redesign .login-trust-note{
  background:rgba(255,255,255,.42);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.6);
  border-radius:var(--cr-r2);
}

/* --- accesibilidad --------------------------------------------------------
   Con "reducir transparencia" activado en el sistema operativo, el cristal se
   apaga entero y se vuelve a superficie sólida. Hay gente que lo tiene puesto
   justo porque la translucidez le dificulta leer. */
@media (prefers-reduced-transparency: reduce){
  :root[data-material="cristal"] body.ui-modern .topbar,
  :root[data-material="cristal"] body.ui-modern .modal,
  :root[data-material="cristal"] body.ui-modern .modal-card,
  :root[data-material="cristal"] body.ui-modern .modal-content,
  :root[data-material="cristal"] body.ui-modern .alert,
  :root[data-material="cristal"] body.ui-modern .info-banner,
  :root[data-material="cristal"] body.ui-modern .ai-assistant,
  :root[data-material="cristal"] body.ui-modern .ai-assistant-panel,
  :root[data-material="cristal"] body.ui-modern .chat-window,
  :root[data-material="cristal"] body.ui-modern .mobile-bottom-nav,
  :root[data-material="cristal"] body.login-redesign .login-form-card,
  :root[data-material="cristal"] body.login-redesign .login-input-wrap,
  :root[data-material="cristal"] body.login-redesign .login-trust-note{
    background:var(--n-panel) !important;
    -webkit-backdrop-filter:none !important;
    backdrop-filter:none !important;
    border-color:var(--n-linea) !important;
  }
  :root[data-material="cristal"] body.ui-modern::before{ display:none !important; }
}