.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.header-actions{ display:flex; align-items:center; gap:12px; justify-content:flex-end; }

.header-subtitle{ display:none; }

.hamburger,
.voice-toggle{
  border:1px solid rgba(182,194,214,.58);
  border-radius:50%;
  background:linear-gradient(160deg, rgba(255,255,255,.96), rgba(235,240,250,.72));
  color:#1c2f54;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  gap:0;
  font-weight:600;
  letter-spacing:.18px;
  cursor:pointer;
  box-shadow:0 24px 38px rgba(19,32,58,.18), inset 0 1px 0 rgba(255,255,255,.88);
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.hamburger{
  width:44px;
  height:44px;
}

.hamburger span,
.hamburger span::before,
.hamburger span::after{
  content:"";
  display:block;
  width:22px;
  height:2px;
  background:currentColor;
  border-radius:999px;
  position:relative;
  transition:transform .22s ease, opacity .22s ease;
}

.hamburger span::before{
  position:absolute;
  top:-7px;
  left:0;
}

.hamburger span::after{
  position:absolute;
  bottom:-7px;
  left:0;
}

#menu-btn[aria-expanded="true"]{
  border-color:rgba(182,194,214,.72);
  background:linear-gradient(150deg, rgba(255,255,255,.98), rgba(240,244,252,.82));
  box-shadow:0 30px 44px rgba(19,32,58,.2), inset 0 1px 0 rgba(255,255,255,.92);
}

#menu-btn[aria-expanded="true"] span{
  background:transparent;
}

#menu-btn[aria-expanded="true"] span::before{
  transform:translateY(7px) rotate(45deg);
}

#menu-btn[aria-expanded="true"] span::after{
  transform:translateY(-7px) rotate(-45deg);
}

.voice-toggle{
  min-width:110px;
}

.voice-toggle .voice-icon{
  position:relative;
  width:14px;
  height:20px;
  border-radius:7px 7px 6px 6px;
  border:2px solid rgba(30,42,66,.3);
}

.voice-toggle .voice-icon::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-6px;
  width:2px;
  height:6px;
  background:rgba(30,42,66,.45);
  transform:translateX(-50%);
}

.voice-toggle .voice-icon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-8px;
  width:14px;
  height:4px;
  border-top:2px solid rgba(30,42,66,.35);
  border-radius:999px;
  transform:translateX(-50%);
}

#voice-btn[aria-pressed="true"]{
  background:linear-gradient(150deg, rgba(255,116,124,.92), rgba(255,59,48,.82));
  border-color:rgba(255,120,130,.72);
  box-shadow:0 22px 38px rgba(255,59,48,.28), inset 0 -2px 0 rgba(0,0,0,.12);
}

#voice-btn[aria-pressed="true"] .voice-icon{
  border-color:#fff;
}

#voice-btn[aria-pressed="true"] .voice-icon::before,
#voice-btn[aria-pressed="true"] .voice-icon::after{
  background:#fff;
  border-color:#fff;
}

.hamburger:focus-visible,
.voice-toggle:focus-visible{
  outline:3px solid rgba(126,154,240,.38);
  outline-offset:3px;
}

.voice-toggle.is-disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

.hamburger:hover,
.voice-toggle:hover{
  transform:translateY(-2px);
  box-shadow:0 30px 44px rgba(19,32,58,.2), inset 0 1px 0 rgba(255,255,255,.92);
  border-color:rgba(182,194,214,.72);
  background:linear-gradient(150deg, rgba(255,255,255,.98), rgba(240,244,252,.82));
}

.menu-overlay,
.popover-overlay{
  position:fixed;
  inset:0;
  background:rgba(5,18,36,.28);
  z-index:11990;
  display:none;
}

.menu-overlay[data-visible="true"],
.popover-overlay[data-visible="true"]{
  display:block;
}

.menu-panel{
  position:fixed;
  top:var(--menu-top,66px);
  left:var(--menu-left,auto);
  right:var(--menu-right,16px);
  width:min(320px, calc(100% - 32px));
  max-height:min(70vh, 540px);
  overflow:auto;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(9,27,54,.12);
  border-radius:18px;
  box-shadow:0 22px 46px rgba(0,0,0,.22), 0 6px 16px rgba(0,0,0,.18);
  padding:18px 20px;
  z-index:12000;
  transform:translateY(-12px);
  opacity:0;
  pointer-events:none;
  transition:transform .22s ease, opacity .2s ease;
}

.menu-panel[data-open="true"]{
  pointer-events:auto;
  opacity:1;
  transform:translateY(0);
}

.menu-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: var(--menu-arrow-x, calc(50% - 8px));
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(240,246,255,0.98));
  border-left: 1px solid rgba(9,27,54,.12);
  border-top: 1px solid rgba(9,27,54,.12);
  border-radius: 4px 0 0 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transform: rotate(45deg);
  z-index: 12001;
}

.menu-panel__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.menu-panel__header h2{
  margin:0;
  font-size:1rem;
}

.menu-close{
  border:none;
  background:rgba(0,0,0,.08);
  color:#031326;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  line-height:1;
  transition:background .2s ease, transform .2s ease;
}

.menu-close:hover{
  background:rgba(0,0,0,.16);
  transform:scale(1.05);
}

