/* Tema calido (mismo lenguaje que public/principal/css/tema.css): lienzo
   crema, tarjeta con borde fino, titulo en serif y el morado de la marca
   solo para la accion principal. Las fuentes estan guardadas en el
   proyecto, asi que funciona sin internet. */
@font-face {
  font-family: "Source Serif 4";
  src: url("../../app/publico/fonts/source-serif-4/SourceSerif4-Variable-latin.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../../app/publico/fonts/inter/Inter-Variable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fuente-titulos: "Source Serif 4", Georgia, "Times New Roman", serif;
  --fuente-texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --marca: #500b75;
  --marca-oscuro: #3d0859;
  --lienzo: #faf9f5;
  --crema-suave: #f5f0e8;
  --linea: #e6dfd8;
  --tinta: #141413;
  --texto: #3d3d3a;
  --texto-tenue: #6c6a64;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--fuente-texto);
}

/* Transicion suave entre paginas (cada clic es una recarga completa, no
   hay navegacion por AJAX): sin esto el navegador corta en seco a blanco
   por un instante. Solo la soportan Chrome/Edge; en los demas no hace
   nada, se ve igual que antes. */
@view-transition {
  navigation: auto;
}

body {
  background: var(--crema-suave);
  color: var(--texto);
}

a {
  text-decoration: none;
  color: var(--marca);
}

a:hover {
  text-decoration: underline;
}

.wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.login_box {
  position: relative;
  width: 500px; /* mismo ancho en portada, ingresos y recuperacion de contraseña */
  max-width: 100%; /* CORREGIDO: antes el ancho era fijo y no se achicaba en pantallas angostas, provocando scroll horizontal */
  background: var(--lienzo);
  border: 1px solid var(--linea);
  border-radius: 16px;
  padding: 7em 2.5em 3.5em 2.5em;
  color: var(--texto);
  box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04), 0 12px 40px rgba(20, 20, 19, 0.06);
}

/* Logo arriba y centrado */
.login-header {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  height: 70px;
}

.text-welcome {
  text-align: center;
}

.logtitle {
  font-family: var(--fuente-titulos);
  font-weight: 400;
  font-size: 34px;
  letter-spacing: -0.5px;
  line-height: 1.15;
  color: var(--tinta);
  margin-top: -20px;
  text-wrap: balance;
}

.input_box {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 20px 0;
  align-items: center;
  color: var(--texto-tenue);
}

.input-field {
  width: 100%;
  height: 52px;
  font-size: 16px;
  background: var(--lienzo);
  color: var(--tinta) !important;
  padding-inline: 16px 50px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  outline: none;
}

.label-text {
  position: absolute;
  top: 14px;
  left: 16px;
  transition: 0.2s;
  pointer-events: none;
}

.input {
  transition: border-color 0.2s, box-shadow 0.2s;
  font-weight: 400;
  font-size: 16px;
}

.input:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(80, 11, 117, 0.12);
}

/* Etiqueta flotante: sube al borde del campo cuando tiene foco o texto */
.input-field:focus ~ .label-text,
.input-field:not(:placeholder-shown) ~ .label-text {
  top: -9px;
  left: 12px;
  font-size: 13px;
  background-color: var(--lienzo);
  border-radius: 4px;
  color: var(--texto);
  padding: 0 6px;
}

.icon {
  position: absolute;
  top: 16px;
  right: 18px;
  font-size: 20px;
  color: var(--texto-tenue);
}

/* 8 cajitas del código de verificación (acceso_personal/verification_code.php,
   acceso_solicitante/verification_code.php). Puramente visuales: el valor real que se
   envía va en un input oculto "txtcode" sincronizado por JS.

   "width: 40px" fijo hacía que las 8 cajitas + sus espacios (390px en
   total) no cupieran en el ancho disponible dentro de la tarjeta en
   celular (~287px, después del padding de .wrapper/.login_box en el
   media query de abajo), y como el flex no encogía nada, simplemente se
   salían del formulario. "flex: 1 1 0" + "max-width" las deja encogerse
   parejo hasta lo que quepa; "min-width: 0" es necesario porque un
   <input> dentro de un flex item por defecto no se encoge más allá de su
   ancho intrínseco (el que le da el atributo "size" del navegador, ~20
   caracteres) a menos que se anule explícitamente. */
.otp-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 20px 0;
}

.otp-box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 40px;
  height: 52px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinta);
  background: var(--lienzo);
  border: 1px solid var(--linea);
  border-radius: 8px;
  outline: none;
}

@media only screen and (max-width: 564px) {
  .otp-row {
    gap: 8px;
  }

  .otp-box {
    /* Sin "max-width" acá: en desktop sí lo tiene (40px) para que no
       queden gigantes en una tarjeta ancha, pero en móvil quitarlo deja
       que "flex: 1 1 0" reparta TODO el ancho disponible entre las 8 por
       igual, así la fila llega de borde a borde del formulario en vez de
       quedar chica y centrada con espacio vacío a los lados. */
    max-width: none;
    height: 48px;
    font-size: 20px;
  }
}

.otp-box:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(80, 11, 117, 0.12);
  background: #fff;
}

.remember-forgot {
  display: flex;
  justify-content: center;
  font-size: 15px;
}

.forgot a {
  color: var(--texto);
}

.forgot a:hover {
  color: var(--marca);
}

.input-submit {
  width: 70%;
  height: 48px;
  background: var(--marca);
  font-size: 15px;
  font-weight: 500;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.input-submit:hover,
.input-submit:focus-visible {
  background: var(--marca-oscuro);
}

.register {
  text-align: center;
}

.register a {
  font-weight: 500;
}

/* Explicación bajo el título en acceso_solicitante/cambiar_password_temporal.php */
.aviso-temporal {
  text-align: center;
  color: var(--texto);
  font-size: 14px;
  margin: -6px 0 18px;
}

/* Enlace al otro portal (personal <-> solicitantes) en acceso_personal/login.php y acceso_solicitante/login.php */
.cambiar-portal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  padding-top: 6px;
  border-top: 1px solid var(--linea);
  font-size: 14px;
  color: var(--texto-tenue);
}

.cambiar-portal a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 12px 10px; /* area de toque de 44px en celular */
  color: var(--marca);
  font-weight: 600;
  text-decoration: none;
}

.cambiar-portal i {
  font-size: 18px;
}

@media only screen and (max-width: 564px) {
  .wrapper {
    padding: 20px;
  }

  .login_box {
    padding: 7em 1.5em 3.5em 1.5em;
  }

  .logtitle {
    font-size: 28px;
  }
}