/**
 * Vista Socio - página completa.
 *
 * Layout de dos columnas del Figma "Login Portal Gremial" más los estilos
 * propios de la vista. Los colores y la tipografía provienen del tema del
 * portal; aquí sólo se define lo que el tema no cubre.
 */

/* ============================================================
   Layout de página
   ============================================================ */

/* Medidas tomadas del Figma (frame de 1440x1024): la foto es el fondo de toda
   la página y la tarjeta flota encima, con 40px de margen a la izquierda,
   arriba y abajo. La tarjeta mide 496px de ancho con 70px de padding lateral,
   lo que deja 356px de ancho útil para el formulario. El blanco de fondo queda
   como respaldo por si el documento de la foto no resuelve. */
#inicio-sesion-socios-pagina {
  position: relative;
  min-height: 100vh;
  background: var(--neutral-color-100-w, #ffffff);
}

/* Quita el margen inferior que el tema aplica al contenedor del portlet
   (section.portlet). Se apunta por contenido y no por el id con _INSTANCE_,
   que cambia entre ambientes y al volver a agregar el portlet. */
.portlet:has(#inicio-sesion-socios-pagina) {
  margin-bottom: 0;
}

/* ---- Panel del formulario, flotando sobre la foto ---- */

/* El min-height con border-box es lo que estira la tarjeta a 100vh - 80px.
   En escritorio el alto lo acota la regla @media (min-width: 992px). */
.cchc-login-page__form-column {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  min-height: 100vh;
  padding: 2.5rem 0 2.5rem 2.5rem;
}

.cchc-login-page__panel {
  flex: 0 0 31rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* "safe" alinea arriba cuando el contenido no cabe, para que el scroll
     alcance también el inicio (con "center" la parte de arriba queda cortada). */
  justify-content: safe center;
  gap: 1.5rem;
  padding: 2.5rem 4.375rem;
  background: var(--neutral-color-100-w, #ffffff);
  border-radius: 24px;
  box-shadow: 0 2px 8px rgba(51, 51, 51, 0.15);
  position: relative;
  overflow-y: auto;
  /* Si el contenido no cabe se desplaza dentro del panel, sin barra visible. */
  scrollbar-width: none;
}

.cchc-login-page__panel::-webkit-scrollbar {
  display: none;
}

.cchc-login-page__logo {
  display: block;
  width: 13.25rem;
  margin: 0 auto 0.5rem;
}

/* ---- Panel con la sesión ya iniciada ----
   Ocupa el lugar del formulario. El panel ya centra en vertical, así que aquí
   sólo se ordena el contenido en columna. */

.cchc-login-page__session {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.cchc-login-page__session-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
}

.cchc-login-page__session-greeting {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--neutral-color-50, #6e7e96);
}

.cchc-login-page__session-name {
  margin: 0 0 0.5rem;
  font-family: Lora, Georgia, serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--neutral-color-30, #424b5a);
}

/* ---- Imagen institucional: fondo de la página ----
   Se mantiene como <img> y no como background-image para conservar el alt y la
   URL del documento de Liferay que arma el JSP. Va detrás de la tarjeta por
   z-index, no por orden en el DOM: en el marcado sigue después del formulario,
   que es el orden de lectura correcto. Longhands en vez de inset por
   compatibilidad con Safari anterior a 14.1. */

.cchc-login-page__image-column {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
}

.cchc-login-page__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* En el Figma la leyenda queda a 298px del borde derecho, pero anclarla desde
   la derecha la mete debajo de la tarjeta bajo los 1180px de ancho. Anclada
   desde la izquierda cae en el mismo punto a 1440px (793/1440 = 55%) y nunca
   se solapa hasta el corte de 992px, donde la columna ya se oculta. */
.cchc-login-page__caption {
  position: absolute;
  left: 55%;
  bottom: 7.5rem;
  box-sizing: border-box;
  width: 21.875rem;
  padding: 1rem;
  background: var(--neutral-color-100-w, #ffffff);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(51, 51, 51, 0.15);
}

/* Los dos colores salen medidos del Figma, no heredados del resto de la vista:
   el título es --neutral-color-20 y la bajada --neutral-color-30, un paso más
   oscuros que los que tenían antes (30 y 50). */
.cchc-login-page__caption-title {
  margin: 0 0 0.25rem;
  font-family: Lora, Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--neutral-color-20, #2d333e);
}

.cchc-login-page__caption-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--neutral-color-30, #424b5a);
}

/* ---- Responsive ----
   El Figma sólo define el diseño de escritorio. Bajo 992px la imagen se
   retira y el panel toma el ancho completo. */

@media (max-width: 991px) {
  .cchc-login-page__image-column {
    display: none;
  }

  .cchc-login-page__form-column {
    justify-content: center;
    padding: 1.5rem 1rem;
  }

  .cchc-login-page__panel {
    flex: 0 1 auto;
    width: 100%;
    max-width: 480px;
    margin: auto;
    padding: 2rem 1.5rem;
  }
}

/* En escritorio la tarjeta mide como máximo 990px y se centra en vertical,
   para no estirarse en monitores altos. En pantallas más bajas se ajusta a la ventana
   sin scroll de página; si el contenido no cabe, se desplaza dentro del panel. */
@media (min-width: 992px) {
  .cchc-login-page__form-column {
    align-items: center;
  }

  .cchc-login-page__panel {
    height: min(990px, calc(100vh - 5rem));
  }
}

/* ============================================================
   Campo de contraseña con conmutador de visibilidad
   ============================================================ */

/* El conmutador se ancla al grupo del campo; el tema ya posiciona el ícono
   de la izquierda, aquí sólo se garantiza el contexto de posicionamiento. */
#inicio-sesion-socios-pagina .cchc-form-group-icon-field {
  position: relative;
}

