/* =====================================================================
   12/11 · Versión 2.0 del panel (Mi cuenta → Apariencia → Versión).
   José: «puedes aplicarlo con posibilidad de seleccionar el anterior,
   nombralos como 1.0 y 2.0 tipo actualización». Todo va bajo
   html[data-version="2"] (lo pone js/sin-zoom.js antes del primer
   fotograma): con la 1.0 este archivo no cambia nada, salvo la ventana
   de novedades del final, que sale una vez en cada dispositivo.
   Se carga el último: manda sobre los estilos de cada tema.
   ===================================================================== */

/* ---------------------------------------------------------------- menú
   Cada apartado con su icono de color (un cuadradito redondeado, como en
   el móvil). WhatsApp, con su logo de verdad. */
html[data-version="2"] .nav-item { --ico: linear-gradient(145deg, #A9B4C4, #6B778A); gap: 11px; padding-top: 5px; padding-bottom: 5px; }
html[data-version="2"] :is(.nav-item[data-view="inicio"], .mas-panel [data-ir="inicio"])         { --ico: linear-gradient(145deg, #2CC3D8, #0E93A8); }
html[data-version="2"] :is(.nav-item[data-view="agenda"], .mas-panel [data-ir="agenda"])         { --ico: linear-gradient(145deg, #FF8E9E, #E9506E); }
html[data-version="2"] :is(.nav-item[data-view="disponibilidad"], .mas-panel [data-ir="disponibilidad"]) { --ico: linear-gradient(145deg, #8E96FF, #5654EE); }
html[data-version="2"] :is(.nav-item[data-view="pacientes"], .mas-panel [data-ir="pacientes"])      { --ico: linear-gradient(145deg, #56D9B8, #14A086); }
html[data-version="2"] :is(.nav-item[data-view="documentos"], .mas-panel [data-ir="documentos"])     { --ico: linear-gradient(145deg, #FFD35C, #EFA20A); }
html[data-version="2"] :is(.nav-item[data-view="horarios"], .mas-panel [data-ir="horarios"])       { --ico: linear-gradient(145deg, #C38CFF, #8650F2); }
html[data-version="2"] :is(.nav-item[data-view="despachos"], .mas-panel [data-ir="despachos"])      { --ico: linear-gradient(145deg, #FFB65C, #F5730B); }
html[data-version="2"] :is(.nav-item[data-view="videollamadas"], .mas-panel [data-ir="videollamadas"])  { --ico: linear-gradient(145deg, #62CCFF, #0B98E0); }
html[data-version="2"] :is(.nav-item[data-view="equipo"], .mas-panel [data-ir="equipo"])         { --ico: linear-gradient(145deg, #FF93C9, #E04595); }
html[data-version="2"] :is(.nav-item[data-view="metricas"], .mas-panel [data-ir="metricas"])       { --ico: linear-gradient(145deg, #5D8BFF, #2F55E8); }
html[data-version="2"] :is(.nav-item[data-view="tpv"], .mas-panel [data-ir="tpv"])            { --ico: linear-gradient(145deg, #6FDC8C, #22A04B); }
html[data-version="2"] :is(.nav-item[data-view="servicios"], .mas-panel [data-ir="servicios"])      { --ico: linear-gradient(145deg, #FF9C7A, #EE5A3A); }
html[data-version="2"] :is(.nav-item[data-view="plantillas"], .mas-panel [data-ir="plantillas"])     { --ico: linear-gradient(145deg, #9AA9BF, #5E6E86); }
html[data-version="2"] :is(.nav-item[data-view="mejora"], .mas-panel [data-ir="mejora"])         { --ico: linear-gradient(145deg, #FFC54F, #F08A0B); }
html[data-version="2"] :is(.nav-item[data-view="almacenamiento"], .mas-panel [data-ir="almacenamiento"]) { --ico: linear-gradient(145deg, #5BC6E8, #1D8FBF); }
html[data-version="2"] :is(.nav-item[data-view="ajustes"], .mas-panel [data-ir="ajustes"])        { --ico: linear-gradient(145deg, #8C97A8, #4A5568); }

html[data-version="2"] .nav-item > svg {
  box-sizing: border-box; width: 30px; height: 30px; padding: 6px; border-radius: 9px;
  color: #fff !important; stroke-width: 2.1; background: var(--ico);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 12px -5px rgba(10, 40, 50, .45);
  transition: transform .2s ease;
}
html[data-version="2"] .nav-item:hover > svg { transform: translateY(-1px) scale(1.04); }
html[data-version="2"] .nav-item .ico-wa {
  width: 30px; height: 30px; border-radius: 9px;
  background: url("../img/whatsapp.png") center / contain no-repeat;
  -webkit-mask: none; mask: none;
  filter: drop-shadow(0 4px 6px rgba(10, 70, 30, .28));
}
/* En pantallas bajas el menú se apretaba hasta montar unos iconos sobre otros: ahora cada fila tiene un alto mínimo,
   los iconos se achican un poco y, si aun así no cabe, el menú se desplaza por dentro (como en la 1.0). */
@media (min-width: 861px) {
  html[data-version="2"] .nav-item { min-height: 32px; }
}
@media (min-width: 861px) and (max-height: 860px) {
  html[data-version="2"] .nav-item { padding-top: 2px; padding-bottom: 2px; min-height: 30px; }
  html[data-version="2"] .nav-item > svg, html[data-version="2"] .nav-item .ico-wa { width: 28px; height: 28px; }
  html[data-version="2"] .nav-item > svg { padding: 5.5px; }
}
@media (min-width: 861px) and (max-height: 780px) {
  html[data-version="2"] .nav-item { padding-top: 1px; padding-bottom: 1px; min-height: 26px; font-size: 14.5px; }
  html[data-version="2"] .nav-item > svg, html[data-version="2"] .nav-item .ico-wa { width: 24px; height: 24px; border-radius: 7px; }
  html[data-version="2"] .nav-item > svg { padding: 4.5px; }
  html[data-version="2"] .nav-grupo { margin-top: 8px; }
}

/* El apartado abierto: una pastilla blanca de cristal (el icono ya pone el color). */
html[data-version="2"] .nav-item.active {
  color: var(--text-dark) !important; font-weight: 600;
  background: rgba(255, 255, 255, .88) !important;
  box-shadow: 0 6px 16px -10px rgba(10, 40, 50, .45), inset 0 0 0 1px rgba(255, 255, 255, .95) !important;
}
html[data-version="2"] .nav-item.active > span { color: var(--text-dark) !important; text-decoration: none; }
html[data-version="2"] .nav-item:hover:not(.active) { background: rgba(255, 255, 255, .5) !important; }
html[data-version="2"][data-theme="dark"] .nav-item.active {
  color: #fff !important; background: rgba(255, 255, 255, .12) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12) !important;
}
html[data-version="2"][data-theme="dark"] .nav-item.active > span { color: #fff !important; }
html[data-version="2"][data-theme="dark"] .nav-item:hover:not(.active) { background: rgba(255, 255, 255, .06) !important; }

/* Móvil · la hoja de «Más»: los mismos iconos de color que el menú (José, 13/11: «tienes que meter los logos aquí»). */
html[data-version="2"] .mas-panel :where([data-ir]) { --ico: linear-gradient(145deg, #A9B4C4, #6B778A); }
html[data-version="2"] .mas-panel :is([data-ir], .mas-buscar) > svg {
  box-sizing: border-box; width: 34px; height: 34px; padding: 7px; border-radius: 10px;
  color: #fff; stroke-width: 2.1; background: var(--ico);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 5px 12px -5px rgba(10, 40, 50, .5);
}
html[data-version="2"] .mas-panel .mas-buscar > svg { --ico: linear-gradient(145deg, #62CCFF, #0B98E0); width: 30px; height: 30px; padding: 6px; border-radius: 9px; }
html[data-version="2"] .mas-panel [data-ir] { gap: 14px; }
html[data-version="2"] .mas-panel button[aria-current="true"] { background: rgba(255, 255, 255, .88); color: var(--text-dark); box-shadow: 0 6px 16px -10px rgba(10, 40, 50, .45); }
html[data-version="2"][data-theme="dark"] .mas-panel button[aria-current="true"] { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }

/* Móvil: la barra de abajo con los mismos iconos de color, algo más pequeños. */
@media (max-width: 860px) {
  html[data-version="2"] .nav-item { padding-top: 6px; padding-bottom: 6px; gap: 3px; }
  html[data-version="2"] .nav-item > svg, html[data-version="2"] .nav-item .ico-wa { width: 27px; height: 27px; padding: 5px; border-radius: 8px; }
  html[data-version="2"] .nav-item .ico-wa { padding: 0; }
}

/* ---------------------------------------------------------------- barra de arriba
   Buscador grande, cómo está el asistente y el botón del tema. Solo en el
   ordenador (en el móvil esta barra no sale). */
html[data-version="2"] .franja-proveedor {
  justify-content: flex-start; gap: 10px; min-height: 0; padding: 6px; margin: 0 0 12px;
  border-radius: 20px; font-size: 13px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(22px) saturate(1.5); backdrop-filter: blur(22px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 18px 40px -30px rgba(10, 50, 60, .45);
}
html[data-version="2"][data-theme="dark"] .franja-proveedor {
  background: rgba(20, 26, 34, .55); border-color: rgba(255, 255, 255, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}
html[data-version="2"] #btn-buscar {
  flex: 1 1 320px; max-width: 560px; height: 40px; padding: 0 6px 0 14px; gap: 10px;
  justify-content: flex-start; border-radius: 14px; cursor: text;
  font-size: 14px; color: var(--text-muted);
  background: rgba(255, 255, 255, .85); border: 1px solid rgba(10, 40, 50, .08);
  transition: background .2s ease, box-shadow .2s ease;
}
html[data-version="2"] #btn-buscar:hover { background: #fff; box-shadow: 0 6px 18px -12px rgba(10, 40, 50, .5); color: var(--text-dark); }
html[data-version="2"] #btn-buscar svg { width: 18px; height: 18px; stroke-width: 2; }
html[data-version="2"] #btn-buscar .buscar-corto { display: none; }
html[data-version="2"] #btn-buscar .buscar-largo { display: inline; flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-version="2"] #btn-buscar kbd {
  margin-left: auto; font-size: 11.5px; padding: 5px 8px; border-radius: 8px; border: 0;
  background: rgba(10, 40, 50, .06); color: var(--text-muted);
}
html[data-version="2"][data-theme="dark"] #btn-buscar { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .08); }
html[data-version="2"][data-theme="dark"] #btn-buscar:hover { background: rgba(255, 255, 255, .1); }
html[data-version="2"][data-theme="dark"] #btn-buscar kbd { background: rgba(255, 255, 255, .08); }

html[data-version="2"] .v2-asistente:not([hidden]) {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; margin-left: auto;
  border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: rgba(22, 163, 74, .12); color: #0D7A3A;
}
html[data-version="2"] .v2-asistente::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: #16A34A;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, .18); animation: v2-latido 2.4s ease-in-out infinite;
}
html[data-version="2"] .v2-asistente[data-estado="apagado"] { background: rgba(240, 138, 11, .14); color: #9A5A00; }
html[data-version="2"] .v2-asistente[data-estado="apagado"]::before { background: #F08A0B; box-shadow: 0 0 0 4px rgba(240, 138, 11, .2); animation: none; }
html[data-version="2"][data-theme="dark"] .v2-asistente { color: #7BE3A3; }
html[data-version="2"][data-theme="dark"] .v2-asistente[data-estado="apagado"] { color: #FFC37A; }
@keyframes v2-latido { 0%, 100% { box-shadow: 0 0 0 3px rgba(22, 163, 74, .2); } 50% { box-shadow: 0 0 0 6px rgba(22, 163, 74, .06); } }

html[data-version="2"] #btn-tema {
  flex: none; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 0;
  display: grid; place-items: center; color: var(--text-dark);
  background: rgba(255, 255, 255, .75); border: 1px solid rgba(255, 255, 255, .9);
}
html[data-version="2"] .v2-asistente[hidden] + #btn-tema { margin-left: auto; }
html[data-version="2"] #btn-tema:hover { background: #fff; }
html[data-version="2"] #btn-tema::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[data-version="2"][data-theme="dark"] #btn-tema { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .1); color: #fff; }
html[data-version="2"][data-theme="dark"] #btn-tema::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M5.5 18.5l1.7-1.7M16.8 7.2l1.7-1.7'/%3E%3C/svg%3E");
}
@media (max-height: 760px) {
  html[data-version="2"] .franja-proveedor { padding: 4px; margin-bottom: 8px; border-radius: 16px; }
  html[data-version="2"] #btn-buscar { height: 34px; border-radius: 12px; }
  html[data-version="2"] #btn-tema { width: 32px; height: 32px; }
  html[data-version="2"] .v2-asistente:not([hidden]) { height: 30px; }
}

/* ---------------------------------------------------------------- Inicio
   El reloj grande se queda como en la 1.0 (José: «lo de la hora tan pequeño
   no me convence»). */
html[data-version="2"] .kpi { --k-ico: linear-gradient(145deg, #2CC3D8, #0E93A8); }
html[data-version="2"] .kpi[data-k="huecos"]  { --k-ico: linear-gradient(145deg, #56D9B8, #14A086); }
html[data-version="2"] .kpi[data-k="sinleer"] { --k-ico: linear-gradient(145deg, #5EE28C, #13A048); }
html[data-version="2"] .kpi[data-k="riesgo"]  { --k-ico: linear-gradient(145deg, #FF8E9E, #E9506E); }
html[data-version="2"] .kpi.alerta[data-k="riesgo"] { --k-ico: linear-gradient(145deg, #FF6B7F, #D7263D); }
html[data-version="2"] .kpi-icono {
  color: #fff !important; background: var(--k-ico) !important; border: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 8px 16px -8px rgba(10, 40, 50, .5) !important;
}
html[data-version="2"] .kpi-icono svg { stroke-width: 2; }

/* La siguiente sesión, flotando sobre la foto del banner. */
.v2-av {
  --c: var(--marca); width: 44px; height: 44px; flex: none; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; background: var(--c); color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 4px 10px -4px rgba(0, 0, 0, .4);
}
.v2-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2-av b { font-size: 14px; font-weight: 700; letter-spacing: .02em; text-shadow: none !important; color: #fff; }
html[data-theme="dark"] .v2-av { box-shadow: 0 0 0 2px rgba(255, 255, 255, .25), 0 4px 10px -4px rgba(0, 0, 0, .6); }

html[data-version="2"] .v2-siguiente {
  position: absolute; right: 20px; bottom: 20px; z-index: 2; box-sizing: border-box;
  width: min(310px, calc(40% - 28px)); display: flex; gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 20px; color: #0D1F26;
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, .9); box-shadow: 0 18px 36px -18px rgba(10, 40, 50, .6);
  animation: v2-sube .5s cubic-bezier(.2, .8, .2, 1) both;
}
.v2-sig-texto { display: grid; gap: 1px; min-width: 0; }
.v2-sig-texto > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-sig-texto small { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--marca-oscura); }
.v2-sig-texto strong { font-size: 15px; font-weight: 650; color: #0D1F26; }
.v2-sig-texto span { font-size: 12.5px; color: #3E555E; }
html[data-version="2"][data-theme="dark"] .v2-siguiente { background: rgba(18, 24, 32, .78); border-color: rgba(255, 255, 255, .1); color: #fff; }
html[data-version="2"][data-theme="dark"] .v2-sig-texto strong { color: #fff; }
html[data-version="2"][data-theme="dark"] .v2-sig-texto span { color: rgba(255, 255, 255, .72); }
html[data-version="2"][data-theme="dark"] .v2-siguiente :is(small, strong, span) { text-shadow: none; }
/* Con la tarjeta abajo, «Ver agenda» sube a la esquina de arriba (y la sombra con él). */
html[data-version="2"] .saludo:has(.v2-siguiente) .banner-boton { bottom: auto; top: 40px; }
html[data-version="2"] .saludo:has(.v2-siguiente) .banner-marca::after { background: radial-gradient(60% 50% at 100% 0%, rgba(0, 0, 0, .28), transparent 70%); }
@keyframes v2-sube { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Ordenador estrecho: la foto es pequeña y la tarjeta la taparía entera. */
@media (min-width: 861px) and (max-width: 1099px) {
  html[data-version="2"] .v2-siguiente { display: none; }
  html[data-version="2"] .saludo:has(.v2-siguiente) .banner-boton { top: auto; bottom: 46px; }
}
@media (max-width: 860px) {
  html[data-version="2"] .v2-siguiente { left: 12px; right: 12px; bottom: 12px; width: auto; padding: 10px 12px; }
  html[data-version="2"] .v2-siguiente .v2-av { width: 38px; height: 38px; }
  html[data-version="2"] .saludo:has(.v2-siguiente) .banner-boton { display: none; }
}

/* El equipo ahora. */
html[data-version="2"] .v2-equipo { border-radius: var(--r-xl); padding: 16px 16px 14px; display: grid; gap: 10px; }
.v2-equipo-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 0 4px; }
.v2-equipo-cab h2 { margin: 0; font-size: 17px; }
.v2-equipo-cab .sec { color: var(--text-muted); font-size: 13px; }
.v2-equipo-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.v2-pro {
  --p: #A3ADBD; display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .62);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
html[data-theme="dark"] .v2-pro { background: rgba(255, 255, 255, .05); box-shadow: none; }
.v2-pro .v2-av { width: 40px; height: 40px; box-shadow: 0 0 0 2px #fff, 0 0 0 4px color-mix(in oklab, var(--p) 55%, transparent); }
.v2-pro > span:last-child { display: grid; gap: 2px; min-width: 0; }
.v2-pro strong { font-size: 14.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v2-pro small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); min-width: 0; }
.v2-punto { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--p); box-shadow: 0 0 0 3px color-mix(in oklab, var(--p) 22%, transparent); }
.v2-pro[data-estado="sesion"] { --p: #E9506E; }
.v2-pro[data-estado="libre"]  { --p: #16A34A; }
.v2-pro[data-estado="luego"]  { --p: #F08A0B; }
.v2-pro[data-estado="fuera"]  { --p: #8A94A6; }
.v2-pro[data-estado="fin"]    { --p: #A3ADBD; opacity: .72; }

/* La foto de cada profesional en «Próximas citas» y «Pendientes de confirmar». */
html[data-version="2"] #inicio-root .lista li { grid-template-columns: 50px 32px 1fr auto; }
.v2-lista-foto { display: grid; }
.v2-lista-foto .v2-av { width: 32px; height: 32px; box-shadow: 0 0 0 2px #fff, 0 3px 8px -3px rgba(10, 40, 50, .4); }
.v2-lista-foto .v2-av b { font-size: 11px; }
@media (max-width: 860px) {
  html[data-version="2"] #inicio-root .lista li { grid-template-columns: 46px 28px 1fr auto; gap: 10px; }
  .v2-lista-foto .v2-av { width: 28px; height: 28px; }
}

/* ---------------------------------------------------------------- Mi cuenta: 1.0 / 2.0 */
.ap-versiones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ap-version {
  display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 12px; border-radius: 16px; cursor: pointer;
  background: var(--vidrio-fuerte, rgba(255, 255, 255, .7)); border: 1.5px solid var(--divider); color: var(--text-dark); font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.ap-version:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--marca) 45%, transparent); }
.ap-version.activo { border-color: var(--marca); box-shadow: 0 0 0 3px color-mix(in oklab, var(--marca) 18%, transparent); }
.ap-version > span:last-child { display: grid; gap: 2px; }
.ap-version small { color: var(--text-muted); font-size: 12.5px; line-height: 1.35; }
.ap-version-num {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  font-weight: 800; font-size: 16px; letter-spacing: -.02em; color: #fff;
  background: linear-gradient(145deg, #9AA9BF, #5E6E86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px -8px rgba(10, 40, 50, .5);
}
.ap-version[data-version="2"] .ap-version-num { background: linear-gradient(135deg, #2CC3D8 0%, #5D8BFF 55%, #8650F2 100%); }
@media (max-width: 520px) { .ap-versiones { grid-template-columns: 1fr; } }

/* =====================================================================
   La ventana de novedades (js/novedades.js). Sale una vez en cada
   dispositivo al entrar, con la 2.0 recién llegada.
   ===================================================================== */
.nov-fondo {
  position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px;
  background: rgba(8, 18, 28, .42);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  animation: nov-aparece .35s ease both;
}
.nov-fondo.cerrando { animation: nov-desaparece .28s ease both; }
.nov-caja {
  position: relative; width: min(540px, 100%); max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
  border-radius: 30px; background: rgba(255, 255, 255, .94); color: #0D1F26;
  box-shadow: 0 40px 90px -30px rgba(5, 20, 40, .65), inset 0 1px 0 #fff;
  animation: nov-entra .6s cubic-bezier(.2, .9, .25, 1.15) both;
}
.nov-fondo.cerrando .nov-caja { animation: nov-sale .28s ease both; }
.nov-caja:focus { outline: none; }
html[data-theme="dark"] .nov-caja { background: rgba(20, 26, 34, .96); color: #EAF1F3; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .06); }

/* Con los colores de Astraterapia: su degradado azul (#0008FF → #0057FF → #00B0FF), su logo y sus letras. */
.nov-hero {
  position: relative; height: 236px; overflow: hidden; border-radius: 30px 30px 0 0;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(0, 176, 255, .9) 0, transparent 60%),
    radial-gradient(90% 120% at 100% 0%, rgba(122, 140, 255, .85) 0, transparent 60%),
    radial-gradient(80% 90% at 50% 125%, rgba(77, 200, 255, .8) 0, transparent 70%),
    linear-gradient(135deg, #0008FF 0%, #0057FF 55%, #00B0FF 100%);
  display: grid; place-items: center; isolation: isolate;
}
.nov-luz { position: absolute; border-radius: 50%; filter: blur(30px); opacity: .55; z-index: -1; animation: nov-deriva 9s ease-in-out infinite alternate; }
.nov-luz.l1 { width: 220px; height: 220px; background: #7FE0FF; left: -40px; top: -60px; }
.nov-luz.l2 { width: 200px; height: 200px; background: #B9D2FF; right: -30px; bottom: -80px; animation-duration: 11s; }
.nov-luz.l3 { width: 160px; height: 160px; background: #8FA2FF; right: 30%; top: -70px; animation-duration: 13s; }
.nov-hero::after {   /* un brillo que cruza una vez */
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
  transform: translateX(-120%); animation: nov-brillo 1.6s .5s ease-out both;
}
.nov-version { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; padding-top: 4px; }
.nov-logo { height: 34px; width: auto; margin-bottom: 6px; filter: drop-shadow(0 6px 14px rgba(0, 20, 120, .35)); animation: nov-sube .5s .1s ease both; }
.nov-marca { white-space: nowrap; }
.nov-marca .w-astra { color: #0047FF; }
html[data-theme="dark"] .nov-marca .w-astra { color: #4D8BFF; }
.nov-chip {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: nov-sube .5s .25s ease both;
}
.nov-version b {
  font-size: 84px; line-height: 1; font-weight: 800; letter-spacing: -.05em; color: #fff;
  text-shadow: 0 10px 30px rgba(10, 20, 80, .35), 0 0 40px rgba(255, 255, 255, .35);
  animation: nov-numero .8s .15s cubic-bezier(.2, .9, .25, 1.3) both;
}
.nov-iconos { position: absolute; inset: 0; z-index: 0; }
.nov-iconos > span {
  position: absolute; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: var(--g); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 22px -10px rgba(10, 20, 60, .55);
  transform: rotate(var(--r, 0deg)); animation: nov-flota 4.5s ease-in-out infinite alternate, nov-sube .6s ease both;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) * .2 + .3s);
}
.nov-iconos > span svg { width: 22px; height: 22px; color: #fff; }
.nov-iconos > span img { width: 42px; height: 42px; filter: drop-shadow(0 8px 10px rgba(10, 60, 30, .35)); }
.nov-iconos > span.sin-fondo { background: none; box-shadow: none; }
.nov-confeti { position: absolute; left: 50%; top: 52%; z-index: 1; pointer-events: none; }
.nov-confeti i {
  position: absolute; width: 9px; height: 9px; border-radius: 3px; background: var(--c); opacity: 0;
  animation: nov-confeti 1.5s var(--d, .2s) cubic-bezier(.15, .7, .3, 1) both;
}

.nov-cuerpo { padding: 22px 26px 6px; }
.nov-cuerpo h2 { margin: 0; font-size: 23px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.nov-cuerpo > p { margin: 6px 0 0; color: #4A5F67; font-size: 15px; line-height: 1.45; }
html[data-theme="dark"] .nov-cuerpo > p { color: rgba(234, 241, 243, .72); }
.nov-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 2px; }
.nov-lista li {
  display: flex; gap: 14px; align-items: flex-start; padding: 8px 10px; border-radius: 16px;
  animation: nov-sube .45s calc(var(--i) * 70ms + .35s) ease both; transition: background .2s ease;
}
.nov-lista li:hover { background: rgba(10, 40, 60, .04); }
html[data-theme="dark"] .nov-lista li:hover { background: rgba(255, 255, 255, .04); }
.nov-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: var(--g);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px -7px rgba(10, 40, 50, .5);
}
.nov-ico svg { width: 20px; height: 20px; color: #fff; }
.nov-ico img { width: 38px; height: 38px; }
.nov-ico.sin-fondo { background: none; box-shadow: none; }
.nov-lista strong { display: block; font-size: 15px; font-weight: 650; }
.nov-lista small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: #50646C; }
html[data-theme="dark"] .nov-lista small { color: rgba(234, 241, 243, .66); }

.nov-pie { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 26px 6px; }
.nov-pie .nov-vamos {
  flex: 1 1 220px; height: 50px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-size: 16px; font-weight: 650; color: #fff;
  background: linear-gradient(135deg, #0008FF 0%, #0057FF 55%, #00B0FF 100%);
  box-shadow: 0 16px 30px -14px rgba(0, 70, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .15s ease, box-shadow .2s ease;
}
.nov-pie .nov-vamos:hover { transform: translateY(-1px); box-shadow: 0 20px 34px -14px rgba(0, 70, 255, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.nov-pie .nov-vamos:focus-visible { outline: 2px solid rgba(0, 87, 255, .35); outline-offset: 3px; }
.nov-pie .nov-antes {
  border: 0; background: none; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: #50646C; padding: 8px 4px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(80, 100, 108, .35);
}
html[data-theme="dark"] .nov-pie .nov-antes { color: rgba(234, 241, 243, .7); }
.nov-nota { margin: 0; padding: 4px 26px 22px; font-size: 12.5px; color: #6B7E85; }
html[data-theme="dark"] .nov-nota { color: rgba(234, 241, 243, .5); }
.nov-cerrar {
  position: absolute; top: 14px; right: 14px; z-index: 3; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.nov-cerrar:hover { background: rgba(255, 255, 255, .3); }
.nov-cerrar svg { width: 16px; height: 16px; }

@media (max-width: 520px) {
  .nov-fondo { padding: 10px; align-items: end; }
  .nov-caja { border-radius: 26px; max-height: calc(100dvh - 20px); }
  .nov-hero { height: 196px; border-radius: 26px 26px 0 0; }
  .nov-version b { font-size: 64px; }
  .nov-logo { height: 28px; margin-bottom: 2px; }
  .nov-cuerpo { padding: 18px 18px 4px; }
  .nov-cuerpo h2 { font-size: 20px; }
  .nov-pie { padding: 12px 18px 4px; }
  .nov-nota { padding: 4px 18px 18px; }
  .nov-iconos > span { width: 34px; height: 34px; border-radius: 10px; }
  .nov-iconos > span svg { width: 18px; height: 18px; }
  .nov-iconos > span img { width: 34px; height: 34px; }
  .nov-iconos > span:nth-child(7) { display: none; }
}

@keyframes nov-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes nov-desaparece { from { opacity: 1; } to { opacity: 0; } }
@keyframes nov-entra { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes nov-sale { to { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes nov-sube { from { opacity: 0; transform: translateY(10px) rotate(var(--r, 0deg)); } to { opacity: 1; transform: rotate(var(--r, 0deg)); } }
@keyframes nov-numero { from { opacity: 0; transform: scale(.6); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes nov-flota { from { translate: 0 0; } to { translate: 0 -8px; } }
@keyframes nov-deriva { from { transform: translate(0, 0) scale(1); } to { transform: translate(30px, 20px) scale(1.12); } }
@keyframes nov-brillo { to { transform: translateX(120%); } }
@keyframes nov-confeti {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(.4); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--rot, 260deg)) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .nov-fondo, .nov-caja, .nov-lista li, .nov-iconos > span, .nov-version b, .nov-chip, .v2-siguiente { animation: none !important; }
  .nov-confeti, .nov-hero::after, .nov-luz { display: none; }
  html[data-version="2"] .v2-asistente::before { animation: none; }
}