/* ---------- /mi-perfil/ ---------- */
.opr-ct-perfil{background:var(--fondo) !important}

/* --- cabecera del alumno --- */
.opr-ct-perfil .opr-ct-cabeza{
  display:flex !important; align-items:center !important; gap:16px !important; flex-wrap:wrap !important;
  margin-bottom:clamp(26px,3vw,38px) !important;
}
.opr-ct-perfil .opr-ct-inicial{
  width:56px !important; height:56px !important; flex:none !important; border-radius:999px !important;
  background:var(--p950) !important; color:#fff !important; display:grid !important; place-items:center !important;
  font-size:1.375rem !important; font-weight:800 !important; letter-spacing:-.02em !important;
}
.opr-ct-perfil .opr-ct-quien{min-width:0 !important; flex:1 1 220px !important}
.opr-ct-perfil .opr-ct-quien h1{font-size:clamp(1.4rem,2.6vw,1.85rem) !important; font-weight:800 !important; letter-spacing:-.028em !important; line-height:1.15 !important}
.opr-ct-perfil .opr-ct-quien p{font-size:.9375rem !important; color:var(--suave) !important; overflow-wrap:anywhere !important}
/* --- el plan ---
   No es una píldora con un punto verde. Dos motivos, y el segundo es del
   documento 01: el verde de este sistema significa **acierto**, y si además
   decora un estado deja de significarlo. Y una píldora es un control, y esto
   no se pulsa: es un dato. Así que se pinta como se pintan los datos aquí
   —rótulo pequeño encima, dato debajo—, con un galón a la izquierda. */
.opr-ct-perfil .opr-ct-plan{
  padding-left:14px !important; border-left:2.5px solid var(--tinta) !important;
  display:flex !important; flex-direction:column !important; gap:1px !important;
}
.opr-ct-perfil .opr-ct-plan.es-sinplan{border-left-color:var(--borde2) !important}
.opr-ct-perfil .opr-ct-plan-rotulo{
  font-size:.75rem !important; font-weight:600 !important; letter-spacing:-.005em !important; color:var(--tenue) !important;
}
.opr-ct-perfil .opr-ct-plan-nombre{
  font-size:1.0625rem !important; font-weight:800 !important; letter-spacing:-.02em !important; line-height:1.25 !important; color:var(--tinta) !important;
}
.opr-ct-perfil .opr-ct-plan.es-sinplan .opr-ct-plan-nombre{font-weight:700 !important; color:var(--suave) !important}

/* --- pestañas --- */
.opr-ct-perfil .opr-ct-pestanas{
  display:flex !important; gap:4px !important; padding:4px !important; border-radius:999px !important; background:var(--p100) !important;
  width:max-content !important; max-width:100% !important; overflow-x:auto !important; margin-bottom:clamp(22px,2.6vw,30px) !important;
  scrollbar-width:none !important;
}
.opr-ct-perfil .opr-ct-pestanas::-webkit-scrollbar{display:none !important}
.opr-ct-perfil .opr-ct-pestanas button{
  padding:10px 18px !important; border-radius:999px !important; white-space:nowrap !important;
  font-size:.9375rem !important; font-weight:600 !important; letter-spacing:-.012em !important; color:var(--suave) !important;
  transition:color .15s ease, background .15s ease, box-shadow .15s ease !important;
}
.opr-ct-perfil .opr-ct-pestanas button:hover{color:var(--tinta) !important}
.opr-ct-perfil .opr-ct-pestanas button[aria-selected="true"]{
  background:var(--superficie) !important; color:var(--tinta) !important; font-weight:700 !important; box-shadow:var(--sombra-s) !important;
}

/* Los márgenes se ponen con clase, no con `style=""`: el reset del núcleo
   lleva !important y un estilo en línea sin él pierde. */
.opr-ct-perfil .opr-ct-sub{margin-bottom:14px !important}
.opr-ct-perfil .opr-ct-sub.es-cerca{margin-bottom:14px !important}
.opr-ct-perfil .opr-ct-sub:not(.es-cerca){margin-top:30px !important}
.opr-ct-perfil .opr-ct-sub.es-lejos{margin-top:40px !important}

