/* =========================================================
   Maxolan · Estilo CRISTAL (glassmorphism)
   Fondo degradado violeta → lila con burbujas de luz,
   paneles de cristal esmerilado y botones con icono "gema".
   Se carga DESPUÉS de app/styles.css y lo sobrescribe.
   ========================================================= */
:root {
  --fondo-a: #5F6FF0;
  --fondo-b: #8E78EE;
  --fondo-c: #C58CE8;
  --cristal: rgba(255, 255, 255, 0.20);
  --cristal-fuerte: rgba(255, 255, 255, 0.78);
  --borde-cristal: rgba(255, 255, 255, 0.55);
  --ink: #2C2668;          /* texto dentro de paneles claros */
  --muted: #5E5A8C;
  --line: rgba(44, 38, 104, 0.12);
  --pearl: rgba(255, 255, 255, 0.55);
  --sombra: 0 18px 40px -22px rgba(40, 30, 120, 0.55);
  --radius: 22px;
  --radius-s: 16px;
  --cta-a: #FFFFFF; --cta-b: #F1ECFF;
}

/* Fondo con burbujas de luz */
html { background: var(--fondo-a); }
body {
  color: #fff;
  background: linear-gradient(140deg, var(--fondo-a) 0%, var(--fondo-b) 48%, var(--fondo-c) 100%) fixed;
  min-height: 100vh; position: relative; isolation: isolate;
}
body::before, body::after {
  content: ""; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(2px);
}
body::before {
  width: 62vmax; height: 62vmax; left: -18vmax; bottom: -22vmax;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.62) 0%, rgba(236,232,255,.5) 30%, rgba(160,150,255,.28) 62%, transparent 72%);
}
body::after {
  width: 48vmax; height: 48vmax; right: -16vmax; top: 18vh;
  background: radial-gradient(circle at 45% 50%, rgba(255,120,170,.75) 0%, rgba(255,200,225,.6) 35%, rgba(255,255,255,.55) 55%, transparent 70%);
}
.cielo-burbuja { position: fixed; z-index: -1; width: 40vmax; height: 40vmax; left: 22vw; top: -14vmax; border-radius: 50%;
  background: radial-gradient(circle, rgba(120,225,255,.85) 0%, rgba(200,245,255,.6) 35%, rgba(255,255,255,.5) 55%, transparent 70%); pointer-events: none; }

