/* ==========================================================================
   PideFácil — Selector de agentes, versión móvil
   Origen: pidefacil-selector-agentes-movil.html (Codex, 2026-08-16).
   Va en .planes-media junto al selector de escritorio (selector-agentes.css):
   uno se oculta y el otro se muestra según el ancho, con la misma media
   query que ya usa el resto del sitio (900px).

   Adaptaciones al sistema del sitio:
   - Los titulares en DM Sans 900/800 pasan a --h-display en peso 800, como
     el resto (mismo criterio que selector-agentes.css).
   - Colores mapeados a los tokens del sitio; el resto de tonos concretos
     (línea de tarjeta, gris del texto de apoyo) se mantienen literales,
     igual que en el original.
   - Fuera el bloque .summary del CSS original: el export final no lo usa
     en el HTML (quedó del diseño previo), así que no hace falta.
   Requiere base.css cargado antes.
   ========================================================================== */

.selector-agentes-movil {
  --dark: #33451d;
  --line: #dce2d7;
  --muted: #75806f;
  display: none;
}

@media (max-width: 900px) {
  .selector-agentes { display: none; }
  .selector-agentes-movil { display: block; }
}

.selector-agentes-movil .agent-list {
  position: relative;
  display: grid;
  gap: 10px;
}

.selector-agentes-movil .agent-list::before {
  content: '';
  position: absolute;
  left: 40px;
  top: 80px;
  bottom: 55px;
  width: 2px;
  background: #dde3d8;
  z-index: 0;
}

.selector-agentes-movil .agent-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 52px;
  align-items: center;
  gap: 13px;
  min-height: 118px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 19px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 9px 24px rgba(51, 69, 29, 0.065);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s, box-shadow 0.4s, background 0.4s, opacity 0.4s;
}

.selector-agentes-movil .agent-card:not(.is-active) { opacity: 0.72; }

.selector-agentes-movil .agent-card.is-active {
  background: #fff;
  border-color: var(--h-accent);
  box-shadow: 0 0 0 2px rgba(152, 176, 106, 0.2), 0 15px 34px rgba(51, 69, 29, 0.12);
  transform: translateX(4px);
}

.selector-agentes-movil .agent-card.is-base {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
  box-shadow: 0 15px 34px rgba(51, 69, 29, 0.2);
  transform: none;
}

.selector-agentes-movil .agent-icon {
  position: relative;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 15px;
  background: #eef2e8;
  color: var(--dark);
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: 20px;
  transition: 0.4s;
}

.selector-agentes-movil .is-active .agent-icon {
  background: var(--h-accent);
  box-shadow: 0 8px 19px rgba(152, 176, 106, 0.3);
}

.selector-agentes-movil .agent-copy { min-width: 0; }

.selector-agentes-movil .agent-copy small {
  display: block;
  color: #98a093;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.35px;
}

.selector-agentes-movil .agent-copy h2 {
  margin: 3px 0 5px;
  font-family: var(--h-display);
  font-weight: 800;
  font-variation-settings: 'opsz' 14, 'wdth' 100;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--h-ink);
}

.selector-agentes-movil .agent-copy p {
  margin: 0;
  font-size: 13px;
  line-height: 1.25;
  color: var(--muted);
}

.selector-agentes-movil .is-base .agent-copy small { color: rgba(255, 255, 255, 0.55); }
.selector-agentes-movil .is-base .agent-copy h2 { color: #fff; }
.selector-agentes-movil .is-base .agent-copy p { color: rgba(255, 255, 255, 0.7); }

.selector-agentes-movil .agent-state {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 700;
  color: #8a9486;
}

.selector-agentes-movil .agent-state i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #c7cec2;
  transition: 0.4s;
}

