/* ==========================================================================
   RedVivienda · login.css
   Acceso y registro. Objetivo: que el formulario entre en pantalla sin
   scroll de página. Si el contenido creciera (pantallas muy bajas), lo que
   se desplaza es la caja, no la web entera.
   ========================================================================== */

.rv-acceso {
  min-height: 100dvh;
  margin: 0;
  background: linear-gradient(180deg, #EEF5FB 0%, #E7F0F8 100%);
}

.acceso {
  min-height: 100dvh;
  max-width: 46rem;
  margin: 0 auto;
  padding: clamp(.75rem, 2vh, 1.5rem) 1rem;
  display: grid;
  grid-template-rows: auto auto;      /* la caja mide lo que necesita */
  align-content: center;
  align-items: start;
  justify-items: center;
  gap: clamp(.5rem, 1.5vh, 1rem);
}

.acceso__marca {
  font-size: clamp(1.15rem, 2.4vh, 1.5rem);
  font-weight: 700;
  color: #0B4F82;
  text-decoration: none;
  letter-spacing: -.01em;
}
.acceso__marca span { color: #1C7FC4; }

.acceso__caja {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
  background: #fff;
  border: 1px solid #DCE6EE;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(11, 79, 130, .10);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-self: start;
  max-height: calc(100dvh - 5.5rem);
}

/* --- pestañas ------------------------------------------------------------ */
.pestanas { display: grid; grid-template-columns: 1fr 1fr; flex: 0 0 auto; }
.pestanas__item {
  padding: .7rem 1rem;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: .95rem;
  color: #5B6B78;
  background: #F4F8FB;
  border-bottom: 2px solid #DCE6EE;
}
.pestanas__item:hover { color: #0B4F82; }
.pestanas__item.es-activa {
  color: #0B4F82;
  background: #fff;
  border-bottom-color: #1C7FC4;
}

/* --- formulario ---------------------------------------------------------- */
.formulario {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: clamp(.9rem, 2.2vh, 1.4rem) clamp(1rem, 3vw, 1.6rem)
           clamp(1rem, 2.4vh, 1.5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem .9rem;
  align-content: start;
}
.formulario > * { grid-column: 1 / -1; }
.formulario > .campo { grid-column: span 1; }
.formulario > .campo--ancho,
.formulario > .campo--linea { grid-column: 1 / -1; }

.formulario__titulo { margin: 0; font-size: clamp(1.05rem, 2.6vh, 1.25rem); color: #16202A; }
.formulario__nota { margin: -.35rem 0 .1rem; color: #5B6B78; font-size: .88rem; }
.formulario__pie { margin: .1rem 0 0; font-size: .87rem; text-align: center; color: #5B6B78; }
.formulario__pie a { color: #0B4F82; }

.campo { display: grid; gap: .25rem; align-content: start; }
.campo__etiqueta { font-size: .85rem; font-weight: 600; color: #33424F; }
.campo__ayuda { font-size: .78rem; color: #6C7A87; line-height: 1.3; }
.campo__control {
  width: 100%;
  padding: .55rem .7rem;
  font: inherit;
  font-size: .95rem;
  color: #16202A;
  background: #fff;
  border: 1px solid #C7D4DE;
  border-radius: 8px;
}
.campo__control:focus { outline: 2px solid #7FBCE8; outline-offset: 1px; border-color: #1C7FC4; }
.campo--linea {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: .5rem;
  font-size: .85rem;
  color: #4A5A67;
}
.campo--linea input { margin-top: .15rem; }

.boton {
  padding: .7rem 1rem;
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
}
.boton--principal { background: #1C7FC4; color: #fff; }
.boton--principal:hover { background: #14649D; }

.aviso { margin: 0; padding: .65rem clamp(1rem, 3vw, 1.6rem); background: #EAF3FA; color: #0B4F82; font-size: .88rem; }
.aviso--error { background: #FDECEC; color: #8E1B1B; }

/* --- paquetes: rejilla compacta ------------------------------------------ */
.paquetes {
  border: 0;
  padding: 0;
  margin: .2rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .5rem;
}
.paquetes > .campo__etiqueta { grid-column: 1 / -1; }
.paquete { display: block; cursor: pointer; }
.paquete input { position: absolute; opacity: 0; width: 0; height: 0; }
.paquete__cuerpo {
  display: grid;
  gap: .05rem;
  padding: .55rem .65rem;
  border: 1px solid #C7D4DE;
  border-radius: 10px;
  background: #fff;
  height: 100%;
}
.paquete input:checked + .paquete__cuerpo {
  border-color: #1C7FC4;
  box-shadow: inset 0 0 0 1px #1C7FC4;
  background: #F2F8FD;
}
.paquete input:focus-visible + .paquete__cuerpo { outline: 2px solid #7FBCE8; }
.paquete__nombre { font-weight: 700; font-size: .92rem; color: #16202A; }
.paquete__datos { font-size: .8rem; color: #5B6B78; }
.paquete__precio {
  display: flex;
  align-items: baseline;
  gap: .28rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #14649D;
  font-variant-numeric: tabular-nums;
}
.paquete__precio small { font-weight: 600; font-size: .72em; color: #5B6B78; }



/* --- pantallas estrechas: una columna -------------------------------------- */
@media (max-width: 40rem) {
  .formulario { grid-template-columns: 1fr; }
  .formulario > .campo { grid-column: 1 / -1; }
  .paquetes { grid-template-columns: 1fr; }
  .acceso__caja { max-height: calc(100dvh - 4.5rem); }
}


/* ==========================================================================
   Retoques de estilo y precios anuales
   ========================================================================== */

.acceso__caja {
  box-shadow: 0 1px 2px rgba(16, 42, 66, .04),
              0 14px 36px -12px rgba(11, 79, 130, .22);
}

.pestanas__item {
  position: relative;
  transition: background-color .16s ease, color .16s ease;
}
.pestanas__item.es-activa::after {
  content: "";
  position: absolute;
  left: 22%; right: 22%; bottom: -2px;
  height: 2px;
  background: #1C7FC4;
  border-radius: 2px;
}

.campo__control {
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.campo__control:hover { border-color: #A9BECD; }
.campo__control:focus {
  outline: none;
  border-color: #1C7FC4;
  box-shadow: 0 0 0 3px rgba(28, 127, 196, .16);
}
.campo__control::placeholder { color: #A7B4BF; }

.boton--principal {
  background: linear-gradient(180deg, #2A8FD4 0%, #1C7FC4 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .18) inset,
              0 8px 18px -8px rgba(28, 127, 196, .8);
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
}
.boton--principal:hover {
  background: linear-gradient(180deg, #2385CB 0%, #14649D 100%);
  box-shadow: 0 10px 22px -8px rgba(20, 100, 157, .9);
}
.boton--principal:active { transform: translateY(1px); }
.boton--principal:focus-visible { outline: 3px solid rgba(28, 127, 196, .35); outline-offset: 2px; }

/* --- tarjetas de paquete -------------------------------------------------- */
.paquete__cuerpo {
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease,
              background-color .15s ease, transform .12s ease;
}
.paquete:hover .paquete__cuerpo { border-color: #8FB6D3; transform: translateY(-1px); }
.paquete input:checked + .paquete__cuerpo {
  box-shadow: inset 0 0 0 1px #1C7FC4, 0 8px 18px -12px rgba(11, 79, 130, .55);
}

.paquete__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}

.paquete__sello {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #0B4F82;
  background: #E7F2FA;
  border: 1px solid #BBD8EE;
  border-radius: 999px;
  padding: .05rem .38rem;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .18s ease, transform .18s ease;
}

.paquete__precio { display: flex; align-items: baseline; gap: .18rem; }

/* --- conmutador anual ----------------------------------------------------- */
.conmutador {
  padding: .45rem .6rem;
  border: 1px dashed #C3D6E4;
  border-radius: 9px;
  background: #F7FBFE;
  transition: border-color .15s ease, background-color .15s ease;
}
.conmutador:hover { border-color: #9CC2DC; }
.conmutador:has(input:checked) {
  border-style: solid;
  border-color: #9CC8E6;
  background: #F2F8FD;
}
.conmutador__gancho { color: #14649D; }

@media (prefers-reduced-motion: reduce) {
    .paquete:hover .paquete__cuerpo,
  .boton--principal:active { transform: none; }
}


/* --- centrado ------------------------------------------------------------- */
/* Todas las pantallas de cuenta (acceso, registro, panel, baja, publicar)
   comparten el mismo eje: caja centrada y contenido alineado a su ancho. */
.acceso { justify-items: center; }
.acceso__marca { justify-self: center; }
.formulario > .boton { justify-self: stretch; }


/* --- la tarjeta seleccionada manda ---------------------------------------- */
.paquete input:checked + .paquete__cuerpo .paquete input:checked + .paquete__cuerpo { background: #F5FAFE; }
.paquete__cuerpo { padding: .6rem .7rem .55rem; }
.paquete__datos { margin-top: .05rem; }


/* ==========================================================================
   Precio mensual / anual  ·  SIN JavaScript
   La casilla «Pagar por año» manda directamente sobre las tarjetas mediante
   :has(). Así no puede haber desajustes entre lo marcado y lo que se ve.
   ========================================================================== */

.paquete__precio { display: flex; align-items: baseline; gap: .28rem; }
.paquete__mes,
.paquete__ano { font-weight: 700; }
.paquete__ano,
.paquete__tachado { display: none; }
.paquete__tachado { font-weight: 600; color: #9AA8B4; text-decoration-thickness: 1.5px; }

.paquete__pie { display: block; margin-top: .1rem; font-size: .74rem; color: #6C7A87; min-height: 1em; }
.paquete__pie--ano { display: none; }

.paquete__sello {
  font-size: .68rem;
  font-weight: 700;
  color: #0B4F82;
  background: #E7F2FA;
  border: 1px solid #BBD8EE;
  border-radius: 999px;
  padding: .05rem .38rem;
  opacity: 0;
  transform: scale(.82);
  transition: opacity .18s ease, transform .18s ease;
}

/* --- con la casilla marcada ------------------------------------------------ */
.formulario:has([data-anual]:checked) .paquete__sello { opacity: 1; transform: scale(1); }
.formulario:has([data-anual]:checked) .paquete__tachado { display: inline; }
.formulario:has([data-anual]:checked) .paquete__mes { display: none; }
.formulario:has([data-anual]:checked) .paquete__ano {
  display: inline;
  animation: rv-precio .34s cubic-bezier(.2, .8, .3, 1);
}
.formulario:has([data-anual]:checked) .paquete__pie--mes { display: none; }
.formulario:has([data-anual]:checked) .paquete__pie--ano { display: inline; }

@keyframes rv-precio {
  0%   { transform: translateY(-.22em); opacity: 0; }
  60%  { transform: translateY(.03em);  opacity: 1; }
  100% { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .formulario:has([data-anual]:checked) .paquete__ano { animation: none; }
}

/* --- Ojo para ver la contraseña (clave-visible.js) ----------------------- */
/* El envoltorio ocupa el hueco del input dentro de la rejilla del campo y
   sirve de ancla al botón. Sin JavaScript no aparece nada de esto. */
.campo__clave { position: relative; display: block; }
.campo__clave .campo__control { padding-right: 2.6rem; }

.campo__ojo {
  position: absolute;
  top: 50%;
  right: .35rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: #5B6B78;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: .75;
  transition: opacity .15s ease, background-color .15s ease;
}
.campo__ojo svg { width: 1.15rem; height: 1.15rem; display: block; }
.campo__ojo:hover { opacity: 1; color: #1C7FC4; background: rgba(28, 127, 196, .09); }
.campo__ojo:focus-visible {
  outline: 2px solid #1C7FC4;
  outline-offset: 1px;
  opacity: 1;
}