/* =====================================================================================
   YAKUX · diseño "visionOS" (boceto 3, 21 oct 2026). Va DESPUÉS de styles.css y panel.css
   y solo cambia el aspecto: la estructura y el funcionamiento siguen siendo los mismos.
   - Una ventana de cristal flota sobre un fondo (luces de marca, fotos del mar o una propia).
   - Menú en cápsula de iconos redondos. La barra de arriba no tiene fondo: sus piezas flotan.
   - Botones de cristal transparente: apagados en reposo, se encienden al pasar el ratón/pulsar.
   - Color de marca (azul #547bff, verde #05b88c) solo en velos y detalles suaves.
   ===================================================================================== */
:root {
  --brand-blue: #547bff;
  --brand-green: #05b88c;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);
}
:root[data-theme="dark"] {
  --bg: #05070b;
  --surface: rgba(255, 255, 255, .055);
  --surface-2: rgba(255, 255, 255, .04);
  --glass: rgba(255, 255, 255, .055);
  --glass-solid: rgba(16, 18, 26, .74);
  --glass-edge: rgba(255, 255, 255, .1);
  --glass-hi: rgba(255, 255, 255, .08);
  --chip-bg: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .06);
  --ink: #ffffff;
  --ink-2: rgba(255, 255, 255, .8);
  --muted: rgba(255, 255, 255, .56);
  --faint: rgba(255, 255, 255, .3);
  --shadow: none;
  --tile: rgba(255, 255, 255, .055);
  --tile-edge: inset 0 0 0 1px rgba(255, 255, 255, .075), inset 0 1px 0 rgba(255, 255, 255, .07);
  --win: rgba(8, 10, 16, .42);
  --win-edge: rgba(255, 255, 255, .2);
  --material: rgba(14, 16, 22, .5);
  --heavy: rgba(16, 18, 26, .74);
  --sh-float: 0 40px 100px -24px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .14);
  --cg-fill: rgba(255, 255, 255, .035); --cg-rim: rgba(255, 255, 255, .34); --cg-top: rgba(255, 255, 255, .55); --cg-glow: rgba(255, 255, 255, .14);
  --lg-spec: rgba(255, 255, 255, .32);
  --tx-blue: #b9caff; --tx-green: #9df0d6; --tx-red: #ffb8b1;
  --env:
    radial-gradient(55% 45% at 12% 18%, rgba(84, 123, 255, .38), transparent 70%),
    radial-gradient(45% 45% at 88% 82%, rgba(5, 184, 140, .3), transparent 70%),
    radial-gradient(30% 28% at 72% 10%, rgba(255, 214, 170, .14), transparent 70%),
    radial-gradient(40% 35% at 40% 95%, rgba(50, 80, 190, .28), transparent 70%),
    linear-gradient(160deg, #070b1c 0%, #05141a 55%, #020305 100%);
  --bg-shade: linear-gradient(180deg, rgba(3, 7, 15, .28), rgba(3, 7, 15, .5));
}
:root:not([data-theme="dark"]) {
  --bg: #eef3fb;
  --surface: rgba(255, 255, 255, .28);
  --surface-2: rgba(255, 255, 255, .22);
  --glass: rgba(255, 255, 255, .28);
  --glass-solid: rgba(250, 251, 255, .7);
  --glass-edge: rgba(255, 255, 255, .7);
  --glass-hi: rgba(255, 255, 255, .9);
  --chip-bg: rgba(255, 255, 255, .34);
  --line: rgba(16, 22, 38, .1);
  --line-2: rgba(16, 22, 38, .06);
  --ink: #101626;
  --ink-2: rgba(16, 22, 38, .78);
  --muted: rgba(16, 22, 38, .55);
  --faint: rgba(16, 22, 38, .3);
  --shadow: none;
  --tile: rgba(255, 255, 255, .28);
  --tile-edge: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 1px 2px rgba(30, 50, 110, .05);
  --win: rgba(255, 255, 255, .14);
  --win-edge: rgba(255, 255, 255, .7);
  --material: rgba(255, 255, 255, .3);
  --heavy: rgba(250, 251, 255, .62);
  --sh-float: 0 40px 100px -30px rgba(30, 50, 110, .35), inset 0 0 0 1px rgba(255, 255, 255, .8);
  --cg-fill: rgba(255, 255, 255, .05); --cg-rim: rgba(255, 255, 255, .75); --cg-top: rgba(255, 255, 255, .95); --cg-glow: rgba(255, 255, 255, .28);
  --lg-spec: rgba(255, 255, 255, .75);
  --tx-blue: #2a4bd0; --tx-green: #04805f; --tx-red: #c7362c;
  --env:
    radial-gradient(55% 45% at 12% 18%, rgba(84, 123, 255, .45), transparent 70%),
    radial-gradient(45% 45% at 88% 82%, rgba(5, 184, 140, .4), transparent 70%),
    radial-gradient(30% 28% at 72% 10%, rgba(255, 220, 180, .45), transparent 70%),
    linear-gradient(160deg, #dfe7ff 0%, #e6f6f1 55%, #f3f1ec 100%);
  --bg-shade: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(238, 245, 255, .28));
}
body { background: var(--env) fixed, var(--bg); }

