/* ---------- 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}

/* --- el nombre de usuario ---
   La arroba va fuera del campo, como una marca fija: dentro habría que
   escribirla o borrarla, y es lo mismo para todo el mundo. */
.opr-ct .opr-ct-arroba{position:relative !important; display:flex !important; align-items:center !important}
.opr-ct .opr-ct-arroba > span[aria-hidden]{
  position:absolute !important; left:14px !important; font-size:1rem !important; font-weight:600 !important; color:var(--p400) !important;
  pointer-events:none !important;
}
/* OJO con la especificidad, que aquí ya ha mordido una vez: la regla base es
   `.opr-ct .opr-ct-campo input[type="text"]` —(0,3,1), porque el selector de
   atributo pesa como una clase— y `.opr-ct .opr-ct-arroba input` es (0,2,1) y
   pierde, con !important y todo. Lleva el atributo delante para empatar y ganar
   por orden. */
.opr-ct .opr-ct-arroba input[type="text"]{padding-left:32px !important; padding-right:44px !important}

/* la señal de libre u ocupado: verde y rojo, que aquí sí significan algo
   —lo dice el sistema: el color aparece después de que la persona actúa— */
.opr-ct .opr-ct-senal{
  position:absolute !important; right:13px !important; width:20px !important; height:20px !important; border-radius:999px !important;
  display:grid !important; place-items:center !important; opacity:0 !important; transition:opacity .15s ease !important;
}
.opr-ct .opr-ct-senal::after{font-size:.8125rem !important; font-weight:800 !important; line-height:1 !important}
.opr-ct .opr-ct-senal.es-mirando{opacity:1 !important; background:var(--p100) !important}
.opr-ct .opr-ct-senal.es-mirando::after{content:"…" !important; color:var(--tenue) !important}
.opr-ct .opr-ct-senal.es-libre{opacity:1 !important; background:var(--ok100) !important}
.opr-ct .opr-ct-senal.es-libre::after{content:"✓" !important; color:var(--ok600) !important}
.opr-ct .opr-ct-senal.es-pillado{opacity:1 !important; background:var(--no100) !important}
.opr-ct .opr-ct-senal.es-pillado::after{content:"✕" !important; color:var(--no600) !important}
.opr-ct .opr-ct-campo.es-bien .opr-ct-pista{color:var(--ok600) !important}
/* La sugerencia de dominio: ambar, que es el color de «mira esto», no el de
   «esto está mal». El botón parece un enlace porque lo que hace es cambiar el
   valor del campo de un toque, y un botón con aspecto de botón ahí dentro
   pesaría más que el propio aviso. */
.opr-ct .opr-ct-campo.es-ojo input{box-shadow:inset 0 0 0 1.5px var(--av500) !important}
.opr-ct .opr-ct-campo.es-ojo .opr-ct-pista{color:var(--av600) !important}
.opr-ct .opr-ct-ojo-dom{background:none !important; border:0 !important; padding:0 !important; font:inherit !important;
  color:var(--av600) !important; font-weight:700 !important; text-decoration:underline !important; cursor:pointer !important}
.opr-ct .opr-ct-ojo-dom:hover{color:var(--tinta) !important}
/* Dentro de un campo en rojo el botón va en rojo: el ámbar es de aviso y aquí
   no se está avisando, se está parando el envío. */
.opr-ct .opr-ct-campo.es-mal .opr-ct-ojo-dom{color:inherit !important}
.opr-ct .opr-ct-campo.es-mal .opr-ct-ojo-dom:hover{color:var(--tinta) !important}

/* El aviso de «cuenta creada» cuando cae fuera de este plugin —hoy en
   `/planes/`—. Allí no hay ningún contenedor nuestro que le ponga el ancho ni
   el aire, así que se los pone él: la misma medida que las secciones del
   sistema, para que no quede ni más ancho ni descolgado del resto.

   EL HUECO DE ARRIBA NO ES DECORACIÓN. La cabecera es `position:fixed`, así
   que no empuja nada: cada sección se aparta de ella con su propio relleno de
   60 a 108 px. Con los 20 px que llevaba esto, el aviso salía medio tapado por
   la barra. Comprobado en vivo, no supuesto. */
.opr-ct-bienvenida{max-width:1180px !important; margin:0 auto !important;
  padding:clamp(84px,9vw,100px) clamp(18px,4vw,40px) 0 !important}


/* --- EL CAMPO DEL DNI ---
   Va opcional, y la etiqueta lo dice: un campo que no hace falta y no lo
   parece se rellena por inercia, y este es un dato que no queremos pedir a
   quien no lo necesita. */
.opr-ct-opcional{
  margin-left:6px !important; font-size:.6875rem !important; font-weight:700 !important; letter-spacing:0 !important;
  color:var(--tenue) !important; background:var(--p100) !important;
  padding:2px 8px !important; border-radius:999px !important; vertical-align:1px !important;
}
.opr-ct-dni-cifras{letter-spacing:.08em !important}
.opr-ct-nota-dni{
  margin-top:10px !important; padding:11px 14px !important; border-radius:var(--radio-s) !important;
  background:var(--p100) !important; color:var(--suave) !important; font-size:.875rem !important; line-height:1.55 !important;
}
.opr-ct-nota-dni a{color:var(--tinta) !important; text-decoration:underline !important; text-underline-offset:3px !important}