/* --- paneles --- */
.opr-ct-perfil .opr-ct-tarjetas{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)) !important; gap:16px !important}
.opr-ct-perfil .opr-ct-tarjeta{
  background:var(--superficie) !important; border-radius:var(--radio) !important; padding:clamp(20px,2.4vw,26px) !important;
  box-shadow:inset 0 0 0 1px var(--borde), var(--sombra-s) !important;
}
.opr-ct-perfil .opr-ct-tarjeta h3{font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.012em !important; margin-bottom:10px !important}
.opr-ct-perfil .opr-ct-tarjeta p{font-size:.9375rem !important; color:var(--suave) !important; line-height:1.55 !important}
.opr-ct-perfil .opr-ct-tarjeta .opr-btn{margin-top:18px !important}

.opr-ct-perfil .opr-ct-cifras{display:grid !important; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)) !important; gap:14px !important; margin-bottom:16px !important}
.opr-ct-perfil .opr-ct-cifra{
  background:var(--superficie) !important; border-radius:var(--radio) !important; padding:20px 22px !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-ct-perfil .opr-ct-cifra b{
  display:block !important; font-size:2rem !important; font-weight:800 !important; letter-spacing:-.03em !important; line-height:1 !important;
  font-variant-numeric:tabular-nums !important;
}
.opr-ct-perfil .opr-ct-cifra span{display:block !important; margin-top:7px !important; font-size:.8125rem !important; color:var(--tenue) !important}

/* qué abre el plan */
.opr-ct-perfil .opr-ct-abre{display:flex !important; flex-direction:column !important; gap:11px !important; margin-top:16px !important}
.opr-ct-perfil .opr-ct-abre li{
  display:flex !important; align-items:center !important; gap:11px !important; font-size:.9375rem !important; color:var(--suave) !important;
  padding:11px 14px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important;
}
.opr-ct-perfil .opr-ct-abre li b{color:var(--tinta) !important; font-weight:600 !important}
.opr-ct-perfil .opr-ct-abre li svg{width:18px !important; height:18px !important; flex:none !important}
.opr-ct-perfil .opr-ct-abre li.es-si svg{color:var(--ok600) !important}
.opr-ct-perfil .opr-ct-abre li.es-no svg{color:var(--p400) !important}
.opr-ct-perfil .opr-ct-abre li.es-no{color:var(--tenue) !important}

/* enlaces a la facturación de WooCommerce */
.opr-ct-perfil .opr-ct-enlaces{display:flex !important; flex-wrap:wrap !important; gap:10px !important; margin-top:18px !important}
.opr-ct-perfil .opr-ct-enlaces a{
  padding:10px 16px !important; border-radius:999px !important; font-size:.90625rem !important; font-weight:600 !important;
  color:var(--tinta) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; background:var(--superficie) !important;
  transition:box-shadow .15s ease, background .15s ease !important;
}
.opr-ct-perfil .opr-ct-enlaces a:hover{background:var(--p50) !important; box-shadow:inset 0 0 0 1.5px var(--p500) !important}

/* tabla de últimos simulacros */
.opr-ct-perfil .opr-ct-tabla{width:100% !important; overflow-x:auto !important; margin-top:16px !important}
.opr-ct-perfil .opr-ct-tabla table{width:100% !important; min-width:420px !important; border-collapse:collapse !important; font-size:.9375rem !important}
.opr-ct-perfil .opr-ct-tabla th{
  text-align:left !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
  padding:0 12px 10px !important; border-bottom:1px solid var(--borde) !important;
}
.opr-ct-perfil .opr-ct-tabla td{padding:12px !important; border-bottom:1px solid var(--borde) !important; color:var(--suave) !important}
.opr-ct-perfil .opr-ct-tabla td b{color:var(--tinta) !important; font-variant-numeric:tabular-nums !important}

.opr-ct-perfil .opr-ct-vacio{
  padding:clamp(24px,3vw,34px) !important; text-align:center !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1px var(--borde) !important;
}
.opr-ct-perfil .opr-ct-vacio p{font-size:.9375rem !important; color:var(--suave) !important; max-width:52ch !important; margin:0 auto !important}
.opr-ct-perfil .opr-ct-vacio .opr-btn{margin-top:18px !important}

.opr-ct-perfil .opr-ct-salir{
  margin-top:clamp(28px,3.4vw,42px) !important; padding-top:22px !important; border-top:1px solid var(--borde) !important;
  display:flex !important; align-items:center !important; justify-content:space-between !important; gap:14px !important; flex-wrap:wrap !important;
}
.opr-ct-perfil .opr-ct-salir p{font-size:.8125rem !important; color:var(--tenue) !important}

@media (max-width:560px){
  .opr-ct-perfil .opr-ct-pestanas{width:100% !important}
}

/* --- la puerta al panel de progreso ---
   El progreso no se pinta aquí: lo hace la gamificación, en su propia página.
   Esto es solo el enlace. */
.opr-ct-perfil .opr-ct-puerta{
  display:flex !important; align-items:center !important; gap:16px !important; margin-bottom:22px !important;
  padding:18px 22px !important; border-radius:var(--radio) !important;
  background:var(--p950) !important; color:#fff !important;
  box-shadow:var(--sombra-s) !important;
  transition:background .16s ease, transform .1s ease !important;
}
.opr-ct-perfil .opr-ct-puerta:hover{background:var(--p800) !important}
.opr-ct-perfil .opr-ct-puerta:active{transform:translateY(1px) !important}
.opr-ct-perfil .opr-ct-puerta.es-pronto{background:var(--superficie) !important; color:var(--suave) !important;
  box-shadow:inset 0 0 0 1px var(--borde) !important; cursor:default !important}
.opr-ct-perfil .opr-ct-puerta.es-pronto:hover{background:var(--superficie) !important}
.opr-ct-perfil .opr-ct-puerta.es-pronto:active{transform:none !important}
.opr-ct-perfil .opr-ct-puerta-icono{
  width:42px !important; height:42px !important; flex:none !important; border-radius:12px !important; display:grid !important; place-items:center !important;
  background:rgba(255,255,255,.12) !important;
}
.opr-ct-perfil .opr-ct-puerta.es-pronto .opr-ct-puerta-icono{background:var(--p100) !important; color:var(--p500) !important}
.opr-ct-perfil .opr-ct-puerta-icono svg{width:21px !important; height:21px !important}
.opr-ct-perfil .opr-ct-puerta-texto{flex:1 1 auto !important; min-width:0 !important; font-size:.9375rem !important; line-height:1.45 !important; color:var(--p300) !important}
.opr-ct-perfil .opr-ct-puerta.es-pronto .opr-ct-puerta-texto{color:var(--tenue) !important}
.opr-ct-perfil .opr-ct-puerta-texto b{display:block !important; font-size:1.0625rem !important; font-weight:700 !important; letter-spacing:-.014em !important; color:#fff !important}
.opr-ct-perfil .opr-ct-puerta.es-pronto .opr-ct-puerta-texto b{color:var(--tinta) !important}
.opr-ct-perfil .opr-ct-puerta-flecha{flex:none !important; font-size:1.25rem !important; color:#fff !important}
.opr-ct-perfil .opr-ct-puerta-pronto{
  flex:none !important; padding:6px 13px !important; border-radius:999px !important; font-size:.8125rem !important; font-weight:700 !important;
  background:var(--p100) !important; color:var(--tenue) !important;
}

/* --- el avatar --- */
.opr-ct-perfil .opr-ct-avatar{
  width:56px !important; height:56px !important; flex:none !important; border-radius:999px !important; object-fit:cover !important;
  background:var(--p900) !important; box-shadow:inset 0 0 0 1.5px var(--borde) !important;
}
.opr-ct-perfil .opr-ct-avatares{
  display:grid !important; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)) !important; gap:12px !important; margin-top:18px !important;
}
.opr-ct-perfil .opr-ct-elige{
  display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important;
  padding:10px 6px 12px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important;
  box-shadow:inset 0 0 0 1.5px transparent !important;
  transition:box-shadow .15s ease, background .15s ease, transform .1s ease !important;
}
.opr-ct-perfil .opr-ct-elige:hover{background:var(--p100) !important}
.opr-ct-perfil .opr-ct-elige:active{transform:translateY(1px) !important}
.opr-ct-perfil .opr-ct-elige img{
  width:72px !important; height:72px !important; border-radius:999px !important; object-fit:cover !important; background:var(--p900) !important;
}
.opr-ct-perfil .opr-ct-elige span{font-size:.75rem !important; font-weight:600 !important; color:var(--tenue) !important; text-align:center !important}
.opr-ct-perfil .opr-ct-elige.es-elegido{
  background:var(--superficie) !important; box-shadow:inset 0 0 0 2px var(--tinta) !important;
}
.opr-ct-perfil .opr-ct-elige.es-elegido span{color:var(--tinta) !important}
/* --- TODO EN LÍNEAS, NO UNA COSA DE CADA -------------------------------
   Sergio, mirando el PC: *«o salga todo en líneas como la de avatares, o todo
   como la de tus datos en formato columnas. Pero uno de cada no porque queda
   fatal. Mira el espacio que se queda en tus datos y tu dni»*.

   Tenía razón. Las tarjetas iban en `auto-fit,minmax(260px,1fr)`, que en un PC
   da cuatro columnas, y la del avatar ocupa la fila entera; así que «Tus datos»
   y «Tu DNI» se quedaban solos en la primera fila con dos columnas vacías al
   lado. Lo mismo pasaba en la pestaña del plan, con dos tarjetas y cuatro
   huecos.

   Se va a líneas: **una tarjeta por fila**. Y como un formulario de cuatro
   casillas dentro de una caja de 1.100 px sería una tira estrecha con la mitad
   derecha en blanco —el mismo hueco, movido de sitio—, los campos se ponen de
   dos en dos en cuanto hay ancho, y el texto se para a 70 caracteres. */
.opr-ct-perfil .opr-ct-tarjetas{grid-template-columns:1fr !important}

@media (min-width:760px){
  .opr-ct-perfil .opr-ct-tarjeta > p{max-width:70ch !important}
  .opr-ct-perfil .opr-ct-form{
    display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:16px 20px !important; align-items:start !important;
  }
  /* El botón, ni de lado a lado ni pegado a un campo: en su propia línea y con
     el ancho de su texto. `width:100%` viene de ct-base con (0,3,0). */
  .opr-ct-perfil .opr-ct-form .opr-btn{
    grid-column:1/-1 !important; width:auto !important; justify-self:start !important; padding-inline:34px !important; margin-top:2px !important;
  }
  .opr-ct-perfil .opr-ct-avisos-linea{align-items:flex-start !important}
}

/* La tarjeta del avatar ya no necesita `1/-1`: ahora TODAS ocupan la fila. Se
   deja el ancho del cuadro de figuras topado más abajo para que en una tarjeta
   de 1.100 px no se conviertan en cuatro carteles. */

/* Las cuatro figuras: siempre cuatro en fila, y con tope de ancho para que en
   una tarjeta de 1.100 px no se conviertan en cuatro carteles. */
.opr-ct-perfil .opr-ct-avatares{
  display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:12px !important;
  margin-top:18px !important; max-width:620px !important;
}

.opr-ct-perfil .opr-ct-volver-fila{
  display:flex !important; align-items:center !important; gap:14px !important; flex-wrap:wrap !important; margin:18px 0 14px !important;
}
.opr-ct-perfil .opr-ct-volver{
  display:inline-flex !important; align-items:center !important; gap:4px !important;
  font-size:.8125rem !important; font-weight:700 !important; color:var(--suave) !important;
}
.opr-ct-perfil .opr-ct-volver:hover{color:var(--tinta) !important}
.opr-ct-perfil .opr-ct-volver svg{width:15px !important; height:15px !important; flex:none !important}
.opr-ct-perfil .opr-ct-quien{font-size:.8125rem !important; font-weight:700 !important; color:var(--tenue) !important}

.opr-ct-perfil .opr-ct-gestos-rejilla{
  display:grid !important; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)) !important; gap:12px !important;
}
.opr-ct-perfil .opr-ct-gesto{
  display:block !important; padding:6px !important; border-radius:var(--radio-s) !important; background:var(--p50) !important;
  box-shadow:inset 0 0 0 1.5px transparent !important;
  transition:box-shadow .15s ease, background .15s ease, transform .1s ease !important;
}
.opr-ct-perfil .opr-ct-gesto:hover{background:var(--p100) !important}
.opr-ct-perfil .opr-ct-gesto:active{transform:translateY(1px) !important}
.opr-ct-perfil .opr-ct-gesto img{
  display:block !important; width:100% !important; height:auto !important; aspect-ratio:1 !important; border-radius:999px !important;
  object-fit:cover !important; background:var(--p900) !important;
}
.opr-ct-perfil .opr-ct-gesto.es-elegido{
  background:var(--superficie) !important; box-shadow:inset 0 0 0 2px var(--tinta) !important;
}
/* Los que se canjean con puntos (v1.0.51, con la comunidad): difuminados y
   con el precio debajo. Llevan a Ajustes → Avatares. */