.menu-close:focus-visible{
  outline:3px solid rgba(0,75,143,.45);
  outline-offset:2px;
}

/* Botón minimizar dentro del encabezado del panel */
.menu-minimize{
  border:none;
  background:rgba(9,27,54,.12);
  color:#0b2342;
  width:36px;
  height:36px;
  border-radius:50%;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1.3rem;
  line-height:1;
  transition:background .18s ease, transform .18s ease;
  margin-right:8px;
}
.menu-minimize:hover{ background:rgba(9,27,54,.2); transform:scale(1.05); }
.menu-minimize:focus-visible{ outline:3px solid rgba(28,97,215,.45); outline-offset:2px; }

/* Estado minimizado del panel: queda como una pill compacta anclada al botón */
.menu-panel[data-minimized="true"]{
  width:auto;
  max-width:68vw;
  padding:8px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transform:translateY(0);
  opacity:1;
  pointer-events:auto;
}
.menu-panel[data-minimized="true"]::before{
  top:-6px;
  filter: drop-shadow(0 -1px 0 rgba(9,27,54,.12));
}
/* Ocultamos contenido cuando está minimizado, dejando solo el header compacto */
.menu-panel[data-minimized="true"] .menu-panel__list,
.menu-panel[data-minimized="true"] .menu-panel__body{
  display:none !important;
}
.menu-panel[data-minimized="true"] .menu-panel__header{
  margin:0;
}
.menu-panel[data-minimized="true"] .menu-panel__header h2{
  font-size:.95rem;
  margin:0;
}
/* En estado minimizado, el overlay no es necesario; el JS ya lo oculta */

@media (max-width:640px){
  /* Respeta notch/safe-area en iOS */
  .site-header{ padding-top: max(0px, env(safe-area-inset-top)); }
  .menu-panel[data-minimized="true"]{
    max-width:86vw;
    padding:8px 12px;
  }
}

.menu-panel__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:10px;
}

.menu-panel__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.75);
  border:1px solid rgba(15,55,120,.16);
  text-decoration:none;
  color:#0d2b60;
  font-weight:600;
  transition:background .18s ease, transform .18s ease, border-color .18s ease;
}

.menu-panel__list a:hover{
  background:#e3edff;
  border-color:#1c61d7;
  transform:translateX(2px);
}

.menu-panel__list a:focus-visible{
  outline:3px solid rgba(28,97,215,.45);
  outline-offset:2px;
}

.app-brand{
  margin:4px 0 16px;
  padding:4px 0 14px;
  border-bottom:1px solid rgba(12,27,52,.09);
}

.app-brand__title{
  margin:0;
  font-size:1rem;
  font-weight:700;
  color:#0f2b55;
}

.app-brand__subtitle{
  margin:6px 0 0;
  font-size:.82rem;
  color:rgba(15,35,61,.66);
  letter-spacing:.01em;
}

.menu-panel .menu-voice-toggle{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-radius:14px;
  border:1px solid rgba(16,46,94,.2);
  background:linear-gradient(150deg, rgba(255,255,255,.94), rgba(241,247,255,.78));
  color:#103056;
  padding:11px 14px;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  box-shadow:0 18px 28px rgba(12,29,58,.14), inset 0 1px 0 rgba(255,255,255,.8);
  text-align:left;
}

.menu-panel .menu-voice-toggle .voice-toggle__label{
  font-size:.95rem;
  font-weight:600;
  flex:1;
}

.menu-panel .menu-voice-toggle .voice-indicator{
  width:10px;
  height:10px;
  border-radius:50%;
  background:rgba(16,140,82,.26);
  box-shadow:0 0 0 3px rgba(16,140,82,.1);
  transition:background .2s ease, box-shadow .2s ease;
}

.menu-panel .menu-voice-toggle.active{
  border-color:rgba(34,125,210,.48);
  background:linear-gradient(150deg, rgba(90,160,255,.94), rgba(30,90,190,.86));
  color:#fff;
  box-shadow:0 24px 36px rgba(30,90,190,.25), inset 0 1px 0 rgba(255,255,255,.3);
}

.menu-panel .menu-voice-toggle.active .voice-indicator{
  background:#3ff0a4;
  box-shadow:0 0 0 4px rgba(63,240,164,.26);
}

.menu-panel .menu-voice-toggle.is-disabled .voice-indicator,
.menu-panel .menu-voice-toggle[disabled] .voice-indicator{
  background:rgba(16,46,94,.22);
  box-shadow:none;
  animation:none;
}

.menu-panel .menu-voice-toggle.is-disabled,
.menu-panel .menu-voice-toggle[disabled]{
  opacity:.6;
  cursor:not-allowed;
  box-shadow:none;
  transform:none;
}

.menu-panel .menu-voice-toggle[data-listening="true"] .voice-indicator{
  animation:pulse 1.2s ease-in-out infinite;
  background:#3ff0a4;
  box-shadow:0 0 0 0 rgba(63,240,164,.3);
}

@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(63,240,164,.32); }
  70%{ box-shadow:0 0 0 8px rgba(63,240,164,0); }
  100%{ box-shadow:0 0 0 0 rgba(63,240,164,0); }
}

.menu-panel .menu-voice-toggle:focus-visible{
  outline:3px solid rgba(54,110,220,.45);
  outline-offset:2px;
}

