/* ==========================================================
   Stith · diseño de vidrio sobre una red de luz morada (Glass UI).
   Va DESPUES de cristal.css y tema-claro.css: los reutiliza y cambia la escena, la navegacion,
   las tarjetas y los botones de las paginas que usan el tema (_tema.html).
   - Fondo: red de nodos + ondas de luz (SVG en linea generado por scripts/generar_fondo_red.py, ver
     _fondo_red.html). Oscuro: morado neon sobre negro. Claro: el mismo dibujo en morado sobre blanco.
     Las ondas fluyen, los nodos parpadean y unas chispas recorren las ondas; todo se detiene en equipos
     modestos (g-lite), con movimiento reducido (g-calm / prefers-reduced-motion) y con la pestaña oculta.
   - Sin reflejo que sigue al cursor sobre las tarjetas (pedido explicito): solo el borde de luz fijo.
   - Navegacion: pildora flotante arriba (en escritorio); en celular, el menu lateral de siempre.
   ========================================================== */

/* Tamaño a la medida de la pantalla (pedido de Johiner, nov-2026: "al 100 % se ve todo muy grande").
   Todo lo que se mide en rem (textos, espacios, botones, tarjetas) se escala desde aqui, sin zoom ni alturas rotas:
   celular 15 px, portatil 14 px (1024-1439 px), escritorio grande 14,4 px. Antes era 16 px en todas. */
html.cristal { font-size: 93.75%; }
@media (min-width: 1024px) { html.cristal { font-size: 87.5%; } }
@media (min-width: 1440px) { html.cristal { font-size: 90%; } }