.cchc-password-toggle {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  padding: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--neutral-color-50, #6e7e96);
}

.cchc-password-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.cchc-password-toggle.is-visible {
  color: var(--primary-color-b, #006edc);
}

/* ============================================================
   Estados de formulario y botones
   ============================================================ */

.cchc-form-group.cchc-error-field .cchc-form-field {
  border-color: #dc3545 !important;
  box-shadow: 0 0 0 1px #dc3545 inset;
}

.cchc-form-group .cchc-error-message {
  display: none;
}

.cchc-form-group.cchc-error-field .cchc-error-message {
  display: block;
}

/* Mientras el botón está cargando se oculta su texto y aparecen los puntos */
.btn-in-progress {
  color: transparent !important;
}

.btn-in-progress span {
  display: none;
}

.cchc-dots-btn-container {
  display: none;
}

.btn-in-progress .cchc-dots-btn-container {
  display: flex;
}

.cchc-primary-btn.btn-in-progress:disabled {
  color: var(--primary-btn-text-color);
  background: var(--primary-btn-background-color);
  border: 1px solid var(--primary-btn-border-color);
  min-width: 161.6px;
}

.btn-in-progress .cchc-loader-dots {
  background: radial-gradient(
        circle closest-side,
        var(--neutral-color-100-w) 90%,
        rgba(0, 0, 0, 0)
      )
      0 50%,
    radial-gradient(
        circle closest-side,
        var(--neutral-color-100-w) 90%,
        rgba(0, 0, 0, 0)
      )
      33.3% 50%,
    radial-gradient(
        circle closest-side,
        var(--neutral-color-100-w) 90%,
        rgba(0, 0, 0, 0)
      )
      66.6% 50%,
    radial-gradient(
        circle closest-side,
        var(--neutral-color-100-w) 90%,
        rgba(0, 0, 0, 0)
      )
      100% 50%;
  background-size: 25% 13.4px;
  background-repeat: no-repeat;
}

.btn-in-progress .cchc-dots-btn-container,
.btn-in-progress .cchc-dots-btn-container * {
  color: #fff !important;
  background-color: #fff;
  border-color: #fff;
}

/* Botones de envío de OTP */
.cchc-hover-modern {
  transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.06s ease;
}

.cchc-hover-modern:hover:not(:disabled) {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.05));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.cchc-hover-modern:active:not(:disabled) {
  transform: translateY(1px);
}

.cchc-hover-modern:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* ============================================================
   Enlaces
   ============================================================ */

#inicio-sesion-socios-pagina .cchc-nav-link {
  text-decoration: none;
  text-underline-offset: 0.2em;
  text-decoration-thickness: from-font;
  transition: color 140ms ease, text-underline-offset 140ms ease;
  cursor: pointer;
}

#inicio-sesion-socios-pagina .cchc-nav-link:hover,
#inicio-sesion-socios-pagina .cchc-nav-link:focus {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

#inicio-sesion-socios-pagina .cchc-nav-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  #inicio-sesion-socios-pagina .cchc-nav-link,
  .cchc-hover-modern {
    transition: none;
  }
}

/* ============================================================
   Paso de verificación del código
   ============================================================ */

/* Ilustración del canal por el que se envió el código. La visibilidad se
   controla sólo con d-none, sin alternar además d-flex. */
.cchc-login-page__otp-illustration {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

/* ============================================================
   Casillas del código temporal
   ============================================================ */

.otp-input-container {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}

.otp-inputs-group {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.5rem;
}

.otp-input {
  width: 100%;
  height: 3rem;
  text-align: center;
  font-size: 1.5rem;
  font-weight: bold;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  transition: all 0.2s ease;
  outline: none;
}

.otp-input:focus {
  border-color: #007bff;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
  transform: scale(1.05);
}

.otp-input.filled {
  border-color: #28a745;
  background-color: #f8f9fa;
}

.otp-input.error {
  border-color: #dc3545;
  background-color: #fff5f5;
}

@media (max-width: 768px) {
  .otp-inputs-group {
    gap: 0.3rem;
  }

  .otp-input {
    height: 2.5rem;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .otp-inputs-group {
    gap: 0.2rem;
  }

  .otp-input {
    height: 2rem;
    font-size: 1rem;
  }
}