/* ---------- base común de las páginas de cuenta ----------
   Formularios, paneles y avisos. La usan las cuatro secciones, así que va en su
   propia hoja y las demás la piden como dependencia: si estuviera copiada en
   las cuatro, cambiar el alto de un campo sería cambiarlo en cuatro sitios. */

.opr-ct .opr-ct-lienzo{width:100% !important; max-width:1180px !important; margin:0 auto !important}
.opr-ct .opr-ct-lienzo.es-estrecho{max-width:452px !important}
.opr-ct .opr-ct-lienzo.es-doble{
  display:grid !important; grid-template-columns:minmax(0,1fr) minmax(0,.82fr) !important;
  gap:clamp(28px,4vw,56px) !important; align-items:start !important; max-width:1000px !important;
}

.opr-ct .opr-ct-panel{
  background:var(--superficie) !important; border-radius:var(--radio) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
  padding:clamp(26px,3.4vw,40px) !important;
}

.opr-ct .opr-ct-titulo{font-size:clamp(1.5rem,3.2vw,2rem) !important; line-height:1.1 !important}
.opr-ct .opr-ct-entradilla{margin-top:10px !important; max-width:44ch !important}
.opr-ct .opr-ct-form{margin-top:24px !important; display:flex !important; flex-direction:column !important; gap:16px !important}

/* --- campos --- */
.opr-ct .opr-ct-campo{display:flex !important; flex-direction:column !important; gap:7px !important}
.opr-ct .opr-ct-etiqueta{display:flex !important; align-items:baseline !important; justify-content:space-between !important; gap:14px !important}
.opr-ct .opr-ct-etiqueta a{font-size:.8125rem !important; font-weight:600 !important; color:var(--suave) !important; white-space:nowrap !important}
.opr-ct .opr-ct-etiqueta a:hover{color:var(--tinta) !important}
.opr-ct .opr-ct-campo > label,.opr-ct .opr-ct-etiqueta label{font-size:.90625rem !important; font-weight:600 !important; letter-spacing:-.008em !important; color:var(--tinta) !important}
.opr-ct .opr-ct-campo input[type="text"],
.opr-ct .opr-ct-campo input[type="email"],
.opr-ct .opr-ct-campo input[type="password"]{
  width:100% !important; height:48px !important; padding:0 14px !important; border-radius:var(--radio-s) !important;
  background:var(--p50) !important; color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2) !important;
  font-size:1rem !important; font-weight:500 !important;
  transition:box-shadow .15s ease, background .15s ease !important;
}
.opr-ct .opr-ct-campo input::placeholder{color:var(--p400) !important}
.opr-ct .opr-ct-campo input:hover{box-shadow:inset 0 0 0 1.5px var(--p500) !important}
.opr-ct .opr-ct-campo input:focus{
  outline:none !important; background:var(--superficie) !important;
  box-shadow:inset 0 0 0 2px var(--tinta) !important;
}
.opr-ct .opr-ct-campo.es-mal input{box-shadow:inset 0 0 0 1.5px var(--no600) !important}
.opr-ct .opr-ct-pista{font-size:.8125rem !important; color:var(--tenue) !important}
.opr-ct .opr-ct-campo.es-mal .opr-ct-pista{color:var(--no600) !important}

/* la contraseña, con el ojo dentro */
.opr-ct .opr-ct-clave{position:relative !important}
.opr-ct .opr-ct-clave input{padding-right:52px !important}
.opr-ct .opr-ct-clave{width:100% !important}
.opr-ct .opr-ct-ojo{
  position:absolute !important; right:5px !important; top:5px !important; width:38px !important; height:38px !important;
  display:grid !important; place-items:center !important; border-radius:999px !important; color:var(--suave) !important;
  transition:color .15s ease, background .15s ease !important;
}
.opr-ct .opr-ct-ojo:hover{color:var(--tinta) !important; background:var(--p100) !important}
.opr-ct .opr-ct-ojo svg{width:19px !important; height:19px !important}
.opr-ct .opr-ct-ojo .es-tapado{display:none !important}
.opr-ct .opr-ct-ojo[aria-pressed="true"] .es-tapado{display:block !important}
.opr-ct .opr-ct-ojo[aria-pressed="true"] .es-visible{display:none !important}

/* --- casillas --- */
.opr-ct .opr-ct-casilla{display:inline-flex !important; align-items:flex-start !important; gap:10px !important; cursor:pointer !important}
/* dentro de una fila, la casilla mide lo suyo: con `display:flex` era de
   bloque y se llevaba el renglón entero, y el enlace caía debajo. */