:root {
  --v-tinta: linear-gradient(135deg, #4c1d95, #6d28d9);   /* botones principales y pildora activa */
  --v-tinta-solida: #4c1d95;
  --v-tinta-texto: #ffffff;
  --v-acento: #7c3aed;
  --v-panel: rgba(255, 255, 255, .58);
  --v-panel-fuerte: rgba(255, 255, 255, .74);
  --v-borde: rgba(255, 255, 255, .9);
  --v-linea: rgba(76, 29, 149, .08);
  --v-sombra: 0 1px 2px rgba(76, 29, 149, .06), 0 18px 48px -18px rgba(76, 29, 149, .32);
  --v-sombra-tinta: 0 10px 26px -10px rgba(109, 40, 217, .7);
  /* Escena clara: blanco con luz lavanda en las esquinas donde esta la red */
  --escena-fondo: radial-gradient(60% 55% at 100% 100%, #e7dbff 0%, transparent 70%),
                  radial-gradient(45% 45% at 100% 0%, #efe6ff 0%, transparent 70%),
                  radial-gradient(40% 40% at 0% 100%, #f1eaff 0%, transparent 70%), #fcfbff;
  --onda-a: #8b5cf6;
  --onda-b: #6d28d9;
  --red-linea: rgba(124, 58, 237, .26);
  --red-nodo: #7c3aed;
  --red-brillo: rgba(124, 58, 237, .35);
  --ondas-glow: .22;
}
html[data-theme="dark"] {
  --v-tinta: linear-gradient(135deg, #7c3aed, #a855f7);
  --v-tinta-solida: #7c3aed;
  --v-tinta-texto: #ffffff;
  --v-panel: rgba(22, 10, 44, .50);
  --v-panel-fuerte: rgba(22, 10, 44, .72);
  --v-borde: rgba(196, 181, 253, .18);
  --v-linea: rgba(196, 181, 253, .10);
  --v-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 22px 56px -18px rgba(0, 0, 0, .75);
  --v-sombra-tinta: 0 10px 30px -8px rgba(168, 85, 247, .75);
  /* Escena oscura: negro morado con resplandor violeta abajo a la derecha (como la referencia) */
  --escena-fondo: radial-gradient(60% 60% at 98% 104%, rgba(124, 58, 237, .42) 0%, transparent 70%),
                  radial-gradient(40% 45% at 100% 0%, rgba(109, 40, 217, .30) 0%, transparent 70%),
                  radial-gradient(35% 35% at 0% 100%, rgba(91, 33, 182, .22) 0%, transparent 70%),
                  linear-gradient(160deg, #0e0422 0%, #07020f 55%, #0b0319 100%);
  --onda-a: #7c3aed;
  --onda-b: #d8b4fe;
  --red-linea: rgba(167, 139, 250, .38);
  --red-nodo: #e9d5ff;
  --red-brillo: rgba(192, 132, 252, .9);
  --ondas-glow: .7;
}

/* ---------- Escena: red de nodos + ondas de luz ---------- */
html.cristal .g-scene {
  inset: 0; transform: none; filter: none; overflow: hidden;
  background: var(--escena-fondo);
}
html.cristal .g-scene::before, html.cristal .g-scene::after { display: none; }
/* SIN PARPADEO (pedido de Johiner, nov-2026). El fondo queda QUIETO en toda la app:
   - glass.js lo movia con el raton (parallax): cada cuadro obligaba a re-desenfocar todos los paneles de vidrio;
   - las ondas fluian y los nodos parpadeaban;
   - al cambiar de pagina el navegador fundia la pantalla entera, fondo incluido.
   Ahora el fondo es una capa propia, fija y sin animaciones, que no participa en el fundido entre paginas. */
html.cristal .g-scene { transform: none !important; view-transition-name: stith-escena; contain: strict; }
::view-transition-group(stith-escena), ::view-transition-old(stith-escena), ::view-transition-new(stith-escena) { animation: none !important; }
::view-transition-old(stith-escena) { display: none; }
.stith-escena-red *, .stith-escena-red { animation: none !important; }
/* Las ondas siguen en el dibujo, pero QUIETAS (sin fluir ni chispas que corren). */
/* Sin ondas en ninguna parte: ni anillos que laten alrededor de iconos/puntos ni la onda de luz al hacer clic. */
.animate-ping, .g-ripple { display: none !important; }
.stith-escena-red { position: absolute; inset: 0; }
.stith-red { position: absolute; overflow: visible; }
.stith-red--sup { top: -3%; right: -4%; width: min(54vw, 780px); }
.stith-red--inf { bottom: 6%; left: -5%; width: min(36vw, 520px); opacity: .7; }
.stith-red .red-lineas line { stroke: var(--red-linea); stroke-width: 1; }
.stith-red .nodo { fill: var(--red-nodo); }
.stith-red .nodo.brilla { filter: drop-shadow(0 0 6px var(--red-brillo)) drop-shadow(0 0 14px var(--red-brillo)); }
.stith-ondas { position: absolute; left: 0; bottom: 0; width: 100%; height: 64vh; overflow: visible; }
.stith-ondas .ondas-lineas path { fill: none; stroke: url(#onda-g); stroke-linecap: round; }
.stith-ondas .ondas-glow path { fill: none; stroke: var(--onda-a); stroke-width: 10; opacity: var(--ondas-glow); }
html[data-theme="light"] .stith-ondas .ondas-chispas { opacity: .75; }

/* Movimiento suave: las ondas respiran, los nodos grandes parpadean */
.stith-ondas .ondas-lineas path, .stith-ondas .ondas-glow path {
  transform-box: fill-box; transform-origin: center;
  animation: onda-fluye 16s ease-in-out infinite alternate; animation-delay: calc(var(--i, 0) * -.9s);
}
.stith-red .nodo.brilla { animation: nodo-parpadea 4.5s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes onda-fluye { from { transform: translate(-1.2%, 1.5%) scaleY(.94); } to { transform: translate(1.2%, -2%) scaleY(1.06); } }
@keyframes nodo-parpadea { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Equipos modestos, movimiento reducido o pestaña oculta: escena quieta y sin chispas */
html.g-lite .stith-escena-red *, html.g-calm .stith-escena-red *, .g-hidden .stith-escena-red * { animation: none !important; }
html.g-lite .ondas-chispas, html.g-calm .ondas-chispas { display: none; }
html.g-lite .stith-red .nodo.brilla { filter: none; }
@media (prefers-reduced-motion: reduce) { .stith-escena-red * { animation: none !important; } .ondas-chispas { display: none; } }

/* Celular: la red arriba a la derecha y las ondas abajo, a la medida de una pantalla vertical */
@media (max-width: 767px) {
  .stith-red--sup { width: 112vw; top: -4%; right: -30vw; }
  .stith-red--inf { width: 90vw; left: -24vw; bottom: 22%; opacity: .5; }
  .stith-ondas { height: 46vh; }
}


/* ---------- Sin reflejo al pasar el cursor: el borde queda fijo, sin luz que lo siga ---------- */
html.cristal .glass::after { display: none !important; }
html.cristal .glass::before {
  background: linear-gradient(140deg, var(--v-borde), transparent 40%, transparent 60%, color-mix(in srgb, var(--v-borde) 60%, transparent));
}

/* ---------- Tarjetas: vidrio claro, radios grandes ---------- */
html.cristal .glass {
  background: var(--v-panel);
  box-shadow: var(--v-sombra), inset 0 1px 0 rgba(255, 255, 255, .55);
}
html[data-theme="dark"].cristal .glass { box-shadow: var(--v-sombra), inset 0 1px 0 rgba(255, 255, 255, .06); }
html.cristal .rounded-2xl { border-radius: 24px; }
html.cristal .rounded-3xl { border-radius: 32px; }

/* Las paginas que aun usan los fondos oscuros de Tailwind (bg-[#0a0a0a], bg-[#111]...) se vuelven vidrio.
   Se apunta solo a la clase "bg-[#..." propia del elemento (no a hover:bg-...). */
html.cristal [class^="bg-[#"], html.cristal [class*=" bg-[#"] { background-color: var(--v-panel) !important; }
html.cristal [class^="bg-[#"]:is(.rounded-xl, .rounded-2xl, .rounded-3xl),
html.cristal [class*=" bg-[#"]:is(.rounded-xl, .rounded-2xl, .rounded-3xl) {
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--v-sombra);
}
html.g-lite.cristal [class*="bg-[#"] { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.g-lite.cristal [class^="bg-[#"], html.g-lite.cristal [class*=" bg-[#"] { background-color: var(--v-panel-fuerte) !important; }
/* Campos de texto: algo mas solidos para que se lean */
html.cristal :is(input, select, textarea)[class*="bg-[#"] { background-color: var(--v-panel-fuerte) !important; }
/* Pantallas que tapan todo (carga, modales, menu del celular): solidas */
html.cristal :is(#loading-screen, #sidebar-mobile, #foto-perfil-lightbox)[class*="bg-[#"],
html.cristal .fixed.inset-0[class*="bg-[#"] { background-color: rgb(var(--g-tint)) !important; backdrop-filter: none !important; }
html.cristal body, html.cristal body > .flex-1 { background: transparent !important; }

/* ---------- Botones: pildoras, el principal en tinta ---------- */
html.cristal :is(button, a)[class*="rounded-lg"]:not(.stith-pill),
html.cristal :is(button, a)[class*="rounded-xl"]:not(.stith-pill) { border-radius: 999px; }
html.cristal :is(.bg-violet-600, .bg-violet-600\/90, .bg-purple-600, .bg-violet-500):is(button, a) {
  background: var(--v-tinta) !important; background-color: var(--v-tinta-solida) !important; color: var(--v-tinta-texto) !important; border-color: transparent !important;
  box-shadow: var(--v-sombra-tinta);
}
html.cristal :is(.bg-violet-600, .bg-violet-600\/90, .bg-purple-600, .bg-violet-500):is(button, a) :is(svg, span) { color: inherit !important; }
html.cristal :is(button, a):is(.bg-violet-600, .bg-violet-600\/90, .bg-purple-600, .bg-violet-500):hover { filter: brightness(1.15); }

/* ---------- Barra superior: pildora flotante ---------- */
.stith-barra { background: transparent !important; border: 0 !important; height: auto !important; }
.stith-nav {
  display: flex; align-items: center; gap: .5rem;
  height: 60px; padding: 0 1.1rem 0 .4rem; border-radius: 999px;   /* derecha: lo ultimo no cae en la curva del borde */
  background: var(--v-panel-fuerte) !important;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
@media (min-width: 768px) { .stith-nav { height: 64px; gap: .75rem; padding: 0 1.25rem 0 .5rem; } }
html.g-lite .stith-nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--g-tint), .94) !important; }

.stith-icono-boton {
  align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px;
  color: var(--g-ink); transition: background .2s;
}
.stith-icono-boton:hover { background: var(--v-linea); }
/* El boton de menu (hamburguesa) ya no se muestra: en celular la navegacion es la barra de abajo (.stith-dock). */

.stith-marca-nav { display: flex; align-items: center; gap: .6rem; padding: 4px 14px 4px 4px; border-radius: 999px; flex-shrink: 0; }
.stith-logo-chip {
  position: relative; width: 44px; height: 44px; border-radius: 999px; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .7), 0 6px 18px -4px rgba(124, 58, 237, .55);
}
.stith-logo-chip img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.stith-marca-texto { line-height: 1; }
.stith-marca-nombre { display: block; font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; color: var(--g-ink); }
.stith-marca-sub { display: block; margin-top: 3px; font-size: 9px; font-weight: 700; letter-spacing: .2em; color: var(--v-acento); }
html[data-theme="dark"] .stith-marca-sub { color: #c4b5fd; }

.stith-pills { align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--v-linea); }
.stith-pill {
  display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .85rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: color-mix(in srgb, var(--g-ink) 72%, transparent); white-space: nowrap;
  transition: background .25s var(--g-smooth), color .25s, transform .3s var(--g-spring);
}
.stith-pill svg { width: 17px; height: 17px; flex-shrink: 0; }
.stith-pill:hover { color: var(--g-ink); background: rgba(255, 255, 255, .55); }
html[data-theme="dark"] .stith-pill:hover { background: rgba(255, 255, 255, .08); }
.stith-pill.is-activa { background: var(--v-tinta); background-color: var(--v-tinta-solida); color: var(--v-tinta-texto); box-shadow: var(--v-sombra-tinta); }
.stith-pill:active { transform: scale(.96); }
/* Entre 1024 y 1279 px solo iconos (el texto queda en el title) para que todo quepa en una linea */
@media (min-width: 1024px) and (max-width: 1279px) { .stith-pill span { display: none; } .stith-pill { padding: 0 .75rem; } }

/* Selector de ciudad dentro de la pildora */
#location-widget { padding: 0 .4rem; }
#loc-trigger { max-width: 170px; }
@media (min-width: 1536px) { #loc-trigger { max-width: 260px; } }
@media (max-width: 767px) { #loc-trigger { max-width: 110px; } }

/* Menus que se despliegan desde la pildora */
html.cristal :is(#loc-panel, #profile-dropdown-menu) {
  background: var(--v-panel-fuerte) !important; border: 1px solid var(--v-borde) !important; border-radius: 24px !important;
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow: var(--v-sombra) !important;
}
#loc-panel { top: 3.1rem; }

/* ---------- Titulo de la pagina: grande, como encabezado ---------- */
.stith-titulo { padding: 1.6rem 1rem .4rem; }
@media (min-width: 768px) { .stith-titulo { padding: 2.2rem 2.2rem .6rem; } }
@media (min-width: 1024px) { .stith-titulo { padding: 2.4rem 2.6rem .6rem; } }
.stith-titulo:empty { display: none; }
.stith-titulo h1 {
  font-size: clamp(1.6rem, 2.6vw, 2.5rem) !important; line-height: 1.1; font-weight: 800 !important;
  letter-spacing: -.04em; white-space: normal !important; color: var(--g-ink) !important;
}
.stith-titulo p { font-size: .95rem !important; margin-top: .3rem; display: block !important; white-space: normal !important;
  color: color-mix(in srgb, var(--g-ink) 72%, transparent) !important; font-weight: 500; }
.stith-titulo > div > div:first-child:not(.min-w-0) { width: 52px !important; height: 52px !important; }
.stith-titulo > div > div:first-child:not(.min-w-0) > div, .stith-titulo > div > div:first-child.w-8 { width: 52px !important; height: 52px !important; border-radius: 18px !important; }
.stith-titulo > div > div:first-child svg { width: 24px !important; height: 24px !important; }
.stith-titulo > div { gap: 1rem !important; }

/* ---------- Menu del celular con la marca ---------- */
html.cristal #sidebar-mobile { border-right: 1px solid var(--v-borde) !important; }

/* ---------- Bandeja: dos tarjetas (lista y lectura) debajo del titulo, a la altura de la ventana ---------- */
html.cristal #inbox-root {
  position: relative !important; inset: auto !important;
  height: calc(100dvh - 205px); min-height: 460px;
  margin: .5rem .75rem 0;
}
@media (max-width: 1023px) { html.cristal #inbox-root { height: calc(100dvh - 300px); } }
@media (min-width: 768px) { html.cristal #inbox-root { margin: .5rem 2.2rem 0; height: calc(100dvh - 235px); } }
@media (min-width: 1024px) { html.cristal #inbox-root { margin: .5rem 2.6rem 0; } }
/* Celular/tablet: la bandeja NO tiene alto fijo ni se desplaza por dentro; baja con toda la pagina (#app-scroll).
   Con alto fijo (min 460px) la caja no cabia en pantallas chicas: al bajar la lista hasta el final, los ultimos correos
   quedaban detras de la barra de menu de abajo y no se podian tocar, porque la pagina de afuera no se movia. Asi el
   espacio que <main> ya reserva para esa barra (padding-bottom) deja siempre el ultimo correo por encima de ella. */
@media (max-width: 1023px) {
  html.cristal #inbox-root { height: auto; min-height: 0; }
  html.cristal #inbox-root .bx-desplaza { flex: none; overflow: visible; }
}

/* ---------- Login (login.html): mismo vidrio sobre la foto. Solo aspecto: el formulario y su JS no cambian ---------- */
html.cristal .pagina-login :is(.bg-orb, .bg-grid, .particle) { display: none !important; }
html.cristal .pagina-login .left-panel { background: transparent !important; border-right: 0 !important; }
html.cristal .pagina-login .left-panel > .absolute { display: none; }
html.cristal .pagina-login .login-card {
  background: var(--v-panel-fuerte) !important; border: 1px solid var(--v-borde) !important; border-radius: 32px !important;
  backdrop-filter: blur(24px) saturate(160%) !important; -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  box-shadow: var(--v-sombra) !important;
}
html.g-lite.cristal .pagina-login .login-card { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
html.cristal .pagina-login .input-field {
  background: rgba(255, 255, 255, .55) !important; border-color: var(--v-linea) !important; color: var(--g-ink) !important; border-radius: 16px !important;
}
html[data-theme="dark"].cristal .pagina-login .input-field { background: rgba(255, 255, 255, .06) !important; }
html.cristal .pagina-login .input-field::placeholder { color: color-mix(in srgb, var(--g-ink) 45%, transparent); }
html.cristal .pagina-login button[type="submit"] {
  background: var(--v-tinta) !important; background-color: var(--v-tinta-solida) !important; color: var(--v-tinta-texto) !important; border-radius: 999px !important;
  box-shadow: var(--v-sombra-tinta) !important;
}
html.cristal .pagina-login button[type="submit"] :is(svg, span) { color: inherit !important; }
html.cristal .pagina-login .logo-container { width: 96px; height: 96px; }
html.cristal .pagina-login .logo-container img { border-radius: 999px; }
.login-tema { position: fixed; top: 16px; right: 16px; z-index: 60; }

html.cristal .pagina-login .left-panel {
  margin: 24px 0 24px 24px; border-radius: 32px; background: var(--v-panel-fuerte) !important;
  backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%);
  border: 1px solid var(--v-borde) !important; box-shadow: var(--v-sombra);
}
html.g-lite.cristal .pagina-login .left-panel { backdrop-filter: none; -webkit-backdrop-filter: none; }
html.cristal .pagina-login .login-card .bg-clip-text { background: none !important; color: var(--g-ink) !important; -webkit-text-fill-color: currentColor; }
html[data-theme="light"].cristal .pagina-login .left-panel h1 .bg-clip-text { background-image: linear-gradient(90deg, #7c3aed, #9333ea 55%, #6d28d9) !important; }

/* ---------- Panel de administrador (_admin_barra.html): la misma pildora, dentro del contenedor centrado ---------- */
.stith-barra-admin { position: sticky; top: 12px; z-index: 50; }
.stith-titulo-admin { padding: 1.4rem .5rem .2rem !important; }
.stith-salir {
  display: inline-flex; align-items: center; gap: .45rem; height: 40px; padding: 0 .9rem; border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: color-mix(in srgb, var(--g-ink) 72%, transparent); white-space: nowrap;
  transition: background .2s, color .2s;
}
.stith-salir svg { width: 17px; height: 17px; }
.stith-salir:hover { color: #dc2626; background: rgba(220, 38, 38, .08); }
@media (max-width: 639px) { .stith-barra-admin .stith-pill span { display: none; } .stith-barra-admin .stith-pill { padding: 0 .8rem; } }

/* ---------- Login de administrador (admin_login.html) ---------- */
.admin-acceso {
  position: relative; z-index: 1; border-radius: 32px; background: var(--v-panel-fuerte); border: 1px solid var(--v-borde);
  backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: var(--v-sombra);
}
html.g-lite .admin-acceso { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--g-tint), .94); }
.admin-acceso-logo {
  width: 88px; height: 88px; margin: 0 auto 1.1rem; border-radius: 999px; overflow: hidden;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .75), 0 14px 34px -10px rgba(124, 58, 237, .65);
}
.admin-acceso-logo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.admin-acceso-sub { margin-top: .35rem; font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--v-acento); }
html[data-theme="dark"] .admin-acceso-sub { color: #c4b5fd; }
.admin-acceso-campo {
  border-radius: 16px; background: rgba(255, 255, 255, .55); border: 1px solid var(--v-linea); color: var(--g-ink) !important;
  transition: border-color .2s, box-shadow .2s;
}
html[data-theme="dark"] .admin-acceso-campo { background: rgba(255, 255, 255, .06); }
.admin-acceso-campo:focus { border-color: var(--v-acento); box-shadow: 0 0 0 3px rgba(124, 58, 237, .18); }
.admin-acceso-entrar {
  border-radius: 999px; background: var(--v-tinta); background-color: var(--v-tinta-solida); color: var(--v-tinta-texto);
  box-shadow: var(--v-sombra-tinta); transition: filter .2s, transform .2s;
}
.admin-acceso-entrar:hover { filter: brightness(1.15); }
.admin-acceso-entrar:active { transform: scale(.98); }

/* ---------- Fondo un poco borroso (como la escena de la skill Glass UI) ----------
   El desenfoque va en la capa del dibujo, no en el vidrio: las tarjetas siguen nitidas. Se agranda la capa hacia
   los bordes (inset negativo) para que el desenfoque no deje un borde transparente en las orillas de la pantalla. */
.stith-escena-red { inset: -30px; filter: blur(3.5px) saturate(1.1); }
html.g-lite .stith-escena-red { filter: blur(2px); }

/* ==========================================================
   Tarjetas limpias + efecto espejo + iconos + tablas + navegacion del celular
   ========================================================== */

/* ---------- Tarjetas limpias: fuera la cuadricula y las capas decorativas de adentro ---------- */
/* Patron de cuadricula (style="background-image: linear-gradient(...); background-size: 40px 40px") */
html.cristal [style*="background-size"][class*="absolute"][class*="inset-0"] { display: none !important; }
/* Degradados oscuros, radiales y barridos que cada tarjeta traia del diseño anterior */
html.cristal .absolute.inset-0:is([class*="bg-[radial-gradient"], [class*="from-[#"], .animate-mirror-sweep, [class*="via-white/"]) { display: none !important; }
/* Orbes difuminados decorativos dentro de tarjetas */
html.cristal :is(.glass, .rounded-2xl, .rounded-3xl) .absolute.rounded-full:is([class*="blur-2xl"], [class*="blur-3xl"], [class*="blur-xl"]) { display: none !important; }
/* Lineas brillantes decorativas de 1px en el borde superior */
html.cristal :is(.glass, .rounded-2xl, .rounded-3xl) > .absolute.top-0.left-0.right-0[class*="h-[1px]"],
html.cristal :is(.glass, .rounded-2xl, .rounded-3xl) > .absolute.top-0.left-0.right-0.h-px { display: none !important; }

/* ---------- Efecto espejo: reflejo FIJO del vidrio (no sigue al cursor) ---------- */
:root {
  --v-panel: rgba(243, 237, 255, .52);
  --v-panel-fuerte: rgba(248, 245, 255, .76);
  --espejo: linear-gradient(118deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .45) 18%, rgba(255, 255, 255, 0) 36%,
                            rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .55) 56%, rgba(255, 255, 255, 0) 61%,
                            rgba(255, 255, 255, 0) 80%, rgba(255, 255, 255, .5) 100%);
  --espejo-borde: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(255, 255, 255, .35);
}
html[data-theme="dark"] {
  --espejo: linear-gradient(118deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .07) 18%, rgba(255, 255, 255, 0) 36%,
                            rgba(255, 255, 255, 0) 52%, rgba(216, 180, 254, .10) 56%, rgba(255, 255, 255, 0) 61%,
                            rgba(255, 255, 255, 0) 80%, rgba(196, 181, 253, .14) 100%);
  --espejo-borde: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(196, 181, 253, .06);
}
html.cristal .glass::after {
  display: block !important; content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: var(--espejo); opacity: 1; mix-blend-mode: normal;
}
html.cristal .glass { box-shadow: var(--v-sombra), var(--espejo-borde) !important; }
/* Las tarjetas que venian del diseño oscuro (bg-[#...]) llevan el mismo reflejo como capa de fondo */
html.cristal [class^="bg-[#"]:is(.rounded-xl, .rounded-2xl, .rounded-3xl),
html.cristal [class*=" bg-[#"]:is(.rounded-xl, .rounded-2xl, .rounded-3xl) {
  background-image: var(--espejo) !important; box-shadow: var(--v-sombra), var(--espejo-borde) !important;
  border-color: var(--v-borde) !important;
}
/* Barra, menus y campos no llevan el reflejo grande: solo el filo de luz */
html.cristal :is(.stith-nav, .stith-dock).glass::after { background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 55%); }
html[data-theme="dark"].cristal :is(.stith-nav, .stith-dock).glass::after { background: linear-gradient(180deg, rgba(255, 255, 255, .07), transparent 55%); }
html.cristal :is(input, select, textarea)[class*="bg-[#"] { background-image: none !important; }

/* ---------- Tarjetas mas ordenadas ---------- */
html.cristal .glass, html.cristal [class*=" bg-[#"]:is(.rounded-2xl, .rounded-3xl) { border: 1px solid var(--v-borde); }
html.cristal :is(.glass, .rounded-2xl) :is(.text-3xl, .text-4xl, .text-5xl) { font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
/* Etiquetas en mayuscula de las tarjetas: un solo estilo, discreto */
html.cristal :is(.glass, .rounded-2xl) :is(.text-\[9px\], .text-\[10px\]).uppercase { letter-spacing: .14em; font-weight: 700; }
/* Las rejillas de tarjetas: misma altura por fila y separacion uniforme */
html.cristal .grid > :is(.glass, .rounded-2xl) { height: 100%; }

/* ---------- Iconos: circulos de vidrio con trazo fino, en lugar de cajitas cuadradas de color ---------- */
html.cristal :is(div, span)[class*="rounded-lg"]:has(> svg:only-child),
html.cristal :is(div, span)[class*="rounded-xl"]:has(> svg:only-child) {
  border-radius: 999px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(237, 228, 255, .55)) !important;
  border: 1px solid rgba(255, 255, 255, .9) !important;
  box-shadow: 0 6px 16px -8px rgba(109, 40, 217, .45), inset 0 1px 0 #fff !important;
}
html[data-theme="dark"].cristal :is(div, span)[class*="rounded-lg"]:has(> svg:only-child),
html[data-theme="dark"].cristal :is(div, span)[class*="rounded-xl"]:has(> svg:only-child) {
  background: linear-gradient(145deg, rgba(167, 139, 250, .22), rgba(76, 29, 149, .18)) !important;
  border-color: rgba(196, 181, 253, .22) !important;
  box-shadow: 0 6px 18px -8px rgba(168, 85, 247, .6), inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
html.cristal :is(div, span)[class*="rounded-"]:has(> svg:only-child) > svg { stroke-width: 1.6; }
/* Iconos que eran blancos sobre una cajita de color: dentro del circulo de vidrio pasan al morado de la marca */
html.cristal :is(div, span)[class*="rounded-l"]:not([class*="bg-gradient"]):has(> svg:only-child) > svg.text-white,
html.cristal :is(div, span)[class*="rounded-x"]:not([class*="bg-gradient"]):has(> svg:only-child) > svg.text-white { color: var(--v-acento) !important; }
html[data-theme="dark"].cristal :is(div, span)[class*="rounded-"]:not([class*="bg-gradient"]):has(> svg:only-child) > svg.text-white { color: #d8b4fe !important; }
/* Los iconos de los titulos de pagina (degradado morado) se quedan como estan: son la marca de cada seccion */
html.cristal .stith-titulo :is(div, span)[class*="rounded-"]:has(> svg:only-child) {
  background: var(--v-tinta) !important; background-color: var(--v-tinta-solida) !important; border-color: transparent !important; box-shadow: var(--v-sombra-tinta) !important;
}
html.cristal .stith-titulo :is(div, span)[class*="rounded-"]:has(> svg:only-child) > svg { color: #fff !important; }

/* ---------- Tablas ordenadas ---------- */
html.cristal table { border-collapse: separate; border-spacing: 0; width: 100%; }
html.cristal thead { background: color-mix(in srgb, var(--v-panel-fuerte) 80%, transparent) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
html.cristal thead th {
  font-size: 10.5px !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase;
  color: color-mix(in srgb, var(--g-ink) 55%, transparent) !important;
  padding-top: .95rem !important; padding-bottom: .95rem !important; border-bottom: 1px solid var(--v-linea) !important;
}
html.cristal tbody tr { transition: background .2s; }
html.cristal tbody tr + tr td { border-top: 1px solid var(--v-linea); }
html.cristal tbody tr:nth-child(even) { background: color-mix(in srgb, var(--v-acento) 3%, transparent); }
html.cristal tbody tr:hover { background: color-mix(in srgb, var(--v-acento) 7%, transparent) !important; }
html.cristal tbody td { padding-top: 1rem !important; padding-bottom: 1rem !important; vertical-align: middle; }
html.cristal tbody tr > :first-child { font-weight: 600; }

/* ---------- Celular: la misma navegacion del computador, abajo ---------- */
.stith-dock {
  display: none; position: fixed; z-index: 120; left: 0; right: 0; margin-inline: auto;
  bottom: calc(12px + env(safe-area-inset-bottom)); width: min(calc(100vw - 20px), 560px);
  align-items: stretch; justify-content: space-between; gap: 2px; padding: 6px;
  border-radius: 999px; background: var(--v-panel-fuerte) !important;
  backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
}
html.g-lite .stith-dock { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(var(--g-tint), .95) !important; }
.stith-dock-item {
  flex: 1 1 0; min-width: 0; min-height: 54px !important; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .01em;
  color: color-mix(in srgb, var(--g-ink) 62%, transparent); transition: background .25s, color .25s, transform .3s var(--g-spring);
}
.stith-dock-item svg { width: 21px; height: 21px; }
.stith-dock-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stith-dock-item.is-activa { flex-grow: 1.35; background: var(--v-tinta); background-color: var(--v-tinta-solida); color: var(--v-tinta-texto); box-shadow: var(--v-sombra-tinta); }
.stith-dock-item:active { transform: scale(.92); }
/* Celular/tablet: la pagina no se desplaza, se desplaza el contenido (#app-scroll). Asi Safari y Chrome no encogen ni
   agrandan sus barras al hacer scroll y la barra de abajo queda quieta (antes "saltaba" con la barra del navegador). */
/* Solo en las paginas con #app-scroll (las del aprendiz): el admin y el login no lo tienen y quedaban sin poder bajar. */
@media (max-width: 1023px) {
  /* 100dvh = la parte que de verdad se ve. Con 100 % Chrome de Android contaba tambien lo que queda debajo de su barra
     de abajo, y el final de la lista (el ultimo correo) quedaba escondido ahi sin poder subirlo. */
  html:has(#app-scroll), html:has(#app-scroll) body { height: 100%; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
  #app-scroll { height: 100%; height: 100dvh; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 1023px) {
  .stith-dock { display: flex; }
  /* Alto de la barra de abajo + su margen + la franja segura del iPhone (la barrita de inicio): antes eran 104 px fijos y
     en iPhone la barra, que sube con esa franja, tapaba el ultimo elemento de la pagina. */
  main { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
  #flash-container { top: auto !important; bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (max-width: 380px) { .stith-dock-item span { font-size: 9px; } }

/* Celular: tarjetas y titulos con el mismo aire que en el computador */
@media (max-width: 767px) {
  .stith-titulo h1 { font-size: 1.75rem !important; }
  html.cristal .rounded-3xl { border-radius: 26px; }
  html.cristal .rounded-2xl { border-radius: 22px; }
  html.cristal table { font-size: .85rem; }
}

/* ---------- Numeros normales ----------
   .mono / font-mono usaban JetBrains Mono (fuente de programacion: el cero lleva un punto en el centro).
   Todo pasa a Inter, la fuente de la pagina, con cifras de ancho fijo para que las columnas queden alineadas. */
html.cristal :is(.mono, .font-mono) {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "zero" 0; letter-spacing: normal;
}
html.cristal :is(.text-2xl, .text-3xl, .text-4xl, .text-5xl) { font-variant-numeric: tabular-nums; }

/* ── Navegacion instantanea ─────────────────────────────────────────────────
   Las pantallas de carga ya no esperan nada (la pagina llega renderizada): se ocultan de entrada y el contenido
   aparece sin el desvanecido de 0,7 s. Entre paginas, el navegador hace un fundido corto en vez de un parpadeo. */
#loading-screen { display: none !important; }
#main-content { opacity: 1 !important; transition: none !important; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
/* ---------- Menu del perfil (#profile-dropdown-menu) ----------
   Antes: franja negra arriba (degradado del diseño viejo), nombre y programa cortados con "..." y desalineados
   respecto a la foto, y "Cambiar foto"/"Descargar" sueltos debajo. Solo aspecto: ids y onclick no cambian. */
html.cristal #profile-dropdown-menu .absolute:is(.inset-0, .rounded-full, .h-px) { display: none !important; }
html.cristal #profile-dropdown-menu .relative.p-5 { padding: 1.25rem 1.25rem 1rem; }
/* Foto a la izquierda, nombre y programa a la derecha, alineados arriba */
html.cristal #profile-dropdown-menu .flex.items-center.gap-4 { align-items: flex-start; gap: 1rem; }
html.cristal #profile-dropdown-menu .flex.items-center.gap-4 > .flex-1 { padding-top: .35rem; }
/* Nombre y programa completos, en hasta 2 lineas, sin cortarse con "..." */
html.cristal #profile-dropdown-menu :is(#texto_nombre, #texto_cargo) {
  white-space: normal !important; overflow: hidden; text-overflow: clip;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
html.cristal #profile-dropdown-menu #texto_nombre { font-size: 1rem !important; line-height: 1.25; letter-spacing: -.01em; }
html.cristal #profile-dropdown-menu #texto_cargo { font-size: 10.5px !important; line-height: 1.45; letter-spacing: .08em; margin-top: .3rem; }
/* El lapiz de editar siempre visible en celular (no hay "pasar el cursor") */
@media (hover: none) { html.cristal #profile-dropdown-menu :is(.group\/editnombre, .group\/editcargo) button { opacity: 1 !important; } }
/* Foto: circulo de vidrio con borde de luz */
html.cristal #profile-dropdown-menu .w-16.h-16 { border-radius: 999px !important; box-shadow: 0 0 0 3px var(--v-borde), var(--v-sombra-tinta) !important; }
html.cristal #profile-dropdown-menu .w-16.h-16 > .absolute { border-radius: 999px !important; }
/* "Cambiar foto" y "Descargar": fila propia bajo la foto y el nombre, dos botones del mismo ancho */
#profile-dropdown-menu .perfil-acciones { display: flex; gap: .5rem; margin-top: .9rem; }
#profile-dropdown-menu .perfil-acciones > :is(a, button) {
  flex: 1 1 0; justify-content: center; margin: 0 !important; min-height: 36px !important; padding: .45rem .75rem !important;
  border-radius: 999px !important; font-size: 11px; white-space: nowrap;
  background: color-mix(in srgb, var(--v-panel-fuerte, #1d0d3a) 70%, transparent);
}
html[data-theme="dark"] #profile-dropdown-menu .perfil-acciones > :is(a, button) { background: rgba(255, 255, 255, .07); }
/* Dentro de la barra (que ya desenfoca) el desenfoque del menu no se aplica: fondo casi solido para que se lea. */
html.cristal :is(#profile-dropdown-menu, #loc-panel) {
  background: linear-gradient(160deg, #ffffff 0%, #f6f1ff 55%, #efe7ff 100%) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"].cristal :is(#profile-dropdown-menu, #loc-panel) {
  background: linear-gradient(160deg, #1d0d3a 0%, #140828 55%, #10061f 100%) !important;
}

/* ---------- Celular y tablet: el contenido nunca espera la animacion de entrada ----------
   [data-reveal] arranca invisible y glass.js lo muestra al entrar en pantalla. En Safari de iPhone eso podia no
   dispararse nunca y el bloque de empresas de Monitoreo quedaba invisible. La animacion es decorativa: en pantallas
   tactiles, equipos modestos (g-lite) y anchos de celular/tablet todo se muestra de una vez. */
html.g-lite [data-reveal], html.g-calm [data-reveal] { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
@media (max-width: 1023px), (hover: none) {
  [data-reveal] { opacity: 1 !important; animation: none !important; filter: none !important; transform: none !important; }
}

/* "Cambiar foto" y "Descargar" del menu del perfil: sin contorno */
#profile-dropdown-menu .perfil-acciones > :is(a, button) { border: 0 !important; box-shadow: none !important; }

/* ---------- Tabla de Usuarios del admin: todo cabe, sin deslizar hacia los lados ----------
   Celdas mas compactas, nombre en una o dos lineas y las tres acciones apiladas en columna. Por debajo de 1280 px
   se usan las tarjetas (como en celular) en vez de la tabla. */
.admin-tabla-usuarios table { table-layout: auto; }
.admin-tabla-usuarios :is(th, td) { padding-left: .9rem !important; padding-right: .9rem !important; }
.admin-tabla-usuarios td:first-child { min-width: 190px; text-transform: capitalize; }
.admin-tabla-usuarios td:first-child .font-semibold, .admin-tabla-usuarios td:first-child p { text-transform: none; }
.admin-tabla-usuarios td:last-child > .inline-flex { display: flex; flex-direction: column; align-items: stretch; gap: .4rem; min-width: 150px; }
.admin-tabla-usuarios td:last-child :is(form, button) { width: 100%; }
.admin-tabla-usuarios td:last-child button { padding: .45rem .8rem !important; white-space: nowrap; }
.admin-tabla-usuarios td:nth-child(4) span, .admin-tabla-usuarios td:nth-child(3) span { white-space: nowrap; }
.admin-tabla-usuarios > div { overflow-x: visible !important; }

/* ---------- Login: al 100 % se veia como al 90 % del navegador (todo un poco grande) ----------
   Se escala todo el contenido del login al 90 %, igual que el zoom que hacia falta. Solo el tamaño: el formulario,
   sus campos y su JavaScript no cambian. La pantalla sigue llenando todo el alto (min-height compensado). */
html.cristal .pagina-login > .flex.w-full.min-h-screen { zoom: .9; min-height: calc(100vh / .9); }
@media (max-width: 767px) { html.cristal .pagina-login > .flex.w-full.min-h-screen { zoom: .92; min-height: calc(100dvh / .92); } }
/* Panel "Verificando con SGVA..." del login: vidrio en lugar del bloque negro (tenia un degradado oscuro en linea) */
html.cristal .pagina-login #panel-progreso {
  background: var(--v-panel-fuerte) !important; border: 1px solid var(--v-borde) !important; border-radius: 24px !important;
  box-shadow: var(--v-sombra) !important;
}
html.cristal .pagina-login #panel-progreso :is(.bg-black\/20, .bg-black\/30, .bg-black\/40, [class*="bg-[#"]) { background: transparent !important; }

/* ══════════════════════════════════════════════════════════════════════════════════════════════════════════════
   CRISTAL DE VERDAD (pedido de Johiner, oct-2026): los paneles dejan ver el fondo (red y ondas) en vez de taparlo.
   - Relleno muy bajo (antes 50-75 %): el color lo pone el fondo, no el panel.
   - Desenfoque corto con mas saturacion: el fondo se reconoce detras, el texto sigue legible.
   - Borde fino de luz y un brillo en el canto de arriba (el "filo" del vidrio).
   - SIN el reflejo diagonal (--espejo): se apaga en todas las tarjetas.
   - En celular/equipos modestos (g-lite) tambien es cristal: desenfoque mas corto en vez de panel solido.
   Ventanas, menus y avisos siguen usando --v-panel-fuerte (mas opaco): ahi lo que importa es leer.
   ══════════════════════════════════════════════════════════════════════════════════════════════════════════════ */
:root {
  --v-panel: rgba(255, 255, 255, .22);
  --v-panel-fuerte: rgba(255, 255, 255, .80);
  --cr-borde: rgba(255, 255, 255, .65);
  --cr-filo: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 0 0 1px rgba(255, 255, 255, .18);
  --cr-sombra: 0 12px 40px rgba(76, 29, 149, .10), 0 2px 8px rgba(76, 29, 149, .06);
  --cr-desenfoque: blur(10px) saturate(175%);
}
html[data-theme="dark"] {
  --v-panel: rgba(255, 255, 255, .045);
  --v-panel-fuerte: rgba(22, 12, 42, .82);
  --cr-borde: rgba(255, 255, 255, .13);
  --cr-filo: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .03);
  --cr-sombra: 0 14px 44px rgba(0, 0, 0, .40);
  --cr-desenfoque: blur(10px) saturate(160%);
}
html.cristal .glass {
  background: var(--v-panel) !important;
  border: 1px solid var(--cr-borde) !important;
  box-shadow: var(--cr-sombra), var(--cr-filo) !important;
  backdrop-filter: var(--cr-desenfoque) !important; -webkit-backdrop-filter: var(--cr-desenfoque) !important;
}
/* Sin reflejo diagonal */
html.cristal .glass::after { display: none !important; background: none !important; }
/* Celular y equipos modestos: cristal con desenfoque corto (antes se volvia un panel casi solido) */
html.g-lite.cristal .glass {
  backdrop-filter: blur(8px) saturate(160%) !important; -webkit-backdrop-filter: blur(8px) saturate(160%) !important;
}
/* Scroll liso en celular: MIENTRAS se desplaza la pagina (glass.js pone .cr-scroll) se apaga el
   desenfoque en vivo -- lo caro de pintar, y lo que Safari rasteriza a baja resolucion al vuelo
   (se veia "pixelado"). Asi el fondo deja de recalcularse por frame y el scroll va fluido. Se deja
   un relleno mas opaco (--v-panel-fuerte) para que el texto siga legible sin el desenfoque. Al
   soltar, .cr-scroll desaparece y vuelve el cristal con la transicion suave de .glass. */
html.g-lite.cr-scroll.cristal .glass {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: var(--v-panel-fuerte) !important;
}
/* Si el navegador no sabe desenfocar, un poco mas de relleno para que el texto se lea */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --v-panel: rgba(255, 255, 255, .72); }
  html[data-theme="dark"] { --v-panel: rgba(22, 12, 42, .78); }
}
@media (prefers-reduced-transparency: reduce) {
  :root { --v-panel: rgba(255, 255, 255, .88); }
  html[data-theme="dark"] { --v-panel: rgba(22, 12, 42, .9); }
}

/* Red de seguridad de las apariciones: glass.js muestra cada [data-reveal] cuando el navegador avisa que entro en
   pantalla. Si ese aviso nunca llega (pasaba en Brave con los paneles del admin), el bloque quedaba invisible para siempre.
   Ahora, si en 1,5 s no lo mostro glass.js, aparece solo. */
html.g-motor [data-reveal]:not(.is-in) { animation: stith-revelar-respaldo .45s ease 1.5s forwards; }
@keyframes stith-revelar-respaldo { to { opacity: 1; } }

/* La barra de arriba y la de abajo NO son paneles de contenido: con el cristal transparente, el titulo de la pagina se
   veia borroso a traves de la barra al hacer scroll. Llevan relleno solido para leerse siempre. */
html.cristal :is(.stith-nav, .stith-dock).glass { background: var(--v-panel-fuerte) !important; }
html[data-theme="dark"].cristal :is(.stith-nav, .stith-dock).glass { background: rgba(18, 9, 34, .9) !important; }
@media (max-width: 640px) {
  /* Burbuja de WhatsApp mas pequeña en el celular: tapaba contenido */
  #wa-support-bubble { width: 50px !important; height: 50px !important; }
  #wa-support-bubble svg { width: 24px !important; height: 24px !important; }
}

/* Pastilla del perfil en la barra: el nombre y la flecha no se salen del borde (nombre largo = "…") */
#profile-dropdown-wrapper { flex-shrink: 0; min-width: 0; }
#profile-dropdown-wrapper > div:first-child { max-width: 15rem; padding-right: .55rem !important; }
#profile-dropdown-wrapper > div:first-child > .text-left { min-width: 0; max-width: 9.5rem; }
#profile-dropdown-wrapper > div:first-child > .text-left p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#profile-chevron { flex-shrink: 0; }
/* En pantallas medianas las pildoras del menu ocupan casi todo el ancho: el perfil muestra solo la foto (el nombre esta
   al abrir el menu del perfil), en vez de salirse de la barra. */
@media (max-width: 1499px) { #profile-dropdown-wrapper > div:first-child > .text-left, #profile-chevron { display: none !important; } }

/* ---------- Selector de ciudad (#loc-panel): buscador moderno y lista que no se encima ----------
   Antes la lista de sugerencias quedaba transparente (la regla de vidrio convierte los fondos oscuros bg-[#...]) y las
   ciudades se dibujaban encima de "Departamento" y "Ciudad". Ahora la lista es una tarjeta solida que flota por encima
   de todo. Solo aspecto: los ids, los onclick y el script del cambio de ciudad (zona protegida) no cambian. */
#loc-panel { width: min(calc(100vw - 2rem), 360px) !important; max-width: none !important; padding: 1.1rem !important; }
#loc-panel > p { font-size: 10px !important; letter-spacing: .16em !important; font-weight: 800 !important;
  color: color-mix(in srgb, var(--g-ink) 60%, transparent) !important; margin-bottom: .45rem !important; }
#loc-panel :is(#buscar-ciudad-input, #sel-depto, #sel-ciudad) {
  height: 46px; border-radius: 14px !important; font-size: 15px !important; color: var(--g-ink) !important;
  background-color: color-mix(in srgb, var(--v-panel-fuerte) 92%, transparent) !important; border: 1px solid var(--cr-borde) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06) !important; transition: border-color .2s, box-shadow .2s;
}
#loc-panel :is(#buscar-ciudad-input, #sel-depto, #sel-ciudad):focus {
  outline: none !important; border-color: var(--v-acento) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--v-acento) 18%, transparent) !important;
}
/* Lupa dentro del buscador */
#loc-panel #buscar-ciudad-input {
  padding-left: 2.6rem !important; background-repeat: no-repeat !important; background-position: .9rem center !important; background-size: 18px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c3aed' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-4.35-4.35M17 11a6 6 0 11-12 0 6 6 0 0112 0z'/%3E%3C/svg%3E") !important;
}
#loc-panel #buscar-ciudad-input::placeholder { color: color-mix(in srgb, var(--g-ink) 45%, transparent); }
/* Combos con flecha propia */
#loc-panel :is(#sel-depto, #sel-ciudad) {
  -webkit-appearance: none; appearance: none; padding-right: 2.4rem !important; cursor: pointer;
  background-repeat: no-repeat !important; background-position: right .9rem center !important; background-size: 16px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%237c3aed' stroke-width='2.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") !important;
}
html[data-theme="dark"] #loc-panel :is(#sel-depto, #sel-ciudad) option { background: #1a0d33; color: #f5f0ff; }
/* La lista de sugerencias: tarjeta SOLIDA, por encima de los combos */
#loc-panel #buscar-ciudad-sugerencias {
  z-index: 70 !important; margin-top: .4rem !important; max-height: 15rem !important; padding: .35rem !important;
  border-radius: 16px !important; border: 1px solid var(--cr-borde) !important;
  background: #ffffff !important; box-shadow: 0 18px 40px -12px rgba(76, 29, 149, .45) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
html[data-theme="dark"] #loc-panel #buscar-ciudad-sugerencias { background: #1a0d33 !important; box-shadow: 0 20px 44px -10px rgba(0, 0, 0, .8) !important; }
#loc-panel #buscar-ciudad-sugerencias > div {
  display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; padding: .7rem .8rem !important; border-radius: 11px;
  font-size: .9rem !important; font-weight: 700; color: var(--g-ink) !important; background: transparent !important;
}
#loc-panel #buscar-ciudad-sugerencias > div > span { font-size: .68rem !important; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--g-ink) 55%, transparent) !important; white-space: nowrap; }
#loc-panel #buscar-ciudad-sugerencias > div:hover { background: color-mix(in srgb, var(--v-acento) 12%, transparent) !important; }
#loc-panel #buscar-ciudad-sugerencias > div + div { box-shadow: 0 -1px 0 color-mix(in srgb, var(--g-ink) 7%, transparent); }
/* Boton Aplicar: pildora principal */
#loc-panel > button {
  height: 46px; border-radius: 999px !important; font-size: .85rem !important; letter-spacing: .06em !important;
  background: var(--v-tinta) !important; background-color: var(--v-tinta-solida) !important; box-shadow: var(--v-sombra-tinta);
}
/* En celular el panel se ancla a los bordes de la pantalla (antes se salia por la izquierda). */
@media (max-width: 640px) {
  #loc-panel { position: fixed !important; left: 1rem !important; right: 1rem !important; top: 5.25rem !important; width: auto !important; }
}
/* En computador se abre alineado a la derecha del selector: el selector esta al final de la barra y, abierto hacia la
   derecha, el panel se salia de la pantalla. */
@media (min-width: 641px) { #loc-panel { left: auto !important; right: 0 !important; top: 3.1rem !important; } }

/* ---------- Burbuja de WhatsApp: cristal translucido (modo espejo) ----------
   Antes era morada solida y tapaba por completo las palabras que quedaban debajo. Con el diseño de cristal se vuelve
   translucida y desenfoca lo de atras: se sigue leyendo que hay texto detras en vez de un bloque opaco. Solo cambia
   el aspecto; el arrastre y el enlace de WhatsApp (base.html) no se tocan. */
html.cristal #wa-support-bubble {
  background: linear-gradient(135deg, rgba(139, 92, 246, .40), rgba(109, 40, 217, .44)) !important;
  backdrop-filter: blur(14px) saturate(165%); -webkit-backdrop-filter: blur(14px) saturate(165%);
  box-shadow: 0 12px 30px -8px rgba(124, 58, 237, .5), inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 0 1px rgba(255, 255, 255, .20) !important;
}
html.cristal #wa-support-bubble:hover { box-shadow: 0 16px 38px -8px rgba(124, 58, 237, .65), inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(255, 255, 255, .28) !important; }
html.cristal #wa-support-bubble svg { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); }
html.cristal #wa-support-bubble .wa-ring { border-color: rgba(167, 139, 250, .6); }
/* Celular/equipo modesto: sin desenfoque en vivo (costoso), pero igual translucida para no tapar el texto del todo. */
html.g-lite.cristal #wa-support-bubble { backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(135deg, rgba(139, 92, 246, .74), rgba(109, 40, 217, .78)) !important; }
/* Mientras se arrastra no se recalcula el desenfoque en cada movimiento (eso la trababa en PC): queda casi solida y
   al soltarla vuelve el cristal. */
html.cristal #wa-support-bubble.dragging { backdrop-filter: none; -webkit-backdrop-filter: none;
  background: linear-gradient(135deg, rgba(139, 92, 246, .82), rgba(109, 40, 217, .86)) !important; }