/* ---------- sección Plataforma ---------- */
/* --- carrusel de funciones --- */
.opr-pf-mandos{display:flex !important; align-items:center !important; gap:14px !important; margin-bottom:22px !important}
.opr-pf-pista{flex:1 !important; min-width:0 !important; display:flex !important; gap:6px !important; overflow-x:auto !important; padding:2px 2px 8px !important;
  scrollbar-width:none !important; -ms-overflow-style:none !important; scroll-behavior:smooth !important}
.opr-pf-pista::-webkit-scrollbar{display:none !important}
.opr-pf-op{flex:none !important; padding:10px 18px !important; border-radius:999px !important; white-space:nowrap !important;
  font-size:.90625rem !important; font-weight:600 !important; letter-spacing:-.012em !important; color:var(--suave) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important; transition:all .18s ease !important}
.opr-pf-op:hover{color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:var(--p50) !important}
.opr-pf-op[aria-selected="true"]{background:var(--p950) !important; color:#fff !important; box-shadow:inset 0 0 0 1.5px var(--p950) !important}
.opr-pf-flechas{flex:none !important; display:flex !important; gap:6px !important}
.opr-pf-flechas button{width:38px !important; height:38px !important; border-radius:999px !important; display:grid !important; place-items:center !important;
  color:var(--suave) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important; transition:all .16s ease !important}
.opr-pf-flechas button:hover{color:var(--tinta) !important; background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important}
.opr-pf-flechas svg{width:16px !important; height:16px !important}

.opr-pf-rejilla{display:grid !important; grid-template-columns:minmax(0,.72fr) minmax(0,1fr) !important;
  gap:clamp(28px,3.5vw,52px) !important; align-items:center !important}
@media (max-width:960px){ .opr-pf-rejilla{grid-template-columns:1fr !important; gap:26px !important} }

/* Suelo por si el JavaScript no corre. El alto de verdad lo mide `reservar()`. */
.opr-pf-detalle{min-height:132px !important}
.opr-pf-tit{font-size:1.4rem !important; font-weight:800 !important; letter-spacing:-.026em !important; line-height:1.12 !important; text-wrap:balance !important}
.opr-pf-desc{margin-top:11px !important; font-size:.96875rem !important; line-height:1.55 !important; color:var(--suave) !important; text-wrap:pretty !important}
.opr-pf-lienzo{position:relative !important; touch-action:pan-y !important}

/* la agente descansa en el margen derecho de la cabecera, sin tapar nada */
.opr-plataforma .opr-cabeza{position:relative !important; margin-bottom:clamp(24px,2.8vw,36px) !important}
.opr-plataforma .opr-cabeza .opr-h2{max-width:22ch !important}
.opr-pf-agente{position:absolute !important; right:0 !important; bottom:-16px !important; width:clamp(130px,15vw,206px) !important; height:auto !important;
  z-index:1 !important; pointer-events:none !important; filter:drop-shadow(0 22px 28px rgba(18,23,28,.18)) !important}
@media (max-width:1080px){ img.opr-pf-agente{display:none !important} }


.opr-pf-pantalla{overflow:hidden !important; box-shadow:var(--sombra) !important; background:var(--superficie) !important}
.opr-pf-barra{display:flex !important; align-items:center !important; gap:6px !important; padding:12px 16px !important;
  border-bottom:1px solid var(--borde) !important; background:#FBFCFD !important}
.opr-pf-puntito{width:8px !important; height:8px !important; border-radius:999px !important; background:var(--p300) !important; flex:none !important}
.opr-pf-ruta{margin-left:10px !important; font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-pf-contenido{padding:22px 20px !important; min-height:292px !important; display:flex !important; flex-direction:column !important; gap:16px !important}
.opr-pf-contenido.es-entra{opacity:0 !important; transform:translateY(6px) !important}
.opr-pf-contenido{transition:opacity .3s ease, transform .3s ease !important}

.opr-pf-preg{font-size:1.0625rem !important; font-weight:600 !important; line-height:1.4 !important; letter-spacing:-.014em !important; text-wrap:pretty !important}
.opr-pf-ops{display:flex !important; flex-direction:column !important; gap:7px !important}
.opr-pf-ops.es-fila{flex-direction:row !important; flex-wrap:wrap !important}
.opr-pf-ops.es-fila span{flex:1 1 110px !important}
.opr-pf-ops span{display:flex !important; align-items:center !important; gap:10px !important; padding:11px 13px !important; border-radius:9px !important;
  box-shadow:inset 0 0 0 1.5px var(--borde) !important; font-size:.9375rem !important}
.opr-pf-ops i{flex:none !important; width:20px !important; height:20px !important; border-radius:5px !important; background:var(--p100) !important; color:var(--suave) !important;
  font-size:.6875rem !important; font-weight:700 !important; display:grid !important; place-items:center !important}
.opr-pf-ops em{margin-left:auto !important; font-weight:700 !important}
.opr-pf-ops .es-ok{background:var(--ok100) !important; box-shadow:inset 0 0 0 1.5px var(--ok600) !important; color:var(--ok900) !important}
.opr-pf-ops .es-ok i{background:var(--ok600) !important; color:#fff !important}

.opr-pf-nota{margin-top:auto !important; padding-top:12px !important; border-top:1px solid var(--borde) !important;
  font-size:.75rem !important; font-weight:500 !important; color:var(--tenue) !important}

.opr-pf-filas{display:flex !important; flex-direction:column !important; gap:7px !important}
.opr-pf-filas span{display:flex !important; align-items:center !important; gap:11px !important; padding:12px 13px !important; border-radius:9px !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1px var(--borde) !important; font-size:.90625rem !important; color:var(--suave) !important}
.opr-pf-filas b{flex:none !important; min-width:26px !important; text-align:center !important; font-size:.75rem !important; font-weight:700 !important;
  color:var(--tinta) !important; padding:3px 8px !important; border-radius:5px !important; background:var(--p200) !important;
  font-variant-numeric:tabular-nums !important}
.opr-pf-filas i{margin-left:auto !important; flex:none !important; font-size:.75rem !important; font-weight:700 !important; padding:3px 9px !important; border-radius:999px !important}
.opr-pf-filas .es-no{background:var(--no100) !important; color:var(--no600) !important}
.opr-pf-filas .es-av{background:var(--av100) !important; color:var(--av600) !important}
.opr-pf-filas .es-ok{background:var(--ok100) !important; color:var(--ok600) !important}
.opr-pf-filas .es-fuera{opacity:.55 !important}

.opr-pf-crono{display:flex !important; align-items:baseline !important; gap:10px !important}
.opr-pf-crono b{font-size:2.1rem !important; font-weight:800 !important; letter-spacing:-.04em !important; font-variant-numeric:tabular-nums !important; line-height:1 !important}
.opr-pf-crono span{font-size:.8125rem !important; color:var(--tenue) !important}
.opr-pf-crono em{margin-left:auto !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--suave) !important}
.opr-pf-cuadricula{display:grid !important; grid-template-columns:repeat(20,1fr) !important; gap:4px !important}
.opr-pf-cuadricula i{aspect-ratio:1 !important; border-radius:3px !important; background:var(--p100) !important}
.opr-pf-cuadricula i.es-ok{background:var(--ok500) !important}
.opr-pf-cuadricula i.es-no{background:var(--no500) !important}
.opr-pf-cuadricula i.es-nada{background:var(--p300) !important}
.opr-pf-cuadricula i.es-ahora{background:var(--p950) !important; box-shadow:0 0 0 2px var(--p300) !important}

.opr-pf-leyenda{display:flex !important; flex-wrap:wrap !important; gap:6px 16px !important}
.opr-pf-leyenda span{display:inline-flex !important; align-items:center !important; gap:6px !important; font-size:.75rem !important; font-weight:500 !important; color:var(--tenue) !important}
.opr-pf-leyenda span::before{content:'' !important; width:9px !important; height:9px !important; border-radius:3px !important; display:block !important}
.opr-pf-leyenda .es-ok::before{background:var(--ok500) !important}
.opr-pf-leyenda .es-no::before{background:var(--no500) !important}
.opr-pf-leyenda .es-nada::before{background:var(--p300) !important}

.opr-pf-marcador{display:flex !important; align-items:baseline !important; gap:7px !important}
.opr-pf-marcador b{font-size:2.1rem !important; font-weight:800 !important; letter-spacing:-.04em !important; line-height:1 !important}
.opr-pf-marcador span{font-size:.875rem !important; font-weight:600 !important; color:var(--tenue) !important}
.opr-pf-marcador em{margin-left:auto !important; font-size:.75rem !important; font-weight:700 !important; color:var(--no600) !important;
  background:var(--no100) !important; padding:4px 10px !important; border-radius:999px !important}

/* Esta pestaña no lleva nota al pie: los botones son lo último del cajón, así
   que se pegan abajo igual que la nota en las demás. Si no, con todos los
   cajones a la misma altura quedaban flotando a media caja. */
.opr-pf-botones{display:flex !important; flex-wrap:wrap !important; gap:8px !important; margin-top:auto !important}
.opr-pf-botones b{padding:11px 18px !important; border-radius:999px !important; background:var(--p950) !important; color:#fff !important;
  font-size:.84375rem !important; font-weight:700 !important}
.opr-pf-botones span{padding:11px 18px !important; border-radius:999px !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  font-size:.84375rem !important; font-weight:600 !important; color:var(--suave) !important}

.opr-pf-grafico{display:flex !important; align-items:flex-end !important; gap:8px !important; height:130px !important}
.opr-pf-grafico span{flex:1 !important; display:flex !important; flex-direction:column !important; justify-content:flex-end !important; align-items:center !important; gap:7px !important; height:100% !important}
.opr-pf-grafico i{display:block !important; width:100% !important; border-radius:5px 5px 2px 2px !important; background:var(--p800) !important;
  height:calc(var(--v) * 1%) !important; transition:height .5s cubic-bezier(.4,0,.2,1) !important}
.opr-pf-grafico .es-flojo i{background:var(--no500) !important}
.opr-pf-grafico b{font-size:.6875rem !important; font-weight:700 !important; color:var(--tenue) !important}
.opr-pf-racha{display:flex !important; align-items:center !important; gap:3px !important; flex-wrap:wrap !important}
.opr-pf-racha span{font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important; margin-right:7px !important}
.opr-pf-racha i{width:10px !important; height:10px !important; border-radius:3px !important; background:var(--p200) !important; flex:none !important}
.opr-pf-racha i.es-si{background:var(--p800) !important}
.opr-pf-racha b{margin-left:8px !important; font-size:.75rem !important; font-weight:700 !important}

.opr-pf-serie{display:flex !important; gap:9px !important; flex-wrap:wrap !important}
.opr-pf-serie b{flex:1 !important; min-width:52px !important; padding:16px 8px !important; border-radius:10px !important; text-align:center !important;
  background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
  font-size:1.35rem !important; font-weight:800 !important; letter-spacing:-.03em !important; font-variant-numeric:tabular-nums !important}
.opr-pf-serie .es-hueco{background:var(--p950) !important; color:#fff !important; box-shadow:none !important}


@media (max-width:560px){
  .opr-pf-contenido{padding:20px 16px !important}
  .opr-pf-cuadricula{grid-template-columns:repeat(10,1fr) !important}
  .opr-pf-op{padding:9px 15px !important; font-size:.84375rem !important}
  .opr-pf-flechas{display:none !important}
  .opr-pf-tit{font-size:1.25rem !important}
}