.opr-ct-perfil .opr-ct-gesto.es-cerrado{display:flex !important; flex-direction:column !important; align-items:center !important; gap:4px !important; color:var(--tinta) !important}
.opr-ct-perfil .opr-ct-gesto.es-cerrado img{filter:blur(3px) !important; opacity:.6 !important}
.opr-ct-perfil .opr-ct-precio{font-size:.75rem !important; font-weight:700 !important; font-variant-numeric:tabular-nums !important}

/* EN EL MÓVIL, TRES POR FILA Y FIJAS.
   `minmax(84px,1fr)` con auto-fill solo mete DOS a 320 px: nueve avatares se
   convierten en cinco filas y hay que bajar media pantalla. Tres salen a unos
   68 px a 320 y a 93 a 390, lo justo para distinguir un saludo de unas gafas. */
@media (max-width:640px){
  .opr-ct-perfil .opr-ct-gestos-rejilla{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:10px !important}
  /* Y las cuatro figuras, de DOS en dos. Cuatro en fila a 320 px las dejan en
     48 px con la cara a 36, donde no se distingue una gorra de una boina y el
     rótulo no cabe. De dos en dos salen a unos 134 px. */
  .opr-ct-perfil .opr-ct-avatares{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}

.opr-ct-perfil .opr-ct-quitar{
  margin-top:14px !important; font-size:.8125rem !important; font-weight:600 !important; color:var(--tenue) !important;
  text-decoration:underline !important; text-underline-offset:3px !important;
}
.opr-ct-perfil .opr-ct-quitar:hover{color:var(--tinta) !important}

/* el nombre de usuario, junto al correo */
.opr-ct-perfil .opr-ct-arroba-nombre{font-weight:700 !important; color:var(--tinta) !important}


/* --- los avisos por correo ---
   Una casilla y su explicación al lado. `appearance:auto` porque el tema del
   sitio le pone `width:100%` y `padding:12px 15px` a los `input`, y con
   `box-sizing:border-box` la casilla se queda en nada: es la misma trampa que
   se comió las casillas de los temas en las batallas. */
.opr-ct-avisos-linea{
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr) !important;
  gap:12px !important;
  align-items:start !important;
  margin-bottom:14px !important;
  cursor:pointer !important;
}
.opr-ct-avisos-linea input{
  appearance:auto !important;
  -webkit-appearance:auto !important;
  width:20px !important;
  height:20px !important;
  margin-top:2px !important;
  flex:none !important;
  cursor:pointer !important;
}
.opr-ct-avisos-linea span{font-size:.8125rem !important; color:var(--tenue) !important; line-height:1.5 !important}
.opr-ct-avisos-linea span b{
  display:block !important;
  font-size:.9375rem !important;
  font-weight:700 !important;
  color:var(--tinta) !important;
  margin-bottom:3px !important;
}

