/* cards.glasslight.css — PAE • Chips/cards claros estilo glass Apple
   Colocar después de assets/css/pages/velocidades-pae.css y styles.css
   Fuerza look claro incluso con sistema en modo oscuro. */

:root{
  --pae-blue: #1e4c9f;            /* Azul PAE */
  --chip-bg-top: #ffffff;
  --chip-bg-bot: #f6f9ff;
  --chip-border: rgba(255,255,255,.88);
  --chip-shadow-a: 0 18px 36px rgba(17,27,47,.10);
  --chip-shadow-b: 0 6px 14px rgba(17,27,47,.06);
  --chip-radius: 18px;
}

/* Mantener esquema de color claro aunque el SO esté en dark */
#panel-quad, .panel, .control-card, .popover, .menu-panel, .menu-overlay, .popover-overlay{
  color-scheme: light;
}

/* Contenedor (card grande que envuelve las 4 chips) */
#panel-quad.quad{
  --quad-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(248,252,255,.82));
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--quad-radius);
  box-shadow:
    0 28px 60px rgba(17,27,47,.10),
    0 6px 16px rgba(17,27,47,.05),
    inset 0 1px 0 rgba(255,255,255,.7);
}

/* Card individual */
.panel.panel--control .control-card{
  background: linear-gradient(180deg, var(--chip-bg-top) 0%, var(--chip-bg-bot) 100%);
  border: 1px solid var(--chip-border);
  border-radius: var(--chip-radius);
  box-shadow: var(--chip-shadow-a), var(--chip-shadow-b), inset 0 1px 0 rgba(255,255,255,.66);
  padding: clamp(8px, 1.2vw, 12px);
}

/* Botón/chip */
.panel.panel--control .control-btn{
  all: unset;
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
  width: 100%;
  padding: clamp(12px, 1.6vw, 18px) clamp(16px, 2vw, 22px);
  border-radius: calc(var(--chip-radius) - 6px);
  background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62));
  border: 1px solid rgba(255,255,255,.88);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 0 rgba(0,0,0,.02);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
}

.panel.panel--control .control-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 28px rgba(17,27,47,.12), 0 3px 8px rgba(17,27,47,.08);
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.78));
}

.panel.panel--control .control-btn:active{ transform: translateY(0); }

.panel.panel--control .control-btn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(32,87,166,.20),
    0 0 0 6px rgba(32,87,166,.12),
    0 16px 28px rgba(17,27,47,.10);
  border-color: rgba(255,255,255,.95);
}

/* Ícono dentro de la chip */
.panel.panel--control .control-illustration{
  display: grid; place-items: center;
  width: clamp(40px, 3.2vw, 46px);
  height: clamp(40px, 3.2vw, 46px);
  border-radius: 14px;
  background: linear-gradient(180deg, #eef4ff 0%, #dbeaff 100%);
  border: 1px solid rgba(22,119,255,.25);
  color: var(--pae-blue);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 3px 10px rgba(22,119,255,.16);
  flex: 0 0 auto;
}
.panel.panel--control .control-illustration svg{
  width: 24px; height: 24px; stroke: currentColor; opacity: .95;
}

/* Tipos y colores */
.panel.panel--control .control-text{ display:flex; flex-direction: column; gap: 4px; }
.panel.panel--control .control-label{
  font-size: .78rem;
  letter-spacing: .20em;
  font-weight: 800;
  color: rgba(12,25,48,.55);
  text-transform: uppercase;
}
.panel.panel--control .control-value{
  font-size: clamp(1.06rem, 1.15rem + .2vw, 1.24rem);
  font-weight: 820;
  letter-spacing: .2px;
  color: #0b1f44;
}

/* Estado activo (cuando el popover está abierto) */
#panel-quad .control-btn[aria-expanded="true"]{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.84));
  box-shadow:
    0 0 0 2px rgba(32,87,166,.24),
    0 10px 20px rgba(17,27,47,.12);
  transform: translateY(-1px);
}

/* Responsivo */
@media (max-width: 640px){
  #panel-quad.quad{ border-radius: 18px; }
  .panel.panel--control .control-card{ border-radius: 16px; }
  .panel.panel--control .control-btn{ border-radius: 12px; }
}

/* === Patch: smooth value transitions & reduced motion === */
.control-value{ transition: opacity .18s ease; will-change: opacity; }
@media (prefers-reduced-motion: reduce){
  .control-value{ transition: none !important; }
  .popover, .popover-overlay{ transition: none !important; }
}

/* === Patch: interaction polish === */
.control-btn{ touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.control-card .control-btn{ transition: transform .16s cubic-bezier(.22,.61,.36,1), box-shadow .2s cubic-bezier(.22,.61,.36,1); }