.menu-panel .menu-voice-toggle:hover:not(.is-disabled):not([disabled]){
  transform:translateY(-1px);
  box-shadow:0 26px 40px rgba(12,29,58,.2), inset 0 1px 0 rgba(255,255,255,.86);
}

.menu-panel .menu-voice-toggle .voice-icon{
  position:relative;
  width:16px;
  height:22px;
  border-radius:8px 8px 6px 6px;
  border:2px solid currentColor;
}

.menu-panel .menu-voice-toggle .voice-icon::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:-7px;
  width:2px;
  height:7px;
  background:currentColor;
  transform:translateX(-50%);
}

.menu-panel .menu-voice-toggle .voice-icon::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-10px;
  width:16px;
  height:5px;
  border-top:2px solid currentColor;
  border-radius:999px;
  transform:translateX(-50%);
}

#voice-icon[data-state="off"]{
  opacity:.68;
}

#voice-icon[data-state="on"]{
  opacity:1;
}

/* ocultar el logo intermedio PAE en todas las vistas */
.brand-top{ display:none !important; }

.legacy-chip-group{
  display:none !important;
}


.control-card{
  position:relative;
  display:flex;
  align-items:stretch;
  justify-content:center;
  width:100%;
  padding:clamp(14px,1.8vw,20px) clamp(12px,2vw,18px);
  z-index:1;
  isolation:isolate;
}
.control-card.dn-info-open{ z-index:12000; }
.control-card::before{
  content:"";
  position:absolute;
  inset:clamp(10px,2vw,26px);
  border-radius:34px;
  background:linear-gradient(140deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 65%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 28px 58px rgba(12,26,48,.16);
  backdrop-filter:blur(26px) saturate(145%);
  -webkit-backdrop-filter:blur(26px) saturate(145%);
  opacity:.9;
  z-index:-2;
}
.control-card::after{
  content:"";
  position:absolute;
  inset:clamp(4px,1.2vw,16px);
  border-radius:32px;
  background:
    linear-gradient(165deg, var(--glass-md) 6%, var(--glass-lo) 54%, rgba(180,205,255,.16) 100%);
  border:1px solid rgba(255,255,255,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 22px 40px rgba(12,26,48,.18);
  opacity:1;
  z-index:-1;
}

.control-btn{
  position:relative;
  width:100%;
  max-width:440px;
  padding:clamp(24px,3.5vw,32px);
  min-height:clamp(110px,14vw,132px);
  background:linear-gradient(155deg, var(--glass-hi), var(--glass-md));
  border:1px solid rgba(255,255,255,.38);
  border-radius:32px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:clamp(20px,3vw,28px);
  text-align:left;
  cursor:pointer;
  box-shadow:var(--glow-hi), var(--inner-top);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  transition:transform .18s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  overflow:visible;
  isolation:isolate;
}

.control-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(160px 120px at 12% 10%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(220px 180px at 88% 90%, rgba(186,208,255,.28), transparent 65%);
  pointer-events:none;
  opacity:.9;
}

.control-btn::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(195deg, rgba(86,142,255,.32) 0%, rgba(52,102,218,.18) 45%, rgba(255,255,255,0) 72%);
  pointer-events:none;
  mix-blend-mode:soft-light;
  opacity:.35;
}

.control-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 36px 76px rgba(12,26,48,.24), 0 18px 36px rgba(20,33,61,.16);
  background:linear-gradient(160deg, rgba(255,255,255,.38), rgba(255,255,255,.16));
}
.control-btn:hover::after{opacity:.45;}
.control-btn:active{transform:translateY(-1px);}

.control-btn:focus-visible{
  outline:3px solid rgba(126,154,240,.4);
  outline-offset:4px;
  border-color:rgba(114,152,255,.52);
}

.control-btn[aria-expanded="true"]{
  border-color:rgba(102,152,255,.68);
  background:linear-gradient(160deg, rgba(108,164,255,.32), rgba(58,116,255,.24));
  box-shadow:0 34px 80px rgba(42,96,190,.28), 0 18px 40px rgba(18,42,120,.25);
}

.control-btn[aria-expanded="true"]::after{
  opacity:.6;
}

.control-btn[disabled]{
  opacity:.72;
  cursor:not-allowed;
  transform:none;
  box-shadow:0 28px 44px rgba(20,33,61,.12);
  border-color:rgba(255,255,255,.22);
}