/* Cabecera de cristal */
.top { background: rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.35);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.brand, .brand-sub { color: #fff; }
.brand-sub { opacity: .85; }
.live { color: #fff; }
.live-dot { background: #7CF2B8; box-shadow: 0 0 0 3px rgba(124,242,184,.35); }
.nav button { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.45); color: #fff; }
.nav button:not(:disabled):hover { background: rgba(255,255,255,.35); }

/* Textos sobre el fondo */
.saludo p, .sub, .ctx { color: rgba(255,255,255,.88); text-shadow: 0 1px 2px rgba(40,30,120,.35); }
.saludo h1, .vh h1, .sec-t, .q { color: #fff; text-shadow: 0 2px 12px rgba(40,30,120,.25); }
.saludo h1 em { color: rgba(255,255,255,.82); }
.saludo a, .saludo p a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Botonera de cristal con icono gema ---------- */
.tile.g, .eq.g, .lz a.g {
  background: var(--cristal); color: #fff; border: 1px solid var(--borde-cristal);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), var(--sombra);
}
.tile.g:hover, .eq.g:hover, .lz a.g:hover { background: rgba(255,255,255,.3); transform: translateY(-2px); }
.tile .t, .eq .t, .lz b { color: #fff; text-shadow: 0 1px 3px rgba(40,30,120,.35); }
.tile .s { color: rgba(255,255,255,.92); opacity: 1; text-shadow: 0 1px 2px rgba(40,30,120,.3); }
.tile .n { color: #fff; position: absolute; top: 16px; right: 20px; font-size: 52px; text-shadow: 0 2px 10px rgba(40,30,120,.25); }
.tile { min-height: 168px; justify-content: flex-end; gap: 12px; padding-top: 96px; }
.tile.wide { min-height: 176px; }

/* Caja blanca con la gema de color dentro */
.ico-box {
  position: absolute; top: 18px; left: 18px; width: 64px; height: 64px; border-radius: 20px;
  background: linear-gradient(160deg, #fff 0%, rgba(255,255,255,.86) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -10px rgba(40,30,120,.55), inset 0 -2px 6px rgba(120,110,200,.18);
}
.gema {
  width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 24%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,0) 22%),
    linear-gradient(160deg, color-mix(in srgb, var(--gem) 55%, #fff) 0%, var(--gem) 70%);
  box-shadow: 0 6px 12px -4px color-mix(in srgb, var(--gem) 70%, transparent), inset 0 -3px 6px rgba(0,0,0,.12);
  color: #fff;
}
.gema svg { width: 21px; height: 21px; position: static !important; opacity: 1 !important; filter: drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.g-rosa { --gem: #F0489B; } .g-rojo { --gem: #F04B5E; } .g-cielo { --gem: #2F8CF0; }
.g-verde { --gem: #1FBF78; } .g-naranja { --gem: #FF7A3D; } .g-lavanda { --gem: #8B5CF6; }
.g-mantequilla { --gem: #F2AE12; } .g-aqua { --gem: #12B5C6; } .g-perla { --gem: #6E7CA8; }
.tile .badge { background: #fff; color: var(--ink); }
.pulse { top: 30px; right: auto; left: 70px; background: #F04B5E; z-index: 2; box-shadow: 0 0 0 3px #fff; }
.pulse::after { border-color: #F04B5E; }

/* Equipos (app clínicas) */
.eq { min-height: 150px; padding: 96px 18px 18px; position: relative; align-items: flex-end; }

/* ---------- Paneles de cristal claros (texto oscuro) ---------- */
.card, .box, .conv, .empty, .next, .albaran, .qa, .steps, .form:not(.sin-panel), .movil, .pie a, .horario, .alerta {
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2);
}
.card, .box, .conv, .empty, .next, .albaran, .movil {
  background: var(--cristal-fuerte); border: 1px solid var(--borde-cristal); color: var(--ink); box-shadow: var(--sombra);
}
.card .eq, .card .meta, .box .lbl, .empty, .next .q span, .hist span { color: var(--muted); }
a.card:hover { border-color: #fff; background: rgba(255,255,255,.9); }
.qa { background: var(--cristal-fuerte); border-radius: var(--radius); padding: 4px 16px; color: var(--ink); box-shadow: var(--sombra); }
.qa li { border-color: var(--line); }
.qa li span { color: var(--muted); }
.steps { background: var(--cristal-fuerte); border-radius: var(--radius); padding: 8px 18px; color: var(--ink); box-shadow: var(--sombra); }
.steps li span { color: var(--muted); }
.hist { background: var(--cristal-fuerte); border-radius: var(--radius); padding: 10px 18px; color: var(--ink); box-shadow: var(--sombra); }
.next .hora { color: var(--ink); }
.horario { background: rgba(255,246,214,.85); border: 1px solid rgba(255,255,255,.6); }
.alerta { background: rgba(255,226,230,.9); }

/* Formularios en panel de cristal */
.form { background: var(--cristal-fuerte); border: 1px solid var(--borde-cristal); border-radius: var(--radius); padding: 22px; color: var(--ink); box-shadow: var(--sombra); }
.form label { color: var(--ink); }
.form input, .form select, .form textarea { background: rgba(255,255,255,.92); border-color: rgba(44,38,104,.15); }

/* Botón principal: blanco brillante con texto índigo */
.cta { background: linear-gradient(180deg, #fff 0%, #F1ECFF 100%); color: #4A3BC4; box-shadow: 0 14px 28px -14px rgba(40,30,120,.7), inset 0 -2px 0 rgba(120,100,230,.15); }
.cta:hover { box-shadow: 0 18px 32px -14px rgba(40,30,120,.8); }

/* Chips, islas y acciones */
.chip, .islas button { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); color: #fff;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.chip[aria-pressed="true"], .islas button[aria-pressed="true"] { background: #fff; color: var(--ink); border-color: #fff; }
.isla-pick button, .prio-pick button, .accion, .slot-btn { box-shadow: var(--sombra); }
.opt { background: rgba(255,255,255,.8); border-color: rgba(255,255,255,.7); color: var(--ink); box-shadow: var(--sombra); }
.progress span { background: rgba(255,255,255,.35); }
.progress span.on { background: #fff; }
.slots .dia { color: rgba(255,255,255,.9); }
.slots button { background: rgba(255,255,255,.85); }
.accion.peligro { background: rgba(255,255,255,.85); }
.band { box-shadow: 0 6px 16px -8px rgba(40,30,120,.5); }

/* Pie y avisos flotantes */
.pie a { background: rgba(255,255,255,.2) !important; border: 1px solid var(--borde-cristal); color: #fff; }
.pie a span { color: rgba(255,255,255,.85); }
.toast { background: rgba(255,255,255,.92); color: var(--ink); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* Navegadores sin cristal esmerilado: paneles algo más opacos */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .tile.g, .eq.g, .lz a.g { background: rgba(255,255,255,.28); }
}

/* Al imprimir el albarán: papel blanco */
@media print {
  html, body { background: #fff !important; color: #000; }
  body::before, body::after, .cielo-burbuja { display: none; }
  .albaran { box-shadow: none; background: #fff; }
}

.tile .badge { top: 36px; right: auto; left: 96px; }

/* Legibilidad: cristal con un toque lila para que el texto blanco se lea siempre */
.tile.g, .eq.g, .lz a.g { background: linear-gradient(160deg, rgba(255,255,255,.26) 0%, rgba(104,92,226,.26) 100%); }
.tile.g:hover, .eq.g:hover, .lz a.g:hover { background: linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(104,92,226,.3) 100%); }
.tile .t, .eq .t, .lz b, .tile .n { text-shadow: 0 1px 3px rgba(30,20,90,.55); }
.tile .s, .lz span:not(.ico-box):not(.gema) { color: #fff; text-shadow: 0 1px 2px rgba(30,20,90,.55); }
main > p a[href^="tel"] { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; }
main > p { text-shadow: 0 1px 2px rgba(30,20,90,.4); }

/* ---------- Mini mapa de Canarias (se ilumina la isla activa) ---------- */
.cabeza { margin-bottom: 14px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 12px 28px; align-items: center; }
.cabeza .saludo { margin-bottom: 18px; }
.mapa-islas { position: relative; padding: 10px 6px 26px; align-self: end; }
.cabeza .islas { margin-bottom: 0; }
.mapa-islas svg { display: block; width: 100%; height: auto; overflow: visible; }
.mi-off { fill: rgba(255,255,255,.10); stroke: rgba(255,255,255,.28); stroke-width: 1; }
.mi-isla .mi-forma { fill: rgba(255,255,255,.14); stroke: rgba(255,255,255,.45); stroke-width: 1.2; transition: fill .4s, stroke .4s; }
.mi-isla .mi-glow { fill: none; stroke: none; }
.mi-isla .mi-gema { fill: rgba(255,255,255,.35); transition: fill .4s; }
.mi-isla .mi-brillo { fill: rgba(255,255,255,0); }
.mi-isla.on .mi-forma { fill: color-mix(in srgb, var(--gem) 78%, #fff); stroke: #fff; stroke-width: 1.6; }
.mi-isla.on .mi-glow { fill: var(--gem); filter: blur(9px); opacity: .9; animation: mi-latido 2.6s ease-in-out infinite; }
.mi-isla.on .mi-gema { fill: #fff; filter: drop-shadow(0 0 4px var(--gem)); }
.mi-isla.on .mi-brillo { fill: var(--gem); }
.mapa-islas.clic .mi-isla { cursor: pointer; outline: none; }
.mapa-islas.clic .mi-isla:hover .mi-forma, .mapa-islas.clic .mi-isla:focus-visible .mi-forma { stroke: #fff; stroke-width: 2.2; }
.mi-nombre { position: absolute; right: 8px; bottom: 0; font: italic 400 22px "Instrument Serif", serif; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }
@keyframes mi-latido { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .mi-isla.on .mi-glow { animation: none; } }
@media (max-width: 720px) {
  .cabeza { grid-template-columns: 1fr; }
  .cabeza .saludo { margin-bottom: 0; }
  .cabeza-izq { display: contents; }
  .cabeza .saludo { order: 1; } .cabeza .mapa-islas { order: 2; } .cabeza .islas { order: 3; margin: 0; }
  .cabeza .mapa-islas { max-width: 320px; width: 100%; margin: 0 0 6px auto; padding-top: 0; }
}

/* ---------- Textos legales ---------- */
.legal-links { text-align: center; font-size: 13px; margin: 14px 0 0; opacity: .85; }
.legal-links a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.form .check { display: flex !important; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; line-height: 1.45; }
.form .check input { width: 22px; height: 22px; min-height: 0; flex: none; margin-top: 1px; accent-color: #E23FC6; }
.form .check a, .info-datos a { color: #FFD24A; }
.info-datos { font-size: 12.5px; line-height: 1.5; opacity: .8; margin: 14px 0 0; }
.pie .legal-links a { display: inline; min-height: 0; padding: 0; border: 0; background: none !important; box-shadow: none; font-weight: 500; font-size: 13px; color: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }

/* ---------- Acceso del equipo ---------- */
#acceso { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(22, 10, 54, .78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
#acceso .acceso-caja { width: 100%; max-width: 420px; }
#acceso h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; margin: 0 0 6px; }
/* Botones de isla más compactos para que quepan las 5 sedes en una fila */
.islas { gap: 6px; }
.islas button { padding: 0 13px; font-size: 14.5px; }