/* --- v1.0.62 · cerrar sesión y eliminar la cuenta --- */
.opr-ct-perfil .opr-ct-salir-botones{display:flex !important; gap:10px !important; flex-wrap:wrap !important}
.opr-ct-perfil .opr-ct-borrar{
  margin-top:20px !important; padding:clamp(20px,2.6vw,28px) !important; border-radius:var(--radio) !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--no600), var(--sombra-s) !important;
  max-width:640px !important; margin-left:auto !important;
}
.opr-ct-perfil .opr-ct-borrar .opr-h3{margin-bottom:10px !important}
.opr-ct-perfil .opr-ct-borrar > p{color:var(--suave) !important; margin-bottom:8px !important}
.opr-ct-perfil .opr-ct-borrar-lista{display:flex !important; flex-direction:column !important; gap:8px !important; margin:0 0 18px !important; padding:0 !important}
.opr-ct-perfil .opr-ct-borrar-lista li{
  position:relative !important; padding-left:18px !important; font-size:.9375rem !important; line-height:1.55 !important; color:var(--suave) !important;
}
.opr-ct-perfil .opr-ct-borrar-lista li::before{
  content:"" !important; position:absolute !important; left:2px !important; top:.62em !important; width:6px !important; height:6px !important; border-radius:999px !important; background:var(--borde2) !important;
}
.opr-ct-perfil .opr-ct-borrar-lista b{color:var(--tinta) !important}
.opr-ct-perfil .opr-ct-borrar .opr-ct-form{max-width:none !important}
.opr-ct-perfil .opr-ct-casilla{display:flex !important; align-items:flex-start !important; gap:10px !important; font-size:.9375rem !important; color:var(--tinta) !important; cursor:pointer !important; margin:4px 0 16px !important}
.opr-ct-perfil .opr-ct-casilla input{
  width:20px !important; height:20px !important; flex:none !important; margin-top:1px !important; border-radius:6px !important;
  background:var(--superficie) !important; box-shadow:inset 0 0 0 1.5px var(--borde2) !important; cursor:pointer !important;
}
.opr-ct-perfil .opr-ct-casilla input:checked{
  background:var(--p950) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.3 3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px 20px no-repeat !important;
  box-shadow:none !important;
}
.opr-ct-perfil .opr-ct-borrar-botones{display:flex !important; gap:10px !important; flex-wrap:wrap !important}
/* El rojo aquí sí significa algo: es el único botón del sitio que borra. */
.opr-ct-perfil .opr-ct-btn-peligro{background:var(--no600) !important; color:#fff !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25) !important}
.opr-ct-perfil .opr-ct-btn-peligro:hover{background:var(--no900) !important}
/* Se llega con `#eliminar`: que la cabecera fija no tape el título. */
.opr-ct-perfil #eliminar{scroll-margin-top:calc(var(--opr-cabecera, 64px) + 18px) !important}

/* --- v1.0.65 · ¿Por qué te vas? ---
   Mismo aspecto que los campos de texto de `ct-base`. El desplegable lleva su
   propia flecha: sin `appearance:none` cada navegador pinta la suya. */
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo select,
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo textarea{
  width:100% !important; padding:0 14px !important; border:0 !important; border-radius:var(--radio-s) !important;
  background-color:var(--p50) !important; color:var(--tinta) !important;
  box-shadow:inset 0 0 0 1.5px var(--borde2) !important;
  font:inherit !important; font-size:1rem !important; font-weight:500 !important;
  transition:box-shadow .15s ease, background-color .15s ease !important;
}
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo select{
  height:48px !important; padding-right:40px !important; cursor:pointer !important;
  -webkit-appearance:none !important; appearance:none !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 8 4 4 4-4' fill='none' stroke='%237F8E9F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important; background-position:right 12px center !important; background-size:20px 20px !important;
}
/* En la rejilla de dos columnas (≥760px), la pregunta y el texto van cada uno
   de lado a lado: son el primer paso, y uno al lado del otro se leían en cruz. */
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo{grid-column:1/-1 !important}
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo select{max-width:420px !important}
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo textarea{
  min-height:96px !important; padding:12px 14px !important; line-height:1.5 !important; resize:vertical !important;
}
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo select:hover,
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo textarea:hover{box-shadow:inset 0 0 0 1.5px var(--p500) !important}
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo select:focus,
.opr-ct-perfil .opr-ct-borrar .opr-ct-motivo textarea:focus{
  outline:none !important; background-color:var(--superficie) !important;
  box-shadow:inset 0 0 0 2px var(--tinta) !important;
}