.control-illustration{
  --icon-glow:#87b2ff;
  display:flex;
  align-items:center;
  justify-content:center;
  width:clamp(74px,7.8vw,86px);
  height:clamp(74px,7.8vw,86px);
  border-radius:28px;
  position:relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.75), rgba(255,255,255,0) 55%),
    linear-gradient(150deg, rgba(255,255,255,.3), rgba(118,159,255,.25)),
    linear-gradient(330deg, rgba(35,69,140,.65), rgba(12,28,60,.88));
  border:1px solid rgba(120,168,255,.5);
  box-shadow:
    0 22px 45px rgba(16,28,52,.35),
    0 8px 18px rgba(20,38,84,.28),
    inset 0 1px 0 rgba(255,255,255,.65);
  color:#dfe9ff;
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}
.control-illustration::after{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:inherit;
  background:radial-gradient(circle, rgba(135,178,255,.5), rgba(135,178,255,0) 60%);
  opacity:.35;
  filter:blur(2px);
  z-index:-1;
  transition:opacity .3s ease, transform .3s ease;
}
.control-btn:hover .control-illustration::after,
.control-btn[aria-expanded="true"] .control-illustration::after{
  opacity:.7;
  transform:scale(1.05);
}
.control-illustration svg{
  position:relative;
  z-index:1;
  width:clamp(30px,4vw,42px);
  height:clamp(30px,4vw,42px);
  stroke:currentColor;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  fill:none;
  filter:drop-shadow(0 8px 16px rgba(5,12,28,.45));
}
.control-illustration--road{
  color:#17284a;
}
.control-illustration--road svg{
  width:clamp(36px,4.8vw,50px);
  height:clamp(36px,4.8vw,50px);
}
.control-illustration--clock svg{
  width:clamp(18px,2vw,26px);
  height:clamp(18px,2vw,26px);
}
.control-illustration--weather svg{
  width:clamp(36px,4.8vw,52px);
  height:clamp(36px,4.8vw,52px);
}

.control-btn[aria-expanded="true"] .control-illustration{
  color:#fff;
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.8), rgba(255,255,255,0) 50%),
    linear-gradient(150deg, rgba(114,152,255,.45), rgba(44,108,255,.62)),
    linear-gradient(330deg, rgba(12,30,72,.9), rgba(32,66,140,.95));
  border-color:rgba(159,203,255,.9);
  box-shadow:
    0 26px 56px rgba(27,66,150,.45),
    0 12px 22px rgba(18,34,78,.4),
    inset 0 1px 0 rgba(255,255,255,.75);
}

@media (max-width:640px){
  body{
    padding-top:clamp(18px,6vw,30px);
  }
  .site-header .header-inner{
    padding-top:clamp(6px,3vw,14px);
  }
  .panel--control{
    align-items:stretch;
  }
  .control-card{
    padding:clamp(10px,3.4vw,16px) clamp(6px,3vw,12px);
  }
  .control-card::before{
    inset:0;
    border-radius:28px;
    box-shadow:0 16px 28px rgba(12,26,48,.12);
  }
  .control-card::after{
    inset:4px;
    border-radius:26px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 10px 18px rgba(12,26,48,.12);
  }
  .control-btn{
    max-width:none;
    border-radius:26px;
    min-height:auto;
    padding:clamp(18px,5vw,26px);
  }
  #panel-quad .panel--control + .panel--control{
    margin-top:clamp(14px,4vw,20px);
  }
  #notas-scoring{
    margin-bottom:clamp(12px,4vw,22px);
  }
  footer.site-footer{
    margin-top:clamp(12px,4vw,20px);
  }
}

.control-text{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:10px;
  min-width:0;
  position:relative;
}

.dn-line{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
}

.dn-info-wrap{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  z-index:1;
}

.dn-line .control-value{
  white-space:nowrap;
  flex:0 1 auto;
}

.dn-info-btn{
  width:32px;
  height:32px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.72);
  background:linear-gradient(155deg, rgba(255,255,255,.92), rgba(235,241,255,.58));
  box-shadow:var(--inner-top), 0 12px 24px rgba(14,28,58,.16);
  color:rgba(34,58,102,.76);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.04em;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease, color .22s ease;
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  padding:0;
  line-height:1;
}
.dn-info-btn:hover{
  transform:translateY(-2px);
  box-shadow:var(--inner-top), 0 18px 34px rgba(14,28,58,.2);
  border-color:rgba(112,152,255,.6);
  color:var(--accent);
}
.dn-info-btn:active{
  transform:translateY(0);
}
.dn-info-btn:focus-visible{
  outline:3px solid rgba(112,152,255,.45);
  outline-offset:3px;
}
.dn-info-btn.is-disabled,
.dn-info-btn[aria-disabled="true"]{
  cursor:not-allowed;
  opacity:.55;
  box-shadow:none;
  transform:none;
}
.dn-info-btn span[aria-hidden="true"]{
  font-size:.9rem;
  pointer-events:none;
}

.dn-info-popover{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  min-width:220px;
  max-width:300px;
  width:max-content;
  padding:18px 22px 20px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,244,255,.9));
  border:1px solid rgba(100,140,228,.24);
  box-shadow:
    var(--inner-top),
    0 26px 52px rgba(14,28,58,.22),
    0 12px 26px rgba(14,28,58,.14);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  z-index:16000;
  opacity:0;
  transform:translate(-50%, -8px);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.dn-info-popover::before{
  content:"";
  position:absolute;
  top:-8px;
  left:50%;
  width:16px;
  height:16px;
  border-radius:4px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(240,244,255,.9));
  border-left:1px solid rgba(100,140,228,.24);
  border-top:1px solid rgba(100,140,228,.24);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 10px 18px rgba(14,28,58,.12);
  pointer-events:none;
}
.dn-info-popover.is-visible{
  opacity:1;
  transform:translate(-50%, 0);
  pointer-events:auto;
}

body.dn-info-layer #panel-quad{
  z-index:20000;
}

.dn-info-inner{
  display:grid;
  gap:14px;
}

