/* V48.18 global-fix-7: polish without changing the visual model. */
*,*::before,*::after{box-sizing:border-box}
button,input,textarea,select{font:inherit}
button,[onclick],.mod,.banner,.accion-ruta,.tema-ruta{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button:disabled,[aria-disabled="true"]{cursor:not-allowed;filter:saturate(.7);opacity:.58}
button:focus-visible,[onclick]:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid color-mix(in srgb,var(--primario) 36%,transparent);outline-offset:3px}
.accion-ruta-info,.tema-ruta-info,.perfil-metrica-contenido,.guardada-contenido,.especificos-biblioteca-boton-copy,.perfil-identidad-principal{min-width:0}
.accion-ruta-titulo,.tema-ruta-titulo,.subtema-titulo,.perfil-metrica-contenido b,.guardada-contenido b{overflow-wrap:anywhere}
.accion-ruta-dato,.tema-ruta-dato,.tema-ruta-chip,.accion-ruta-chip{line-height:1.2}
.app-section-label{padding:0 15px 5px;font-size:11px;color:var(--textoAcento);font-weight:900;letter-spacing:.02em}
.app-section-label.muted{padding-top:10px;color:var(--textoAcento)}
.inline-icon-text{display:inline-flex;align-items:center;gap:6px}
#buscadorGlobal::placeholder{color:color-mix(in srgb,var(--muted) 84%,transparent);opacity:1}
#appAlert,#appConfirm{overscroll-behavior:contain}
#appAlert>div,#appConfirm>div{max-height:min(88dvh,520px);overflow:auto}

/* The user-selected color should own the app chrome. Semantic states keep red/green. */
.mod.tema-marineros,.mod.tema-especificos,.mod.tema-legislacion,.mod.tema-doctrina,.mod.tema-cultura,.mod.tema-especialidad{
  --tema-a:var(--primario)!important;
  --tema-b:var(--primario2)!important;
}
.accion-ruta-simulacro,.accion-ruta-retos,.accion-ruta-membresia,.accion-ruta-soporte{
  --accion-a:var(--primario)!important;
  --accion-b:var(--primario2)!important;
}
.barra-rapida #rachaMenu,#continuarBanner{
  background:linear-gradient(135deg,var(--primario),var(--primario2))!important;
  color:var(--sobrePrimario)!important;
  box-shadow:0 3px 10px color-mix(in srgb,var(--primario) 24%,transparent)!important;
}
body:not(.dark) #especialidadPanel .esp-hero,
body:not(.dark) #especialidadPanel .esp-pay-button,
body:not(.dark) #especialidadPanel .esp-pay-button.active{
  background:linear-gradient(135deg,var(--primario2),var(--primario))!important;
  color:var(--sobrePrimario)!important;
}
#especialidadPanel .esp-kicker,
#especialidadPanel .esp-section-head small,
#especialidadPanel .esp-card-copy em,
#especialidadPanel .esp-arrow,
#especialidadPanel .esp-sheet-top small,
#especialidadPanel .esp-sheet-choice em,
#especialidadPanel .esp-sheet-choice i,
#especialidadPanel .esp-purchase-title small{
  color:var(--textoAcento)!important;
}
#especialidadPanel .esp-card-icon,
#especialidadPanel .esp-sheet-choice-icon,
#especialidadPanel .esp-sheet-selection>span,
#especialidadPanel .esp-purchase-title>span,
#especialidadPanel .esp-option b{
  background:linear-gradient(145deg,var(--primarioLight),color-mix(in srgb,var(--primario) 18%,var(--card)))!important;
  color:var(--textoAcento)!important;
}
#especialidadPanel .esp-progress i,
#especialidadPanel .esp-next{
  background:linear-gradient(90deg,var(--primario),var(--primario2))!important;
}
#especialidadPanel .esp-preview-chip,
#especialidadPanel .esp-count{
  border-color:color-mix(in srgb,var(--primario) 32%,var(--borde))!important;
  background:color-mix(in srgb,var(--primario) 10%,var(--card))!important;
  color:var(--textoAcento)!important;
}
body.dark #especialidadPanel .esp-sheet-choice,
body.dark #especialidadPanel .esp-card,
body.dark #especialidadPanel .esp-question{
  border-color:color-mix(in srgb,var(--primario) 28%,var(--borde))!important;
}

/* Local Premium cache can be shown as pending, but it must not look unlocked. */
body.premium-provisional #bannerMembresia{
  border:1px dashed color-mix(in srgb,var(--primario) 46%,var(--borde));
}
body.premium-provisional #chipMembresiaAcceso::after{
  content:" · VALIDANDO";
}

@media(max-width:420px){
  .accion-ruta,.mod.tema-ruta{gap:10px}
  .accion-ruta-icono,.mod.tema-ruta .ico{width:38px;height:38px;flex:0 0 38px}
  .tema-ruta-meta,.accion-ruta-meta{gap:4px}
}

/* V48.54 UI membresia: simplifica tarjeta sin alterar estado Premium */
#bannerMembresia #iconMembresia,
#bannerMembresia #subMembresia{
  display:none !important;
}
/* V106: Conocimientos Específicos usa exactamente la flecha estándar de tema-ruta. */


/* V106: Simulacro y Entrenamiento conservan su posicion y pasan de etiqueta compacta a CTA. */
.acciones-duo .accion-ruta-cta{
  border-color:color-mix(in srgb,var(--accion-a) 42%,var(--borde));
  background:
    radial-gradient(circle at 88% 14%,rgba(255,255,255,.24),transparent 26%),
    linear-gradient(145deg,color-mix(in srgb,var(--accion-a) 18%,var(--card)),color-mix(in srgb,var(--accion-a) 8%,var(--vidrio)));
  box-shadow:0 10px 24px color-mix(in srgb,var(--accion-a) 19%,transparent),inset 0 1px 0 rgba(255,255,255,.12);
  transition:transform .14s ease,box-shadow .18s ease,border-color .18s ease,filter .18s ease;
}
.acciones-duo .accion-ruta-cta .accion-ruta-titulo{
  font-weight:950;
  letter-spacing:.025em;
}
.acciones-duo .accion-ruta-cta .accion-ruta-chip{
  color:var(--sobrePrimario);
  background:linear-gradient(135deg,var(--accion-a),var(--accion-b));
  border-color:transparent;
  box-shadow:0 4px 10px color-mix(in srgb,var(--accion-a) 24%,transparent);
}
.acciones-duo .accion-ruta-cta .accion-ruta-flecha{
  color:var(--sobrePrimario);
  background:linear-gradient(135deg,var(--accion-a),var(--accion-b));
  border:1px solid color-mix(in srgb,#fff 18%,transparent);
  box-shadow:0 5px 12px color-mix(in srgb,var(--accion-a) 25%,transparent);
}
.acciones-duo .accion-ruta-cta:active{
  transform:scale(.985);
  box-shadow:0 6px 15px color-mix(in srgb,var(--accion-a) 16%,transparent),inset 0 1px 0 rgba(255,255,255,.1);
  filter:saturate(1.04);
}
html.academia-hover-capable .acciones-duo .accion-ruta-cta:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--accion-a) 58%,var(--borde));
  box-shadow:0 13px 28px color-mix(in srgb,var(--accion-a) 23%,transparent),inset 0 1px 0 rgba(255,255,255,.14);
}
@media(max-width:520px){
  .acciones-duo .accion-ruta-cta .accion-ruta-flecha{display:flex}
}
@media(prefers-reduced-motion:reduce){
  .acciones-duo .accion-ruta-cta{transition:none}
}