/* ---------- fondo ---------- */
.ambient { display: none; }
.env { position: fixed; inset: 0; z-index: -2; background: var(--env); overflow: hidden; pointer-events: none; }
.env i { position: absolute; border-radius: 50%; filter: blur(var(--b, 30px)); opacity: var(--o, .6); animation: env-float var(--d, 30s) ease-in-out infinite alternate; }
:root:not([data-theme="dark"]) .env i { --o: .5; }
.env::after { content: ""; position: absolute; inset: 0; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes env-float { to { transform: translate(var(--tx, 40px), var(--ty, -30px)) scale(1.08); } }
:root[data-bg]:not([data-bg="luces"]) .env { background: var(--bg-shade), var(--bg-img, none) center / cover no-repeat, #0b1230; }
:root[data-bg]:not([data-bg="luces"]) .env i { opacity: 0; }

/* ---------- superficies ---------- */
.glass, .panel, .rows, .pipe, .rep, .rank-row, .pool, .empty-box, .p-block, .toolbar, .board .col {
  background: var(--tile); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0; box-shadow: var(--tile-edge);
}
.board .col { background: var(--surface-2); }
.drawer, .modal, .p-visor-caja {
  background: var(--heavy); -webkit-backdrop-filter: blur(50px) saturate(170%); backdrop-filter: blur(50px) saturate(170%);
  border: 0; box-shadow: var(--sh-float);
}
.scrim { background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: none; backdrop-filter: none; }
.toast { background: var(--heavy); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); border: 0; box-shadow: var(--sh-float); }
.hero-glow { opacity: .45; }
.row:hover { background: rgba(255, 255, 255, .05); }
:root:not([data-theme="dark"]) .row:hover { background: rgba(255, 255, 255, .3); }
.row.is-open { background: color-mix(in srgb, var(--brand-blue) 22%, transparent); box-shadow: inset 0 0 0 1px rgba(168, 188, 255, .3); }
input, select, textarea { background: var(--chip-bg); border-color: var(--line); }
select option { background: #11131a; color: #fff; }
:root:not([data-theme="dark"]) select option { background: #fff; color: #101626; }
.av { background: linear-gradient(135deg, #3f6bff, #05b88c); border-radius: 50%; }

/* ---------- estructura: cápsula + ventana ---------- */
.shell { grid-template-columns: 92px minmax(0, 1fr); gap: 0; padding: 0; max-width: none; margin: 0; min-height: 100dvh; }
.side {
  position: sticky; top: 0; height: 100dvh; padding: 16px 0; border-radius: 0; gap: 12px;
  display: flex; flex-direction: column; align-items: center;
  background: none !important; box-shadow: none !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.side .brand-row { padding: 0; margin: 0 0 4px; justify-content: center; }
.side .brand-row img { width: 40px; height: auto; filter: drop-shadow(0 6px 16px rgba(84, 123, 255, .5)); }
.side .nav {
  margin: 0; flex: 0 1 auto; width: 60px; padding: 8px; border-radius: 30px; overflow-y: auto; overflow-x: visible; scrollbar-width: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: var(--material); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--win-edge), inset 0 1px 0 var(--win-edge), 0 18px 40px -16px rgba(0, 0, 0, .45);
}
.side .nav::-webkit-scrollbar { display: none; }
.side .nav button {
  position: relative; flex: none; width: 44px; height: 44px; padding: 0; gap: 0; justify-content: center; border-radius: 50%;
  color: var(--muted); background: transparent;
  transition: background-color 200ms ease, box-shadow 240ms ease, color 200ms ease, transform 120ms var(--ease-out);
}
.side .nav button span { display: none; }
.side .nav button .ic { width: 20px; height: 20px; }
.side .nav button[aria-current="page"]::before { display: none; }
.side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.side-btn {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  background: var(--material); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%);
  box-shadow: inset 0 0 0 1px var(--win-edge), inset 0 1px 0 var(--win-edge), 0 18px 40px -16px rgba(0, 0, 0, .45);
  transition: background-color 200ms ease, box-shadow 240ms ease, color 200ms ease, transform 120ms var(--ease-out);
}
.side-btn .av { width: 38px; height: 38px; font-size: 15px; }
.side-btn .ic { width: 19px; height: 19px; }
/* Iconos del menú: apagados; se encienden al pasar el ratón; azul al pulsar y en la sección abierta */
@media (hover: hover) and (pointer: fine) {
  .side .nav button:not([aria-current="page"]):hover, .side-btn:hover {
    background: rgba(255, 255, 255, .1); color: var(--ink);
    box-shadow: inset 0 0 0 1px var(--cg-rim), inset 0 1.5px 1px -.5px var(--cg-top), inset 0 0 10px var(--cg-glow), 0 0 18px -3px rgba(255, 255, 255, .45);
  }
  :root:not([data-theme="dark"]) .side .nav button:not([aria-current="page"]):hover, :root:not([data-theme="dark"]) .side-btn:hover { background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px #fff, inset 0 1.5px 1px -.5px #fff, 0 8px 18px -8px rgba(30, 40, 80, .35); }
}
.side .nav button:active, .side-btn:active, .side .nav button[aria-current="page"] {
  background: rgba(84, 123, 255, .2); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(138, 166, 255, .65), inset 0 1.5px 1px -.5px var(--cg-top), inset 0 0 12px rgba(84, 123, 255, .35), 0 0 20px -2px rgba(84, 123, 255, .65), 0 6px 16px -8px rgba(84, 123, 255, .8);
}
:root:not([data-theme="dark"]) :is(.side .nav button:active, .side-btn:active, .side .nav button[aria-current="page"]) { background: rgba(84, 123, 255, .16); color: #2a4bd0; }
.side .nav button:active, .side-btn:active { transform: scale(.92); }
.side .nav button[aria-current="page"] .ic { filter: drop-shadow(0 0 6px rgba(138, 166, 255, .8)); }
.side .nav button.arrastrando { background: var(--heavy); box-shadow: var(--sh-float); }
@media (max-height: 880px) { .side .nav button { width: 38px; height: 38px; } .side .nav { width: 54px; padding: 6px; gap: 2px; } .side { gap: 10px; padding: 12px 0; } }
.nav-tip { position: fixed; z-index: 120; left: 0; top: 0; padding: 7px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink); background: var(--heavy); -webkit-backdrop-filter: blur(30px) saturate(170%); backdrop-filter: blur(30px) saturate(170%); box-shadow: var(--sh-float); pointer-events: none; opacity: 0; transform: translateX(-4px) scale(.97); transform-origin: left center; transition: opacity 140ms ease, transform 180ms var(--ease-out); white-space: nowrap; }
.nav-tip.on { opacity: 1; transform: none; }
.nav-tip.instant { transition: none; }

/* La ventana: el cristal va en una capa propia (::before) para no atrapar las capas fijas */
.main-wrap {
  position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0;
  margin: 16px 20px 16px 0; height: calc(100dvh - 32px); border-radius: 36px; overflow: hidden;
  background: var(--win); box-shadow: inset 0 0 0 1px var(--win-edge), inset 0 1px 0 var(--win-edge), 0 50px 120px -40px rgba(0, 0, 0, .65);
}
.main-wrap::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  -webkit-backdrop-filter: blur(48px) saturate(140%) brightness(1.04); backdrop-filter: blur(48px) saturate(140%) brightness(1.04); }
.topbar {
  flex: none; position: relative; z-index: 5; display: flex; align-items: center; gap: 12px;
  grid-template-areas: none; padding: 18px 26px 12px; background: transparent;
}
.hello { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hello h1 { margin: 0; line-height: 1.15; }
.hello-greeting { margin: 0; font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -.012em; }
.hello-date { font-size: 13px; color: var(--muted); }
.top-context { display: none; }
.top-tools { display: flex; align-items: center; gap: 8px; align-self: center; }
.main {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  padding: 6px 26px 40px; max-width: none; width: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0, #000 calc(100% - 26px), transparent 100%);
}
.main.is-scrolled {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 26px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 30px, #000 calc(100% - 26px), transparent 100%);
}
.main::-webkit-scrollbar { width: 8px; } .main::-webkit-scrollbar-thumb { background: var(--line); border-radius: 99px; }
.m-brand { display: none; }

/* Hora y tiempo: burbuja de cristal */
.wx {
  position: relative; isolation: isolate; height: 36px; padding: 0 14px; gap: 9px; border: 0;
  background: var(--cg-fill) !important; -webkit-backdrop-filter: blur(1.5px) saturate(165%); backdrop-filter: blur(1.5px) saturate(165%);
  box-shadow: inset 0 0 0 1px var(--cg-rim), inset 0 1.5px 1px -.5px var(--cg-top), inset 0 0 12px var(--cg-glow), inset 0 -3px 8px -4px var(--cg-glow), 0 12px 26px -12px rgba(0, 0, 0, .6) !important;
  transition: transform 200ms var(--ease-out), box-shadow 200ms ease, background-color 300ms ease;
}
.wx-hora { font-size: 15px; }
.wx-tiempo, .wx-ciudad { border-left-color: var(--cg-rim); }
.wx-tiempo .ic { color: #8aa6ff; }
.wx::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 120% at var(--mx, 50%) var(--my, 0%), var(--lg-spec), transparent 60%); opacity: 0; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .wx:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .08) !important; }
  .wx:hover::before { opacity: .6; }
}
.wx:active { transform: scale(.98); }

/* ---------- interruptor de tema "Glass Toggle" ---------- */
.theme-toggle {
  --w: 116px; --h: 34px; --kw: 50px; --kh: 44px; --pad: 2px;
  position: relative; isolation: isolate; flex: none; width: var(--w); height: var(--h); border-radius: 999px; cursor: pointer;
  background: rgba(0, 0, 0, .42);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 1px 0 rgba(255, 255, 255, .08);
  transition: background-color 300ms ease, box-shadow 300ms ease, transform 200ms var(--ease-out);
  view-transition-name: theme-toggle;
}
:root:not([data-theme="dark"]) .theme-toggle { background: rgba(255, 255, 255, .45); box-shadow: inset 0 2px 6px rgba(30, 40, 80, .18), inset 0 0 0 1px rgba(255, 255, 255, .8), 0 1px 0 rgba(255, 255, 255, .6); }
.tt-label { position: absolute; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; letter-spacing: -.01em; transition: opacity 220ms ease, transform 300ms var(--ease-out); pointer-events: none; }
.tt-dark { left: 15px; color: rgba(255, 255, 255, .78); }
.tt-light { right: 17px; color: rgba(16, 22, 38, .7); }
:root[data-theme="dark"] .tt-light, :root:not([data-theme="dark"]) .tt-dark { opacity: 0; transform: translateY(-50%) scale(.92); }
.tt-knob {
  position: absolute; top: calc((var(--h) - var(--kh)) / 2); left: var(--pad); width: var(--kw); height: var(--kh); border-radius: 17px;
  display: grid; place-items: center; background: rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(1px) saturate(170%) brightness(1.1); backdrop-filter: blur(1px) saturate(170%) brightness(1.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), inset 0 1.5px 1px -.5px rgba(255, 255, 255, .7), inset 0 0 14px rgba(255, 255, 255, .16), inset 0 -4px 10px -6px rgba(255, 255, 255, .3), 0 12px 22px -8px rgba(0, 0, 0, .65);
  transform: translateX(0); transition: transform 520ms cubic-bezier(.3, 1.3, .5, 1);
}
:root[data-theme="dark"] .tt-knob { transform: translateX(calc(var(--w) - var(--kw) - var(--pad) * 2)); }
:root:not([data-theme="dark"]) .tt-knob { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85), inset 0 1.5px 1px -.5px #fff, inset 0 0 14px rgba(255, 255, 255, .45), 0 12px 22px -10px rgba(30, 40, 80, .4); }
.tt-knob.stretch { animation: tt-stretch 520ms cubic-bezier(.3, .7, .4, 1); }
@keyframes tt-stretch { 0% { scale: 1 1; } 35% { scale: 1.22 .9; } 70% { scale: .96 1.04; } 100% { scale: 1 1; } }
.tt-knob .ic { grid-area: 1 / 1; width: 20px; height: 20px; transition: opacity 260ms ease, transform 420ms var(--ease-out); }
.tt-moon { color: #fff; fill: currentColor; stroke: none; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); }
.tt-sun { color: #f5a524; stroke-width: 2.1; filter: drop-shadow(0 0 6px rgba(255, 190, 80, .7)); }
:root[data-theme="dark"] .tt-sun { opacity: 0; transform: rotate(-90deg) scale(.5); }
:root:not([data-theme="dark"]) .tt-moon { opacity: 0; transform: rotate(90deg) scale(.5); }
.theme-toggle::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(90% 120% at var(--mx, 50%) var(--my, 0%), var(--lg-spec), transparent 60%); opacity: 0; transition: opacity 200ms ease; }
@media (hover: hover) and (pointer: fine) {
  .theme-toggle:hover { transform: translateY(-1px); }
  .theme-toggle:hover::before { opacity: .35; }
  .theme-toggle:hover .tt-moon { filter: drop-shadow(0 0 10px rgba(255, 255, 255, .95)); }
  :root:not([data-theme="dark"]) .theme-toggle:hover .tt-sun { filter: drop-shadow(0 0 10px rgba(255, 190, 80, .95)); transform: rotate(25deg); }
}
.theme-toggle:active .tt-knob { scale: .95; }
::view-transition-old(theme-toggle) { display: none; }
::view-transition-new(theme-toggle) { animation: none; }

/* ---------- selector de fondo ---------- */
.bg-anchor { position: relative; flex: none; }
.bg-btn { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--muted);
  background: var(--cg-fill); box-shadow: inset 0 0 0 1px var(--line); transition: background-color 200ms ease, box-shadow 240ms ease, color 200ms ease, transform 120ms var(--ease-out); }
.bg-btn .ic { width: 17px; height: 17px; }
.bg-btn:active { transform: scale(.94); }
@media (hover: hover) and (pointer: fine) { .bg-btn:hover { color: var(--ink); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px var(--cg-rim), inset 0 1.5px 1px -.5px var(--cg-top), 0 0 18px -4px rgba(255, 255, 255, .5); } }
.bg-btn[aria-expanded="true"] { color: var(--ink); box-shadow: inset 0 0 0 1px var(--cg-rim), inset 0 1.5px 1px -.5px var(--cg-top), 0 0 18px -4px rgba(255, 255, 255, .5); }
.bg-pop { position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; width: 340px; padding: 14px; border-radius: 22px;
  background: var(--heavy); -webkit-backdrop-filter: blur(40px) saturate(170%); backdrop-filter: blur(40px) saturate(170%); box-shadow: var(--sh-float);
  transform-origin: top right; opacity: 0; transform: scale(.96); pointer-events: none; transition: opacity 160ms ease, transform 200ms var(--ease-out); }
.bg-pop.open { opacity: 1; transform: none; pointer-events: auto; }
.bg-pop.drop { box-shadow: var(--sh-float), 0 0 0 2px #8aa6ff; }
.bg-pop-t { margin: 0 4px 10px; font-weight: 600; font-size: 14px; }
.bg-pop-f { margin: 10px 4px 0; font-size: 11.5px; color: var(--muted); }
.bg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.bg-grid button, .bg-up, .bg-mine > [data-bg] { display: grid; gap: 6px; font-size: 12px; font-weight: 500; color: var(--ink-2); text-align: center; transition: transform 120ms var(--ease-out); }
.bg-grid button:active, .bg-up:active { transform: scale(.96); }
.bg-th { display: block; aspect-ratio: 4 / 3; border-radius: 12px; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); transition: box-shadow 200ms ease; }
.bg-grid [aria-pressed="true"] { color: var(--ink); }
.bg-grid [aria-pressed="true"] .bg-th { box-shadow: 0 0 0 2px var(--heavy), 0 0 0 4px #8aa6ff, 0 0 18px rgba(138, 166, 255, .6); }
.bg-up { cursor: pointer; }
.bg-up .bg-th { display: grid; place-items: center; background: var(--chip-bg); color: var(--ink-2); outline: 1.5px dashed var(--faint); outline-offset: -7px; }
.bg-up .bg-th .ic { width: 22px; height: 22px; }
@media (hover: hover) and (pointer: fine) { .bg-up:hover .bg-th { color: var(--ink); background: rgba(84, 123, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(138, 166, 255, .6), 0 0 18px -4px rgba(138, 166, 255, .6); } }
.bg-mine { position: relative; display: grid; }
.bg-del { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: rgba(20, 22, 30, .85); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.bg-del .ic { width: 12px; height: 12px; stroke-width: 2.4; }
@media (hover: hover) and (pointer: fine) { .bg-del:hover { background: #ff5d5d; } }

/* ---------- botones de cristal: apagados, se encienden al pasar el ratón / pulsar ---------- */
.btn, .btn-primary, .btn-next, .btn-call, .btn-wa, .btn-liquid, .btn-glass, .btn-mini, .icon-btn.bordered {
  --g: #ffffff;
  position: relative; isolation: isolate; overflow: hidden;
  background: transparent !important; border: 0 !important; color: var(--ink) !important; text-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px var(--line) !important;
  transition: background-color 220ms ease, box-shadow 260ms ease, color 200ms ease, transform 120ms var(--ease-out) !important;
}
.btn-primary, .btn-call, .btn-liquid { --g: #547bff; color: var(--tx-blue) !important; }
.btn-wa { --g: #05b88c; color: var(--tx-green) !important; }
.btn-next { --g: var(--c, #547bff); color: color-mix(in srgb, var(--c, #547bff) 55%, var(--ink)) !important; }
.btn-glass .ic, .btn-mini .ic { color: var(--tx-green); }
.btn-primary::before, .btn-next::before, .btn-liquid::before, .btn-liquid .water { display: none !important; }
.btn::after, .btn-primary::after, .btn-next::after, .btn-call::after, .btn-wa::after, .btn-liquid::after, .btn-glass::after, .btn-mini::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at var(--mx, 30%) var(--my, -10%), var(--lg-spec), transparent 55%);
  opacity: 0; transition: opacity 220ms ease;
}
.btn:is(:active, :focus-visible):not(:disabled), .btn-liquid:is(:active, :focus-visible), .btn-glass:is(:active, :focus-visible), .btn-mini:is(:active, :focus-visible), .icon-btn.bordered:is(:active, :focus-visible) {
  background: color-mix(in srgb, var(--g) 16%, transparent) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 60%, transparent), inset 0 1.5px 1px -.5px var(--cg-top), inset 0 0 12px color-mix(in srgb, var(--g) 28%, transparent), 0 0 20px -2px color-mix(in srgb, var(--g) 55%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--g) 75%, transparent) !important;
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled), .btn-liquid:hover, .btn-glass:hover, .btn-mini:hover, .icon-btn.bordered:hover {
    background: color-mix(in srgb, var(--g) 16%, transparent) !important; transform: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g) 60%, transparent), inset 0 1.5px 1px -.5px var(--cg-top), inset 0 0 12px color-mix(in srgb, var(--g) 28%, transparent), 0 0 20px -2px color-mix(in srgb, var(--g) 55%, transparent), 0 8px 20px -10px color-mix(in srgb, var(--g) 75%, transparent) !important;
  }
  :is(.btn, .btn-liquid, .btn-glass, .btn-mini):hover::after { opacity: .45; }
}
:root:not([data-theme="dark"]) :is(.btn, .btn-glass, .btn-mini):not(.btn-primary):not(.btn-call):not(.btn-wa):not(.btn-next):is(:hover, :active, :focus-visible):not(:disabled) {
  background: rgba(255, 255, 255, .45) !important; box-shadow: inset 0 0 0 1px #fff, inset 0 1.5px 1px -.5px #fff, inset 0 0 12px rgba(255, 255, 255, .6), 0 10px 24px -10px rgba(30, 40, 80, .35) !important;
}
.btn:active:not(:disabled), .btn-liquid:active, .btn-glass:active, .btn-mini:active { transform: scale(.96) !important; }
.btn:disabled { opacity: .4; }
.icon-btn:hover { background: var(--chip-bg); }
.link-btn.danger { color: var(--tx-red); }

/* ---------- filtros y selectores: apagados; se iluminan al elegirlos ---------- */
.chip, .city-tabs button, .seg-toggle button, .p-seg button {
  background: transparent !important; border: 0 !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  box-shadow: inset 0 0 0 1px var(--line) !important; color: var(--ink-2);
  transition: background-color 220ms ease, box-shadow 260ms ease, color 200ms ease, transform 120ms var(--ease-out);
}
.chip:active, .city-tabs button:active, .seg-toggle button:active { transform: scale(.96); }
@media (hover: hover) and (pointer: fine) {
  .chip:not([aria-pressed="true"]):hover, .city-tabs button:not([aria-pressed="true"]):hover, .seg-toggle button:not([aria-pressed="true"]):hover { background: var(--chip-bg) !important; color: var(--ink); }
}
.chip[aria-pressed="true"], .city-tabs button[aria-pressed="true"], .seg-toggle button[aria-pressed="true"], .p-seg button[aria-pressed="true"], .chip:active {
  --tc: var(--c, #8aa6ff);
  background: color-mix(in srgb, var(--tc) 16%, transparent) !important; color: var(--ink) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 60%, transparent), inset 0 1.5px 1px -.5px var(--cg-top), inset 0 0 12px color-mix(in srgb, var(--tc) 28%, transparent), 0 0 18px -2px color-mix(in srgb, var(--tc) 55%, transparent) !important;
}
.city-tabs button[aria-pressed="true"] span, .chip[aria-pressed="true"] span { color: var(--ink-2) !important; }
.seg-toggle { background: var(--chip-bg); border: 0; box-shadow: inset 0 0 0 1px var(--line); border-radius: 12px; }
.seg-toggle button { box-shadow: none !important; }
.seg-toggle button[aria-pressed="true"] { --tc: #8aa6ff; }
.toolbar .search { background: var(--chip-bg); }

/* ---------- capas fijas ---------- */
.drawer { border-radius: 28px 0 0 28px; }
.drawer-head, .drawer-foot { border-color: var(--line-2); }
.modal { border-radius: 26px; }

/* ---------- fotos de fondo ---------- */
:root[data-bg]:not([data-bg="luces"]) .main-wrap::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
:root[data-bg]:not([data-bg="luces"])[data-theme="dark"] .main-wrap { background: rgba(6, 9, 16, .22); }
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) .main-wrap { background: rgba(255, 255, 255, .14); }
:root[data-bg]:not([data-bg="luces"])[data-theme="dark"] :is(.glass, .panel, .rows, .pipe, .rep, .rank-row, .pool, .empty-box, .p-block, .toolbar) { background: rgba(8, 13, 22, .42); }
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) :is(.glass, .panel, .rows, .pipe, .rep, .rank-row, .pool, .empty-box, .p-block, .toolbar) { background: rgba(255, 255, 255, .42); }
:root[data-bg]:not([data-bg="luces"])[data-theme="dark"] :is(.topbar, .p-head, .page-head) { text-shadow: 0 1px 12px rgba(0, 0, 0, .55); }
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) :is(.topbar, .p-head, .page-head) { text-shadow: 0 1px 12px rgba(255, 255, 255, .7); }

/* ---------- escritorio estrecho ---------- */
@media (max-width: 1180px) and (min-width: 861px) {
  .shell { grid-template-columns: 84px minmax(0, 1fr); }
  .side { padding: 16px 0; }
}

/* ---------- móvil ---------- */
@media (max-width: 860px) {
  .shell { display: block; padding: 0 !important; }
  .side { display: none; }
  .main-wrap { margin: calc(env(safe-area-inset-top) + 8px) 8px 0; height: calc(100dvh - 8px - env(safe-area-inset-top)); border-radius: 30px; }
  .main-wrap::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
  :root[data-theme="dark"] .main-wrap { background: rgba(10, 12, 18, .55); }
  :root:not([data-theme="dark"]) .main-wrap { background: rgba(255, 255, 255, .4); }
  .topbar { flex-wrap: wrap; padding: 14px 16px 8px; gap: 8px 10px; }
  .m-brand { display: flex; align-items: center; order: 0; }
  .m-brand img { width: 28px; height: auto; filter: drop-shadow(0 3px 10px rgba(84, 123, 255, .45)); }
  .top-tools { order: 1; margin-left: auto; gap: 6px; }
  .hello { order: 2; flex-basis: 100%; }
  .hello-greeting { font-size: 20px; }
  .wx { height: 34px; padding: 0 11px; }
  .wx-ciudad, .wx-txt { display: none; }
  .theme-toggle { --w: 74px; --h: 32px; --kw: 42px; --kh: 40px; }
  .tt-label { display: none; }
  .main { padding: 6px 14px calc(110px + env(safe-area-inset-bottom)); -webkit-mask-image: none; mask-image: none; }
  .main.is-scrolled { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 24px); mask-image: linear-gradient(to bottom, transparent 0, #000 24px); }
  .bottom {
    left: 14px; right: 14px; bottom: calc(10px + env(safe-area-inset-bottom)); height: auto; padding: 6px; border-radius: 32px; border: 0 !important;
    background: var(--heavy) !important; -webkit-backdrop-filter: blur(40px) saturate(180%); backdrop-filter: blur(40px) saturate(180%);
    box-shadow: inset 0 0 0 1px var(--win-edge), inset 0 1px 0 var(--win-edge), 0 18px 40px -12px rgba(0, 0, 0, .5) !important;
  }
  .bottom button { border-radius: 26px; padding: 7px 0; color: var(--muted); transition: transform 120ms var(--ease-out), background-color 200ms ease; }
  .bottom button:active { transform: scale(.92); }
  .bottom button[aria-current="page"] { background: rgba(84, 123, 255, .2) !important; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(138, 166, 255, .5), 0 0 16px -4px rgba(84, 123, 255, .6); }
  .bottom button[aria-current="page"] .ic { color: inherit; }
  :root:not([data-theme="dark"]) .bottom button[aria-current="page"] { color: #2a4bd0; background: rgba(84, 123, 255, .14) !important; }
  .bg-pop { position: fixed; left: 14px; right: 14px; width: auto; top: calc(env(safe-area-inset-top) + 66px); }
  .drawer { border-radius: 28px 28px 0 0; }
}
@media (hover: none) {
  .btn:hover:not(:active):not(:focus-visible), .btn-liquid:hover:not(:active), .btn-glass:hover:not(:active), .btn-mini:hover:not(:active) { background: transparent !important; box-shadow: inset 0 0 0 1px var(--line) !important; }
}
@media (prefers-reduced-motion: reduce) { .env i, .tt-knob.stretch { animation: none !important; } .tt-knob { transition: none; } }

/* Agenda: la rejilla lleva su propio velo para que las horas se lean sobre la foto */
.p-agc { background: var(--tile); box-shadow: var(--tile-edge); }
:root[data-bg]:not([data-bg="luces"])[data-theme="dark"] .p-agc { background: rgba(8, 13, 22, .55); }
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) .p-agc { background: rgba(255, 255, 255, .5); }
.p-agc-esq, .p-agc-dia { background: var(--heavy); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
/* Claro + foto: la ventana lleva algo más de velo blanco para que los textos de arriba se lean */
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) .main-wrap { background: rgba(255, 255, 255, .34); }
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) { --bg-shade: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(238, 245, 255, .34)); }
/* Móvil: logo y herramientas en la misma fila */
@media (max-width: 860px) {
  .topbar { padding: 14px 14px 8px; }
  .top-tools { flex-wrap: nowrap; gap: 5px; }
  .top-tools .icon-btn.round { width: 34px; height: 34px; }
  .top-tools .icon-btn.round .av { width: 30px; height: 30px; }
  .bg-btn { width: 34px; height: 34px; }
  .theme-toggle { --w: 66px; --kw: 38px; --kh: 38px; }
  .wx { padding: 0 10px; gap: 7px; }
  .wx-tiempo { padding-left: 7px; }
}

/* Lector de documentos (Documentos → Leer): el cristal va en un marco alrededor del iframe (el desenfoque no se aplica
   al iframe en sí); el documento de dentro es transparente (docs/leer/lector.css). */
.p-lector-cristal {
  border-radius: 30px; overflow: hidden;
  background: var(--glass); -webkit-backdrop-filter: blur(40px) saturate(160%); backdrop-filter: blur(40px) saturate(160%);
  box-shadow: inset 0 0 0 1px var(--glass-edge), inset 0 1px 0 var(--glass-hi), 0 24px 60px rgba(8, 10, 20, .22);
}
.p-lector-cristal .p-lector { border-radius: 0; box-shadow: none; background: transparent; }
/* Con foto de fondo, el mismo velo que los bloques del panel (si no, la foto se lee a través del texto). */
:root[data-bg]:not([data-bg="luces"])[data-theme="dark"] .p-lector-cristal { background: rgba(8, 13, 22, .42); }
:root[data-bg]:not([data-bg="luces"]):not([data-theme="dark"]) .p-lector-cristal { background: rgba(255, 255, 255, .42); }