.dn-info-title{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(34,58,102,.58);
  position:relative;
}
.dn-info-title::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-8px;
  height:1px;
  background:linear-gradient(90deg, rgba(90,130,220,.0), rgba(90,130,220,.22), rgba(90,130,220,.0));
}
.dn-info-month{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:.82rem;
  font-weight:750;
  letter-spacing:.08em;
  color:var(--ink-strong);
  background:rgba(103,140,235,.14);
  white-space:nowrap;
  line-height:1;
}

.dn-info-list{
  margin:0;
  padding:6px 0 0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dn-info-list::before{
  content:"";
  display:block;
  height:1px;
  background:linear-gradient(90deg, rgba(90,130,220,.0), rgba(90,130,220,.22), rgba(90,130,220,.0));
  margin:-2px 0 4px;
}
.dn-info-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.dn-info-item dt{
  margin:0;
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(34,58,102,.56);
}
.dn-info-item dd{
  margin:0;
  font-size:1.02rem;
  font-weight:760;
  letter-spacing:.02em;
  color:var(--ink-strong);
  font-variant-numeric:tabular-nums;
}

.dn-info-faq{
  margin:6px 0 0;
  padding-top:12px;
  border-top:1px solid rgba(96,128,210,.16);
}
.dn-info-faq summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  list-style:none;
  cursor:pointer;
  font-size:.74rem;
  font-weight:640;
  letter-spacing:.05em;
  color:rgba(34,58,102,.66);
  text-transform:uppercase;
}
.dn-info-faq summary::-webkit-details-marker{display:none;}
.dn-info-faq summary::before{
  content:"▸";
  font-size:.72rem;
  color:rgba(34,58,102,.6);
  transform-origin:center;
  transition:transform .18s ease;
}
.dn-info-faq[open] summary{
  color:var(--ink-strong);
}
.dn-info-faq[open] summary::before{
  transform:rotate(90deg);
  color:var(--ink-strong);
}
.dn-info-faq summary:focus-visible{
  outline:2px solid rgba(90,130,220,.35);
  outline-offset:3px;
  border-radius:6px;
}
.dn-info-faq p{
  margin:10px 0 0;
  font-size:.78rem;
  line-height:1.52;
  color:rgba(34,58,102,.72);
}

.dn-info-popover:focus-visible{
  outline:3px solid rgba(112,152,255,.4);
  outline-offset:4px;
}

.dn-mode-tag{
  font-size:.72rem;
  font-weight:680;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(34,58,102,.58);
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:rgba(98,132,220,.1);
  padding:4px 10px;
  border-radius:999px;
  flex:0 0 auto;
  white-space:nowrap;
}

@media (max-width:640px){
  .dn-info-popover{
    left:0;
    transform:translate(0, -8px);
    min-width:200px;
  }
  .dn-info-popover.is-visible{
    transform:translate(0, 0);
  }
  .dn-info-popover::before{
    left:24px;
    transform:rotate(45deg);
  }
}

.control-label{
  font-size:.72rem;
  font-weight:720;
  text-transform:uppercase;
  letter-spacing:.36em;
  color:rgba(14,33,70,.60);
  text-shadow:0 12px 20px rgba(12,32,58,.2);
}

.control-value{
  font-size:clamp(1.28rem,2.6vw,1.58rem);
  font-weight:780;
  color:var(--ink);
  letter-spacing:.005em;
  line-height:1.2;
  max-width:100%;
  word-break:break-word;
  text-shadow:0 20px 32px rgba(14,28,58,.22);
}

.control-value-note{
  display:block;
  margin-top:6px;
  font-size:clamp(.72rem,1.9vw,.86rem);
  font-weight:480;
  text-transform:none;
  letter-spacing:.08em;
  color:rgba(13,29,56,.7);
  text-shadow:none;
  line-height:1.35;
}



.control-details{
  width:100%;
  max-width:440px;
  margin:20px auto 0;
  padding:clamp(20px,3vw,26px);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 28px 56px rgba(15,32,64,.18), inset 0 1px 0 rgba(255,255,255,.65);
  backdrop-filter:blur(24px) saturate(150%);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
}

@media (max-width:640px){
  .control-card{padding:12px 6px;}
  .control-card::before{inset:8px 14px;}
  .control-btn{
    grid-template-columns:1fr;
    justify-items:center;
    text-align:center;
    padding:24px 20px;
  }
  .control-text{
    align-items:center;
    gap:8px;
  }
}

.control-details[hidden]{
  display:none;
}

.popover{
  position:fixed;
  inset:0;
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 12010;
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
}

.popover[hidden]{
  display:none;
}

.popover[data-open="true"]{
  pointer-events:auto;
  opacity:1;
}

.popover-box{
  width:min(440px, calc(100% - 32px));
  background:linear-gradient(165deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  border-radius:20px;
  border:1px solid rgba(255,255,255,.36);
  box-shadow:0 30px 72px rgba(8,22,48,.32), inset 0 1px 0 rgba(255,255,255,.35);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  display:flex;
  flex-direction:column;
  max-height:90vh;
  transform:translateY(12px);
  transition:transform .22s ease;
}

.popover[data-open="true"] .popover-box{
  transform:translateY(0);
}

.popover-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px 12px;
}

.popover-title{
  display:flex;
  align-items:center;
  gap:12px;
}

.popover-title h3{
  margin:0;
  font-size:1.12rem;
  color:#0b2342;
}