.selector-agentes-movil .is-active .agent-state { color: var(--dark); }
.selector-agentes-movil .is-active .agent-state i {
  background: var(--h-accent);
  box-shadow: 0 0 0 5px rgba(152, 176, 106, 0.15);
  animation: sel-movil-pulse 1.6s infinite;
}
.selector-agentes-movil .is-base .agent-state { color: var(--h-accent); }

.selector-agentes-movil .fixed-badge {
  width: 52px;
  display: grid;
  place-items: center;
  gap: 3px;
  padding: 9px 4px;
  border-radius: 13px;
  background: var(--h-accent);
  color: var(--dark);
}

.selector-agentes-movil .fixed-badge b { font-size: 14px; line-height: 1; }
.selector-agentes-movil .fixed-badge small { font-size: 8px; font-weight: 900; letter-spacing: 0.7px; }

.selector-agentes-movil .optional-label {
  position: relative;
  z-index: 2;
  height: 28px;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  color: #7e887a;
}

.selector-agentes-movil .optional-label::before,
.selector-agentes-movil .optional-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #dee4d9;
}

.selector-agentes-movil .toggle {
  width: 52px;
  height: 31px;
  padding: 4px;
  border: 0;
  border-radius: 18px;
  background: #dfe4da;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(51, 69, 29, 0.06);
  transition: background 0.35s;
  touch-action: manipulation;
}

.selector-agentes-movil .toggle span {
  display: block;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(51, 69, 29, 0.2);
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background 0.35s;
}

.selector-agentes-movil .is-active .toggle { background: var(--h-accent); }
.selector-agentes-movil .is-active .toggle span { transform: translateX(21px); background: var(--dark); }

.selector-agentes-movil .activity {
  height: 52px;
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 15px;
  border: 1px solid #dee4d9;
  border-radius: 17px;
  background: rgba(255, 255, 255, 0.7);
  color: #6e796a;
  overflow: hidden;
}

.selector-agentes-movil .activity-mark {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: rgba(152, 176, 106, 0.2);
  color: var(--dark);
  font-weight: 900;
}

.selector-agentes-movil .activity p {
  margin: 0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.selector-agentes-movil .activity p b { color: var(--dark); }

.selector-agentes-movil .activity-bars {
  margin-left: auto;
  display: flex;
  align-items: end;
  gap: 3px;
  height: 20px;
}

.selector-agentes-movil .activity-bars i {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--h-accent);
  animation: sel-movil-bars 1.1s ease-in-out infinite;
}

.selector-agentes-movil .activity-bars i:nth-child(1) { height: 7px; }
.selector-agentes-movil .activity-bars i:nth-child(2) { height: 16px; animation-delay: 0.16s; }
.selector-agentes-movil .activity-bars i:nth-child(3) { height: 11px; animation-delay: 0.32s; }
.selector-agentes-movil .activity-bars i:nth-child(4) { height: 19px; animation-delay: 0.48s; }

@keyframes sel-movil-pulse { 50% { box-shadow: 0 0 0 8px rgba(152, 176, 106, 0); } }
@keyframes sel-movil-bars { 50% { transform: scaleY(0.5); opacity: 0.55; } }

@media (max-width: 350px) {
  .selector-agentes-movil .agent-card {
    grid-template-columns: 44px minmax(0, 1fr) 48px;
    gap: 10px;
    padding: 13px;
    min-height: 108px;
  }
  .selector-agentes-movil .agent-icon { width: 44px; height: 44px; }
  .selector-agentes-movil .agent-copy h2 { font-size: 21px; }
  .selector-agentes-movil .agent-copy p { font-size: 12px; }
  .selector-agentes-movil .fixed-badge { width: 48px; }
  .selector-agentes-movil .toggle { width: 48px; }
  .selector-agentes-movil .is-active .toggle span { transform: translateX(17px); }
}

@media (prefers-reduced-motion: reduce) {
  .selector-agentes-movil .is-active .agent-state i,
  .selector-agentes-movil .activity-bars i { animation-duration: 0.01ms !important; }
}