/* v8.1 · Modo oscuro (ola) + sonido (común a panel, Mi local, Mi Isla y /equipo).
   Paleta oscura con tokens (contraste AA sobre --o-fondo y --o-sup): nada de invertir colores. */
:root{--o-fondo:#0a0d12;--o-sup:#131921;--o-sup2:#1a2230;--o-linea:rgba(255,255,255,.09);--o-txt:#e9eef4;--o-txt2:#a9b4c2;--o-acento:#4fd6c8}
html[data-tema="oscuro"]{color-scheme:dark;
  --sand:#0a0d12;--sand-2:#131921;--sand-3:#131921;--ink:#e9eef4;--muted:#a9b4c2;--line:rgba(255,255,255,.09);--ink-2:#a9b4c2;
  --ml-borde:rgba(255,255,255,.08);--error:#ff8a7a;--ok:#4fd6a8;
  --sombra:0 1px 2px rgba(0,0,0,.4),0 10px 28px -14px rgba(0,0,0,.7)}
html[data-tema="oscuro"] body{background:var(--o-fondo);color:var(--o-txt)}
html[data-tema="oscuro"] input,html[data-tema="oscuro"] select,html[data-tema="oscuro"] textarea{background:var(--o-sup2);color:var(--o-txt);border-color:rgba(255,255,255,.14)}
html[data-tema="oscuro"] input::placeholder,html[data-tema="oscuro"] textarea::placeholder{color:#7d8896}
html[data-tema="oscuro"] dialog{background:var(--o-sup);color:var(--o-txt)}
html[data-tema="oscuro"] a:not(.btn){color:var(--o-acento)}
html[data-tema="oscuro"] img{opacity:.95}
/* Mientras cambia el tema nada se anima (si no, cada color haría su propia transición) */
html[data-tema-cambiando] *,html[data-tema-cambiando] *::before,html[data-tema-cambiando] *::after{transition:none!important}

html[data-tema="oscuro"] img[src*="logo-color"],html[data-tema="oscuro"] img[src*="logotipo-color"],html[data-tema="oscuro"] img[src*="logotipo.v"]{filter:invert(1) hue-rotate(180deg) brightness(1.05)}

/* ── Controles en la cabecera (mismas medidas que el buscador del panel: 40 px, píldora, sombra suave) ── */
.vt{display:flex;align-items:center;gap:8px;flex:none;position:relative}
.vt-ancho{display:flex;align-items:center;gap:8px}
.vt-estrecho{display:none}
@media (max-width:767px){.vt-ancho{display:none}.vt-estrecho{display:block}}
.vt-pop{position:relative}
.vt-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;min-width:40px;padding:0 14px;border:0;border-radius:999px;background:#fff;color:var(--dx-gris,#5A6B79);
  font:500 14px/1 Inter,system-ui,sans-serif;cursor:pointer;touch-action:manipulation;white-space:nowrap;
  box-shadow:var(--dx-sombra,0 1px 2px rgba(8,49,77,.06),0 8px 24px -12px rgba(8,49,77,.18));transition:transform .2s cubic-bezier(.22,1,.36,1),background-color .2s}
.vt-btn:active{transform:scale(.97)}
.vt-btn:focus-visible{outline:2px solid var(--dx-ocean,#17B3A6);outline-offset:2px}
.vt-solo,.vt-sonido.vt-icono{padding:0;width:40px}
.vt-ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.vt-sobre-oscuro .vt-btn{background:rgba(8,40,64,.38);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
@media (hover:hover) and (pointer:fine){.vt-btn:hover{background:#F4F7F9}.vt-sobre-oscuro .vt-btn:hover{background:rgba(255,255,255,.22)}}
.vt-pista{position:relative;width:34px;height:20px;border-radius:999px;background:#C9D2DC;flex:none;transition:background-color .35s cubic-bezier(.22,1,.36,1)}
.vt-bola{position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .35s cubic-bezier(.22,1,.36,1)}
[data-vt-tema][aria-checked="true"] .vt-pista{background:#0B3C5D;box-shadow:inset 0 0 0 1px rgba(79,214,200,.6)}
[data-vt-tema][aria-checked="true"] .vt-bola{transform:translateX(14px);background:#4fd6c8}
.vt-sobre-oscuro .vt-pista{background:rgba(255,255,255,.3)}
.vt-fila-tema .vt-tema{padding:0 10px;height:36px;box-shadow:none;background:transparent}
.vt-fila-tema .vt-tema .vt-ic{display:none}
.vt.sonando .vt-sonido,.vt.sonando .vt-solo{box-shadow:inset 0 0 0 1.5px rgba(23,179,166,.6),var(--dx-sombra,0 8px 24px -12px rgba(8,49,77,.18))}
/* Menú (como las tarjetas del panel) */
.vt-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(300px,calc(100vw - 24px));padding:14px;border-radius:20px;background:#fff;color:#1D2329;
  box-shadow:0 1px 2px rgba(8,49,77,.06),0 22px 44px -18px rgba(8,49,77,.45);display:flex;flex-direction:column;gap:12px;transform-origin:top right;text-align:left}
.vt-menu[hidden]{display:none}
.vt-menu:not([hidden]){animation:vt-entra .18s cubic-bezier(.22,1,.36,1)}
@keyframes vt-entra{from{opacity:0;transform:scale(.96)}}
.vt-fila{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font:400 14px/1.35 Inter,system-ui,sans-serif}
.vt-fila-tema{align-items:center;justify-content:space-between;cursor:default}
.vt-fila input{width:22px;height:22px;margin:1px 0 0;flex:none;accent-color:#17B3A6}
.vt-fila span{display:flex;flex-direction:column;gap:2px}
.vt-fila b{font-weight:600;font-size:14.5px}.vt-fila small{font-size:12.5px;opacity:.72}
.vt-vol{display:flex;align-items:center;gap:10px;font:500 13px Inter,system-ui,sans-serif}
.vt-vol input{flex:1;accent-color:#17B3A6;min-height:32px}
html[data-tema="oscuro"] .vt:not(.vt-sobre-oscuro) .vt-btn{background:var(--o-sup2);color:var(--o-txt);box-shadow:0 0 0 1px var(--o-linea)}
html[data-tema="oscuro"] .vt-menu{background:var(--o-sup);color:var(--o-txt);box-shadow:0 22px 44px -18px #000,0 0 0 1px var(--o-linea)}
/* Pantallas de entrar (sin cabecera): arriba a la derecha, fuera del contenido */
.vt-suelta{position:fixed;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));z-index:50}
/* Dónde va en cada app */
.dx-top:has(.vt){grid-template-columns:auto 1fr auto auto}
.dx-top .vt{grid-column:4;grid-row:1}
@media (max-width:767px){.dx-top .vt-solo,.dx-top .vt-btn{height:42px;min-width:42px}}
.ml-top .dentro{position:relative}
.ml-top .vt{position:absolute;right:16px;top:50%;transform:translateY(-50%)}
@media (min-width:1100px){.ml-top .vt{right:0}}
.is-cab .is-tit{margin-left:auto}
.eq-cab-fila{padding-right:0}

/* ── La ola: cresta con espuma + agua con capas y cielo de atardecer a noche (solo transform/opacity) ── */
.ola{position:fixed;inset:0 0 0 auto;width:calc(100vw + 32vw);z-index:9000;pointer-events:none;visibility:hidden;display:flex;transform:translate3d(100%,0,0);will-change:transform}
.ola.viva{pointer-events:auto}
.ola-cresta{flex:none;width:32vw;max-width:380px;height:100%;display:block;overflow:visible;margin-right:-2px}
.ola-cuerpo{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,#0e5a80 0%,#0a3d5e 45%,#062238 100%)}
.ola-cielo{position:absolute;inset:0 0 62% 0;background:linear-gradient(180deg,#141a3a 0%,#4a2b5c 45%,#e0784a 85%,#f6b06a 100%)}
.ola.amanece .ola-cielo{background:linear-gradient(180deg,#8fc4e8 0%,#f3c7a0 70%,#fbe3b8 100%)}
.ola-sol{position:absolute;left:58%;top:28%;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;background:radial-gradient(circle,#ffd89a 0%,#ff9b5a 55%,rgba(255,120,60,0) 72%)}
.ola-capas{position:absolute;inset:38% 0 0 0}
.ola-capa{position:absolute;left:-10%;width:220%;height:100%;display:block}
.ola-capa path{fill:currentColor}
.ola-capa-0{top:0;color:rgba(127,227,224,.28)}.ola-capa-1{top:18%;color:rgba(31,143,179,.5)}.ola-capa-2{top:40%;color:rgba(11,61,94,.7)}.ola-capa-3{top:64%;color:rgba(6,34,56,.9)}
.ola.viva .ola-capa{animation:ola-deriva 2.4s linear infinite}
.ola.viva .ola-capa-1{animation-duration:3.1s;animation-direction:reverse}.ola.viva .ola-capa-2{animation-duration:3.8s}.ola.viva .ola-capa-3{animation-duration:4.6s;animation-direction:reverse}
@keyframes ola-deriva{to{transform:translate3d(-45%,0,0)}}
.ola.viva .ola-espuma{transform-box:fill-box;transform-origin:right center;animation:ola-espuma .7s ease-in-out infinite alternate}
@keyframes ola-espuma{from{transform:translateX(0) scaleX(1)}to{transform:translateX(-6px) scaleX(1.06)}}
.ola-fundido{position:fixed;inset:0;z-index:9000;background:#0a0d12;opacity:0;pointer-events:none}
.ola-fundido.claro{background:#F4EBDD}
@media (prefers-reduced-motion:reduce){.ola .ola-capa,.ola .ola-espuma{animation:none}}

/* ── Panel · Mensajes del equipo (mismo botón que el resto de la cabecera) ── */
.pm-btn{position:relative}
.pm-n{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:#E8573A;color:#fff;font:700 11.5px/20px Inter,sans-serif;text-align:center;box-shadow:0 0 0 2px #fff}
.pm-n[hidden]{display:none}
@media (max-width:767px){.pm-btn .vt-txt{display:none}.pm-btn{padding:0;width:42px}}
.pm-bandeja{width:min(560px,calc(100vw - 24px));max-height:min(80vh,760px);padding:0;border:0;border-radius:22px;background:#fff;color:#1D2329;box-shadow:0 30px 70px -30px rgba(8,49,77,.7)}
.pm-bandeja::backdrop{background:rgba(8,20,30,.45)}
.pm-cab{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;background:inherit;border-bottom:1px solid rgba(11,60,93,.08);z-index:1}
.pm-cab h2{margin:0;font:700 18px/1.2 Poppins,Inter,sans-serif}
.pm-x{width:40px;height:40px;border:0;border-radius:50%;background:rgba(11,60,93,.06);font-size:22px;cursor:pointer;color:inherit}
.pm-lista{padding:14px 18px 18px;display:grid;gap:12px}
.pm-vacio{margin:0;opacity:.75}
.pm-msj{display:grid;gap:8px;padding:14px;border-radius:16px;border:1px solid rgba(11,60,93,.1)}
.pm-msj.pendiente{border-color:rgba(232,87,58,.45);box-shadow:inset 3px 0 0 #E8573A}
.pm-msj p{margin:0;white-space:pre-line;overflow-wrap:anywhere;line-height:1.45}
.pm-quien{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:13px}
.pm-quien b{font-size:15px}
.pm-quien span{opacity:.75}
.pm-nuevo{opacity:1!important;padding:2px 8px;border-radius:999px;background:#E8573A;color:#fff;font-weight:700;font-size:11.5px}
.pm-resp{padding:8px 12px;border-radius:12px;background:#EEF7F6}
.pm-form{display:flex;gap:8px;align-items:flex-end}
.pm-form textarea{flex:1;min-width:0;padding:10px 12px;border-radius:12px;border:1.5px solid #E1D6C4;font:inherit;font-size:15px}
.pm-form .btn{min-height:44px;white-space:nowrap}
html[data-tema="oscuro"] .pm-bandeja{background:var(--o-sup);color:var(--o-txt)}
html[data-tema="oscuro"] .pm-msj{border-color:var(--o-linea)}
html[data-tema="oscuro"] .pm-resp{background:#16313a}
html[data-tema="oscuro"] .pm-x{background:rgba(255,255,255,.08)}
.pm-bandeja,.pm-bandeja *{box-sizing:border-box}
.pm-bandeja{overflow-x:hidden}
.pm-msj,.pm-lista{min-width:0}
@media (max-width:520px){.pm-form{flex-direction:column;align-items:stretch}.pm-form .btn{width:100%}}
/* Mi local, Mi Isla y /equipo: botones táctiles de 44 px como el resto de la app (el panel sigue con el alto de su buscador) */
.is-cab .vt-btn,.ml-top .vt-btn,.eq-cab-fila .vt-btn{height:44px;min-width:44px}
.is-cab .vt-solo,.ml-top .vt-solo,.eq-cab-fila .vt-solo{width:44px}
@media (pointer:coarse){.vt-btn{min-height:44px;min-width:44px}.dx-top .vt-btn{height:44px}}
.vt-menu input[type=range]{min-height:44px}
.vt-fila{min-height:44px}