.popover-icon{
  width:40px;
  height:40px;
  border-radius:14px;
  background:linear-gradient(180deg,#2f80ed,#1c61d7);
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.popover-icon svg{
  width:22px;
  height:22px;
  fill:currentColor;
}

.popover-close{
  border:none;
  background:rgba(9,27,54,.12);
  color:#0b2342;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.6rem;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background .18s ease, transform .18s ease;
}

.popover-close:hover{
  background:rgba(9,27,54,.2);
  transform:scale(1.05);
}

.popover-close:focus-visible{
  outline:3px solid rgba(28,97,215,.45);
  outline-offset:2px;
}

.popover-body{
  padding:0 20px 20px;
  overflow:auto;
  display:grid;
  gap:16px;
}

.chips{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(130px, 1fr));
  gap:12px;
}

.chip{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:12px 16px;
  border-radius:18px;
  background:linear-gradient(160deg, rgba(255,255,255,.32), rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.36);
  color:#173458;
  font-weight:640;
  text-align:left;
  cursor:pointer;
  box-shadow:0 18px 30px rgba(14,32,64,.16);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}

.chip:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 38px rgba(14,32,64,.22);
  background:linear-gradient(160deg, rgba(255,255,255,.4), rgba(255,255,255,.18));
}

.chip:focus-visible{
  outline:3px solid rgba(102,152,255,.45);
  outline-offset:3px;
}

.chip[aria-pressed="true"],
.chip.is-active,
.chip.active{
  border-color:rgba(104,158,255,.6);
  background:linear-gradient(160deg, rgba(112,168,255,.32), rgba(60,118,248,.24));
  color:#0f2850;
  box-shadow:0 26px 48px rgba(36,82,168,.26);
}

.chip[disabled]{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

.option-group{
  border:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.option-group legend{
  font-size:.92rem;
  font-weight:700;
  color:#0b2342;
  margin-bottom:6px;
}

.option{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(160deg, rgba(255,255,255,.35), rgba(255,255,255,.12));
  border:1px solid rgba(255,255,255,.32);
  cursor:pointer;
  box-shadow:0 14px 28px rgba(12,30,60,.16);
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  transition:background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.option:hover{
  background:linear-gradient(160deg, rgba(255,255,255,.42), rgba(255,255,255,.18));
  border-color:rgba(110,160,255,.45);
  box-shadow:0 20px 36px rgba(18,40,88,.2);
  transform:translateY(-1px);
}

.option input[type="radio"]{
  appearance:none;
  width:18px;
  height:18px;
  border:2px solid rgba(32,78,152,.45);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  transition:border-color .18s ease, box-shadow .18s ease;
}

.option input[type="radio"]::after{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:transparent;
  transition:background .18s ease;
}

.option input[type="radio"]:checked{
  border-color:#3d86ff;
  box-shadow:0 0 0 4px rgba(61,134,255,.22);
}

.option input[type="radio"]:checked::after{
  background:#3d86ff;
}

.option input[type="radio"]:focus-visible{
  outline:3px solid rgba(28,97,215,.45);
  outline-offset:2px;
}

.option input[type="radio"]:disabled{
  opacity:.45;
  border-color:rgba(15,55,120,.25);
  box-shadow:none;
}

.option input[type="radio"]:disabled::after{
  background:transparent;
}

.option input[type="radio"]:disabled + span{
  opacity:.55;
}

.option span{
  font-weight:600;
  color:var(--ink-strong);
  text-shadow:0 10px 20px rgba(16,36,68,.18);
}

.option-group--wind{
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,.22);
}

.popover-help{
  margin:0;
  font-size:.9rem;
  color:#1f3556;
  background:linear-gradient(160deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  border-radius:12px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 16px 30px rgba(10,26,52,.18);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
}

body.menu-open{
  overflow:hidden;
}
body.popover-open{
  overflow:visible;
}

.panel-title[data-popover-target]{
  cursor:pointer;
}

.panel-title[data-popover-target]:focus-visible{
  outline:3px solid rgba(28,97,215,.45);
  outline-offset:4px;
}

@media (max-width:640px){
  .header-bar{
    justify-content:space-between;
  }
  .voice-toggle{
    min-width:0;
    padding:10px 14px;
  }
  .menu-panel{
    top:var(--menu-top,60px);
    left:var(--menu-left, auto);
    right:var(--menu-right, 12px);
    width:min(320px, calc(100% - 24px));
  }
  .menu-panel::before{ left: var(--menu-arrow-x, calc(50% - 6px)); }
}
.panel--control{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
}

.panel--control .panel-content{
  width:100%;
  margin-top:16px;
}
.control-card--time .control-details{margin-top:clamp(18px,2.6vw,24px);}
.time-note{margin:6px 0 0;text-align:left;}
.time-note button{
  background:none;
  border:none;
  padding:0;
  font:inherit;
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.time-note button:focus-visible{outline:3px solid rgba(173,208,255,.65);outline-offset:2px;}
.time-note button[aria-expanded="true"]{color:#0a3c7a;}
/* ====== Glass / iOS look para Notas y Scoring ====== */

/* Tarjetas primarias (selector de camino/clima/vehículo/horario) */
.control-btn{
  background:linear-gradient(155deg, var(--glass-hi), var(--glass-md));
  border:1px solid rgba(255,255,255,.38);
  box-shadow:var(--glow-hi), var(--inner-top);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}

/* Tarjetas secundarias (contenedores grandes / paneles) */
.control-card::after{
  background:linear-gradient(165deg, var(--glass-md) 6%, var(--glass-lo) 54%, rgba(180,205,255,.16) 100%);
}

/* Bloque Notas & Scoring (más translúcido) */
#notas-scoring.glass-card{
  background:linear-gradient(180deg, var(--glass-md), var(--glass-lo));
  border-color:rgba(255,255,255,.7);
  box-shadow:var(--glow-md), var(--inner-top);
  backdrop-filter:blur(14px) saturate(150%);
  border-radius:26px;
}

#notas-scoring .section-header{
  border-radius:26px 26px 0 0;
}

#notas-scoring.glass-card.is-collapsed .section-header{
  border-radius:26px;
}

#notas-scoring .section-content{
  border-radius:0 0 26px 26px;
}

#notas-scoring .section-title{
  text-transform:none;
  margin-left:0.6em;
}

