/* Estilos del módulo: auth. Solo tokens, nada de hex sueltos. */

/* ------------------------------------------------- Pantallas de sesión -- */
/* Tarjeta centrada, marca arriba y un solo botón primario a todo el ancho.
   La caja reutiliza .reg de componentes.css; aquí solo se centra y se acota. */
.auth {
  display: grid;
  place-items: start center;
  padding: var(--sp-8) 0 60px;
}
.auth-caja { width: 100%; max-width: 420px; }

.auth-marca {
  display: grid;
  justify-items: center;
  gap: var(--sp-2);
  text-align: center;
  margin-bottom: var(--sp-5);
}
.auth-marca h1 { font-size: 1.5rem; margin-top: var(--sp-2); }
.auth-marca p { font-size: .92rem; max-width: 36ch; text-wrap: balance; }

/* Aviso de estado (enlace enviado, clave cambiada, sesión cerrada). */
.auth-aviso {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--teal);
  border-radius: var(--rs);
  padding: var(--sp-3) 14px;
  margin-bottom: var(--sp-3);
  font-size: .88rem;
  color: var(--text);
}
.auth-aviso .icono { color: var(--teal); }

/* ----------------------------------------------------------- Campos -- */
.campo { display: grid; gap: 6px; }
.campo > label { font-size: .82rem; font-weight: 600; color: var(--text); }
.campo > label span { font-weight: 500; color: var(--muted); }

.campo select {
  height: 48px;
  border-radius: var(--rs);
  border: 1px solid var(--border);
  padding: 0 10px;
  background: var(--card);
  color: var(--text);
  font-size: 1rem;
  width: 100%;
}

/* Clave con botón de ver/ocultar. */
.campo-clave { position: relative; display: grid; }
.campo-clave input { padding-right: 48px; }
.ojo {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--rs);
  color: var(--muted);
  cursor: pointer;
}
.ojo:hover { color: var(--blue-txt); }
.ojo [data-ojo="ocultar"] { display: none; }
.ojo[aria-pressed="true"] [data-ojo="ver"] { display: none; }
.ojo[aria-pressed="true"] [data-ojo="ocultar"] { display: block; }

/* Error por campo. */
.campo-mal input,
.campo-mal select { border-color: var(--red); }
.campo-aviso {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--rojo-txt);
}
.campo-aviso .icono { flex: none; }

/* Fila de "recordarme" + "olvidé mi clave". */
.auth-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--muted);
  margin: var(--sp-1) 0;
}
.auth-fila a { color: var(--blue-txt); font-weight: 600; }
.auth-check { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.auth-check input { width: 18px; height: 18px; accent-color: var(--teal); }

.auth-pie {
  text-align: center;
  margin-top: var(--sp-4);
  font-size: .88rem;
}
.auth-pie a { color: var(--blue-txt); font-weight: 600; }

/* Botón en espera: cambia el icono por el aro que gira y se deshabilita. */
.girando { display: none; }
.enviando .girando { display: block; animation: auth-girar 1s linear infinite; }
.enviando .quieto { display: none; }
@keyframes auth-girar { to { transform: rotate(360deg); } }

/* ------------------------------------------- MI ED con sesión real -- */
/* Estados que el mockup no tenía (guardar una tarea, cerrar sesión). Viven aquí
   porque auth.css es la hoja de este módulo; el resto del panel sigue usando
   las clases de componentes.css. */
.task.guardando { opacity: .5; pointer-events: none; }

.salir {
  display: flex;
  justify-content: center;
  margin-top: 26px;
}
.salir button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
  padding: var(--sp-2);
  border-radius: var(--rs);
}
.salir button:hover { color: var(--rojo-txt); }

/* ======================================================================
   Documento de identidad
   ====================================================================== */

/* Las dos opciones, siempre visibles, con la forma de las pestañas del sitio. */
.doc-tipos { display: flex; gap: 6px; }
.doc-tipo { flex: 1; }
.doc-tipo input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.doc-tipo span {
  display: block; text-align: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--card); color: var(--muted);
  font-size: .85rem; font-weight: 500; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.doc-tipo span:hover { border-color: var(--azure); }
.doc-tipo input:checked + span {
  background: var(--blue); color: #fff; border-color: var(--blue);
}
/* El foco se ve en la píldora, porque el radio real está oculto. */
.doc-tipo input:focus-visible + span {
  outline: 3px solid var(--azure); outline-offset: 2px;
}
.campo-documento #campo-documento { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

/* ======================================================================
   Teléfono internacional (intl-tel-input)

   La librería expone sus propias variables CSS, así que en vez de pelear
   especificidad con su hoja del CDN basta con darles el valor de nuestros
   tokens: se tematiza sola y sigue el modo claro/oscuro sin más trabajo.
   Se declaran en .iti (no en :root) para que ganen sin depender del orden
   en que se carguen las hojas.
   ====================================================================== */

.iti {
  --iti-dropdown-bg: var(--card);
  --iti-border-color: var(--border);
  --iti-dialcode-color: var(--muted);
  --iti-arrow-color: var(--muted);
  --iti-hover-color: var(--bg2);

  width: 100%;
  display: block;
}

.iti .iti__tel-input { width: 100%; }
.iti .iti__country-container { z-index: 3; }

.iti .iti__selected-country { border-radius: var(--rs) 0 0 var(--rs); }
.iti .iti__selected-country-primary { padding: 0 6px 0 var(--sp-3); }
.iti .iti__selected-dial-code { color: var(--muted); font-size: .95rem; }
.iti .iti__selected-country:focus-visible { outline: 3px solid var(--azure); outline-offset: -3px; }

.iti .iti__dropdown-content {
  border-radius: var(--rs);
  box-shadow: var(--sh-md);
  color: var(--text);
}

.iti .iti__search-input {
  background: var(--bg2);
  color: var(--text);
  border-bottom: 1px solid var(--border);
  border-radius: var(--rs) var(--rs) 0 0;
  padding: 10px var(--sp-3);
  font-family: var(--font-b);
  font-size: .92rem;
}
.iti .iti__search-input::placeholder { color: var(--muted); }

.iti .iti__country-list { max-height: 260px; }
.iti .iti__country { font-size: .9rem; }
.iti .iti__country-name { color: var(--text); }
.iti .iti__country[aria-selected="true"] { background: var(--bg3); }

/* En móvil la librería abre el desplegable a pantalla completa. */
.iti--fullscreen-popup .iti__dropdown-content { border-radius: var(--r-lg) var(--r-lg) 0 0; }

/* Dos campos que se leen juntos (los apellidos) comparten fila cuando cabe. */
.campo-par { display: grid; gap: var(--sp-3); }
@media (min-width: 420px) {
  .campo-par { grid-template-columns: 1fr 1fr; }
}