/* PAE · Force Light Glass – cards/chips + popovers
   -------------------------------------------------
   Forza un look claro de estilo Glasslight (iOS) independientemente
   del modo oscuro del SO/navegador. Cárgalo AL FINAL de tus estilos.
*/
:root{
  color-scheme: light;
  --pae-blue-700: #184A96;
  --pae-blue-600: #2057A6;
  --pae-blue-500: #1E4C9F;

  --force-bg-top: rgba(255,255,255,.98);
  --force-bg-bot: rgba(246,250,255,.92);
  --force-border: rgba(22,119,255,.16);
  --force-border-strong: rgba(22,119,255,.22);
  --force-text: #0E141B;
  --force-muted: rgba(33,46,72,.66);

  --force-shadow-a: 0 16px 34px rgba(15,23,42,.12);
  --force-shadow-b: 0 6px 16px rgba(15,23,42,.08);
  --force-shadow-hover: 0 26px 56px rgba(16,24,40,.12), 0 10px 22px rgba(16,24,40,.08);
  --force-radius: 18px;
}

/* === Contenedor del bloque de controles (fondo claro y limpio) === */
#panel-quad{
  background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52)) !important;
  border: 1px solid rgba(22,119,255,.10) !important;
  border-radius: 26px !important;
  box-shadow: 0 24px 48px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.5) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* === Card/Chip principal: claro, con tinte azul muy suave === */
.panel.panel--control .control-card{ background: transparent !important; }

.panel.panel--control .control-btn{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;

  min-height: 94px;
  width: 100%;
  padding: 16px 18px;

  border-radius: var(--force-radius) !important;
  border: 1px solid var(--force-border) !important;
  background: linear-gradient(180deg, var(--force-bg-top), var(--force-bg-bot)) !important;

  color: var(--force-text) !important;
  text-align: left;

  box-shadow: var(--force-shadow-a), var(--force-shadow-b) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;

  transition: transform .16s ease, box-shadow .22s ease, border-color .22s ease;
  isolation: isolate;
}
.panel.panel--control .control-btn::before{
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  pointer-events: none;
}
.panel.panel--control .control-btn::after{
  /* Glare superior suave */
  content: "";
  position: absolute;
  left: 12px; right: 12px; top: 8px;
  height: 42%;
  border-radius: 14px;
  background: radial-gradient(120% 80% at 16% 5%, rgba(255,255,255,.8), rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.panel.panel--control .control-btn:hover{
  transform: translateY(-1px);
  border-color: var(--force-border-strong) !important;
  box-shadow: var(--force-shadow-hover) !important;
}
.panel.panel--control .control-btn:active{ transform: translateY(0); }
.panel.panel--control .control-btn:focus-visible{
  outline: 3px solid rgba(80,140,255,.32);
  outline-offset: 3px;
}

/* === Icono capsulado claro === */
.panel.panel--control .control-illustration{
  width: 52px; height: 52px;
  border-radius: 14px;
  display: inline-grid; place-items: center;
  background: linear-gradient(180deg, #EEF5FF, #F9FBFF) !important;
  border: 1px solid rgba(22,119,255,.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.66), 0 6px 16px rgba(22,119,255,.14) !important;
  color: var(--pae-blue-600) !important;
}
.panel.panel--control .control-illustration svg{
  display:block; width: 28px; height: 28px;
  stroke: currentColor !important;
}

/* === Tipografía y jerarquía === */
.panel.panel--control .control-text{ display:flex; flex-direction:column; gap: 3px; }
.panel.panel--control .control-text .control-label{
  font-weight: 780 !important;
  font-size: .78rem !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--force-muted) !important;
}
.panel.panel--control .control-text .control-value{
  font-weight: 820 !important;
  font-size: 1.18rem !important;
  color: var(--force-text) !important;
}
@media (max-width:640px){
  .panel.panel--control .control-btn{ min-height: 84px; }
  .panel.panel--control .control-text .control-value{ font-size: 1.06rem !important; }
  .panel.panel--control .control-illustration{ width:46px; height:46px; border-radius:12px; }
}

/* === Popovers claros (sin oscurecer el contenido de fondo) === */
#popover-overlay{
  background: rgba(15,17,19,.08) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}
.popover .popover-box{
  border-radius: 18px !important;
  border: 1px solid var(--force-border) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  box-shadow: 0 26px 56px rgba(16,24,40,.18), 0 6px 16px rgba(16,24,40,.12) !important;
  backdrop-filter: blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
}
.popover .popover-header{ background: transparent !important; }
.popover .popover-title h3{ color: var(--force-text) !important; }
.popover .option-group .option{
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.72)) !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 14px !important;
}

/* === Seguridad: incluso si el sistema entra en modo oscuro, mantené este look claro === */
@media (prefers-color-scheme: dark){
  :root{ color-scheme: light; }
  /* Reaplicamos reglas clave para evitar overrides tardíos de otras hojas */
  .panel.panel--control .control-btn{
    background: linear-gradient(180deg, var(--force-bg-top), var(--force-bg-bot)) !important;
    border-color: var(--force-border) !important;
    color: var(--force-text) !important;
    box-shadow: var(--force-shadow-a), var(--force-shadow-b) !important;
  }
  .panel.panel--control .control-illustration{
    background: linear-gradient(180deg, #EEF5FF, #F9FBFF) !important;
    border-color: rgba(22,119,255,.22) !important;
    color: var(--pae-blue-600) !important;
  }
  #panel-quad{
    background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.52)) !important;
  }
  #popover-overlay{ background: rgba(15,17,19,.08) !important; }
  .popover .popover-box{
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.92)) !important;
  }
}