.glass-card::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(15,33,69,0.05);
}

.section-header{
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  min-height: 56px;
}

.title-wrap{
  display: flex; align-items: center; gap: 0;
}

.section-title{
  margin: 0;
  font-weight: 800;
  font-size: clamp(14px, 1.6vw, 16px);
  letter-spacing: .02em;
  color: var(--ink);
  position: relative;
  text-transform: uppercase;
}

.section-title span{
  text-transform: none;
  font-weight: 700;
  color: var(--ink);
}

.section-title::after{
  content:"";
  position:absolute; left:-6px; right:-6px; bottom:-8px;
  height: 2px;
  background: linear-gradient(90deg, rgba(43,108,255,.0), rgba(43,108,255,.7), rgba(43,108,255,.0));
  border-radius: 999px;
}

.header-actions{
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto; /* empuja a la derecha sin forzar altura */
}

.icon-btn, .collapse-btn{
  appearance: none;
  border: 0;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(255,255,255,0.8);
  width: 38px; height: 38px;
  padding: 0; border-radius: 12px; color: var(--muted);
  backdrop-filter: blur(10px) saturate(160%);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  box-shadow: 0 2px 8px rgba(15,33,69,0.06);
  cursor: pointer;
  transition: box-shadow .2s ease, background .2s ease, transform .12s ease;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 0;
  margin: 0;                 /* evita desalineación */
  vertical-align: middle;    /* centra en línea base */
  transform: translateY(0);  /* reset sin offset */
}
.icon-btn:hover, .collapse-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(15,33,69,0.12);
}
.icon-btn:active, .collapse-btn:active{ transform: translateY(0); }

.collapse-btn .chevron{ transition: transform .25s ease; transform: rotate(180deg); }
.glass-card.is-collapsed .collapse-btn .chevron{ transform: rotate(-90deg); }

/* Ajuste fino leve: baja un poco más el botón cuando el card está contraído */
.glass-card.is-collapsed .collapse-btn{
  transform: translateY(11px); /* baja 11px respecto del centro */
}
/* En hover, sube 1px desde esa base (queda en +10px) */
.glass-card.is-collapsed .collapse-btn:hover{
  transform: translateY(10px);
}
/* En active vuelve a la base (sensación de clic) */
.glass-card.is-collapsed .collapse-btn:active{
  transform: translateY(11px);
}

.section-content{
  padding: 10px 18px 16px 18px;
  display: grid;
  gap: 10px;
  border-top: 1px solid rgba(15,33,69,0.06);
  transition: grid-template-rows .3s ease, padding .25s ease, opacity .25s ease;
}

.note{
  display: grid;
  grid-template-columns: 18px 1fr;
  align-items: start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.6));
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 2px 10px rgba(15,33,69,0.04);
}

.note p{
  margin: 0;
  color: var(--muted);
  font-size: clamp(13px, 1.5vw, 14px);
  line-height: 1.45;
}
.note strong{ color: var(--ink-strong); font-weight: 700; }

.note .dot{
  width: 10px; height: 10px; border-radius: 999px; margin-top: 6px;
  background: radial-gradient(circle at 30% 30%, #7bd3ff, #2b6cff);
  box-shadow: 0 0 0 3px rgba(43,108,255,0.12);
}

#notas-scoring .note{
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.62));
  border:1px solid rgba(255,255,255,.82);
  box-shadow:var(--inner-top), 0 10px 24px rgba(14,28,58,.10);
}
#notas-scoring .note .dot{
  background:radial-gradient(circle at 30% 30%, #94c7ff, #2b6cff);
  box-shadow:0 0 0 3px rgba(43,108,255,.14);
}

.glass-card.is-collapsed .section-content{
  padding-top: 0; padding-bottom: 0;
  opacity: 0;
}
.glass-card.is-collapsed #notas-content{
  height: 0; overflow: hidden;
}