.opr-ct .opr-ct-fila .opr-ct-casilla{flex:0 1 auto !important}
.opr-ct .opr-ct-casilla input{
  width:20px !important; height:20px !important; flex:none !important; margin-top:2px !important; border-radius:6px !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important;
  display:grid !important; place-items:center !important; cursor:pointer !important;
  transition:background .15s ease, box-shadow .15s ease !important;
}
.opr-ct .opr-ct-casilla input:checked{background:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--tinta) !important}
.opr-ct .opr-ct-casilla input:checked::after{
  content:"" !important; width:10px !important; height:6px !important; border-left:2px solid #fff !important; border-bottom:2px solid #fff !important;
  transform:rotate(-45deg) translate(1px,-1px) !important;
}
.opr-ct .opr-ct-casilla span{font-size:.875rem !important; color:var(--suave) !important; line-height:1.5 !important}
.opr-ct .opr-ct-casilla a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:2px !important}

/* --- fila de opciones bajo los campos --- */
.opr-ct .opr-ct-fila{display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; flex-wrap:wrap !important}
.opr-ct .opr-ct-fila a{font-size:.875rem !important; font-weight:600 !important; color:var(--suave) !important}
.opr-ct .opr-ct-fila a:hover{color:var(--tinta) !important}

.opr-ct .opr-ct-form .opr-btn{width:100% !important; justify-content:center !important; padding:15px 24px !important}

/* --- avisos: el color solo aparece cuando significa algo --- */
.opr-ct .opr-ct-aviso{
  display:flex !important; gap:11px !important; align-items:flex-start !important; padding:13px 15px !important;
  border-radius:var(--radio-s) !important; font-size:.90625rem !important; line-height:1.5 !important;
}
.opr-ct .opr-ct-aviso svg{width:19px !important; height:19px !important; flex:none !important; margin-top:1px !important}
.opr-ct .opr-ct-aviso.es-mal{background:var(--no100) !important; color:var(--no900) !important}
.opr-ct .opr-ct-aviso.es-mal svg{color:var(--no600) !important}
.opr-ct .opr-ct-aviso.es-bien{background:var(--ok100) !important; color:var(--ok900) !important}
.opr-ct .opr-ct-aviso.es-bien svg{color:var(--ok600) !important}
.opr-ct .opr-ct-aviso.es-nota{background:var(--av100) !important; color:var(--av900) !important}
.opr-ct .opr-ct-aviso.es-nota svg{color:var(--av600) !important}
.opr-ct .opr-ct-aviso a{color:inherit !important; text-decoration:underline !important; text-underline-offset:2px !important; font-weight:600 !important}

/* --- separador con texto --- */
.opr-ct .opr-ct-separador{
  display:flex !important; align-items:center !important; gap:14px !important; margin-top:26px !important;
  font-size:.8125rem !important; color:var(--tenue) !important;
}
.opr-ct .opr-ct-separador::before,
.opr-ct .opr-ct-separador::after{content:"" !important; flex:1 !important; height:1px !important; background:var(--borde) !important}
.opr-ct .opr-ct-cierre{margin-top:18px !important; text-align:center !important; font-size:.9375rem !important; color:var(--suave) !important}
.opr-ct .opr-ct-cierre a{font-weight:700 !important; color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important}

/* --- lista con marca --- */
.opr-ct .opr-ct-lista{display:flex !important; flex-direction:column !important; gap:15px !important; margin-top:18px !important}
.opr-ct .opr-ct-lista li{display:flex !important; gap:12px !important; align-items:flex-start !important; font-size:.9375rem !important; color:var(--suave) !important; line-height:1.55 !important}
.opr-ct .opr-ct-lista b{color:var(--tinta) !important; font-weight:700 !important}
.opr-ct .opr-ct-marca{
  width:20px !important; height:20px !important; flex:none !important; margin-top:2px !important; border-radius:999px !important;
  background:var(--p100) !important; display:grid !important; place-items:center !important; position:relative !important;
}
.opr-ct .opr-ct-marca::after{
  content:"" !important; width:9px !important; height:5px !important; border-left:2px solid var(--tinta) !important; border-bottom:2px solid var(--tinta) !important;
  transform:rotate(-45deg) translate(1px,-1px) !important;
}

@media (max-width:900px){
  .opr-ct .opr-ct-lienzo.es-doble{grid-template-columns:minmax(0,1fr) !important}
}

/* --- el campo trampa: lo rellenan los robots y nadie más. Fuera de la
   pantalla y fuera del recorrido del tabulador, no con display:none, que
   algunos robots detectan. --- */
.opr-ct .opr-ct-trampa{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important}

/* --- volver al perfil desde las páginas de WooCommerce --- */
.opr-ct .opr-ct-vuelta{margin:-8px 0 22px !important}
.opr-ct .opr-ct-vuelta a{font-size:.9375rem !important; font-weight:600 !important; color:var(--suave) !important}
.opr-ct .opr-ct-vuelta a:hover{color:var(--tinta) !important}