/* Intento resistente por clase común */
.hero, .page-hero, .header-hero, .intro-hero{
  min-height: clamp(220px, 32vh, 360px);
  padding-block: clamp(24px, 6vh, 48px);
  letter-spacing:.01em;
}
.hero h1, .page-hero h1{ font-stretch: 100%; }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
  .glass-card, .control-btn, .option, .note{ background:#fff; }
  .control-value, .section-title{ color:#0c1e3a; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; }
}

/* Dark mode */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#e7eeff;
    --ink-strong:#f6f8ff;
    --muted:rgba(230,238,255,.78);
    --glass-hi:rgba(18,28,48,.62);
    --glass-md:rgba(14,22,38,.48);
    --glass-lo:rgba(10,16,28,.34);
    --glass-stroke:rgba(200,220,255,.12);
  }
  .glass-card, .control-btn, .option, .note{
    border-color:rgba(255,255,255,.1);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 24px 46px rgba(0,0,0,.36);
  }
}

:root{
  --ink:#0e2146;
  --ink-strong:#0a1833;
  --muted:rgba(14,33,70,.72);
  --muted-weak:rgba(14,33,70,.56);
  --glass-hi:rgba(255,255,255,.78);
  --glass-md:rgba(255,255,255,.62);
  --glass-lo:rgba(255,255,255,.42);
  --glass-stroke:rgba(10,30,60,.12);
  --accent:#2b6cff;
  --glow-hi:0 28px 64px rgba(12,26,48,.22);
  --glow-md:0 18px 36px rgba(16,30,60,.16);
  --inner-top:inset 0 1px 0 rgba(255,255,255,.75);
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.7);
  --soft-shadow:0 10px 30px rgba(15,33,69,0.08), 0 2px 8px rgba(15,33,69,0.06);
  --radius-2xl:22px;
}

/* Dos columnas en desktop, una en móvil (si los contenedores comparten clase) */
@media (max-width: 860px){
  .controls-grid, .panel--control .panel-content, .cards-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .control-card{ padding:14px 10px; }
}

/* Ambient background refinement */
body{
  background:
    radial-gradient(140% 180% at 16% 6%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(130% 160% at 88% -12%, rgba(190,210,255,.32) 0%, rgba(190,210,255,0) 70%),
    radial-gradient(120% 150% at 82% 96%, rgba(205,218,255,.26) 0%, rgba(205,218,255,0) 75%),
    linear-gradient(188deg, #f6f8fc 0%, #dde4f6 100%);
  background-attachment: fixed;
}
body::before{
  background:
    radial-gradient(70% 70% at 18% 14%, rgba(255,255,255,.82) 0%, rgba(255,255,255,0) 64%),
    radial-gradient(60% 60% at 80% 6%, rgba(196,210,255,.3) 0%, rgba(196,210,255,0) 66%),
    radial-gradient(80% 80% at 86% 88%, rgba(208,220,255,.25) 0%, rgba(208,220,255,0) 70%);
  opacity:.95;
}

.container{
  background:
    radial-gradient(140% 120% at 14% 14%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.42) 58%, rgba(255,255,255,0) 82%),
    radial-gradient(130% 110% at 82% 12%, rgba(190,208,255,.26) 0%, rgba(190,208,255,0) 70%),
    linear-gradient(200deg, rgba(255,255,255,.92) 0%, rgba(238,243,255,.64) 100%);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 52px 108px rgba(16,30,58,.15);
}
.container::before{
  background:
    radial-gradient(130% 110% at 16% 18%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(110% 100% at 82% 10%, rgba(198,210,255,.32) 0%, rgba(198,210,255,0) 70%);
  opacity:.88;
}

#panel-quad{
  overflow:visible !important;
  background:
    radial-gradient(140% 120% at 18% 20%, rgba(255,255,255,.96) 0%, rgba(255,255,255,.42) 58%, rgba(255,255,255,0) 88%),
    radial-gradient(120% 110% at 82% 18%, rgba(188,210,255,.3) 0%, rgba(188,210,255,0) 76%),
    linear-gradient(195deg, rgba(255,255,255,.94), rgba(233,240,255,.7)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:0 48px 96px rgba(16,30,56,.14), 0 18px 42px rgba(118,138,188,.12) !important;
}
#panel-quad::before{
  background:
    radial-gradient(130% 110% at 22% 24%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 68%),
    linear-gradient(210deg, rgba(255,255,255,.84), rgba(226,235,255,.42));
  box-shadow:0 42px 78px rgba(16,30,56,.12);
  opacity:.9;
}
#panel-quad::after{
  background:
    radial-gradient(150% 130% at 78% 80%, rgba(204,216,255,.28) 0%, rgba(204,216,255,0) 78%),
    linear-gradient(205deg, rgba(255,255,255,.76), rgba(220,230,248,.4));
  opacity:.72;
}

.panel{
  background:
    radial-gradient(130% 110% at 20% 18%, rgba(255,255,255,.94) 0%, rgba(255,255,255,.42) 62%, rgba(255,255,255,0) 86%),
    linear-gradient(205deg, rgba(255,255,255,.9), rgba(236,242,255,.6));
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 30px 64px rgba(16,30,56,.13), inset 0 1px 0 rgba(255,255,255,.78);
}
.panel::before{
  background:
    radial-gradient(120% 100% at 26% 24%, rgba(255,255,255,.78) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(110% 90% at 88% 8%, rgba(196,208,255,.26) 0%, rgba(196,208,255,0) 62%);
  opacity:.76;
}
.panel--floating{ overflow:visible; position:relative; z-index:1; }