/* =====================================================================
   login.css — el inicio de sesión (/accounts/login/) con el DS.

   Porta login.css de la maqueta aprobada (~/Code/docokids-maquetas/login/).
   Aquí vive solo lo que esta página necesita y el DS no tiene. Todo valor
   sale de un token; los pocos literales están en los alias de .login-page,
   cada uno con su porqué.

   Carga después de form.css (el campo .ds-field y los tokens AA) y de
   welcome-support-float.css (la burbuja de Soporte), así que sus ajustes de
   abajo ganan por orden de fuente sin subir especificidad.

   OJO: varias clases de aquí también las usa el JS del template como
   ganchos (login-phone-option, login-phone-option--selected,
   login-phone-prefix--open, login-phone-no-results). Si cambias un nombre,
   cámbialo también en el JS, o el selector de país deja de funcionar.
   ===================================================================== */

/* ---- Lienzo: la página es un panel sobre gris claro, como Mi Docokids. ---- */
.login-page {
  background: var(--gris-claro);
  /* 4px = el mismo radio que .btn en button.css (NO píldoras: el DS usa
     geometría quieta). Mismo patrón de alias que --cbx-radio en combobox.css:
     cuando el DS tenga un token de radio global, esto apunta allá. */
  --login-radio-control: 4px;
  /* El radio de panel del DS (--ds-radius-panel) se declara en panel.css, que
     esta página no carga porque trae las listas de Mi Docokids. 12px es su
     mismo valor; si panel.css llega a cargarse, manda el suyo. */
  --login-radio-panel: var(--ds-radius-panel, 12px);
  /* La sombra del panel flotante del combobox (--cbx-sombra en combobox.css):
     el DS todavía no tiene escala de elevación. */
  --login-sombra-panel: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.login-page .site-nav--minimal,
.login-page .site-footer { background: var(--paper); }

.login-main { padding: var(--space-7) 0; }
.login-col {
  max-width: 27rem; /* medida de lectura de un formulario de una columna */
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ---- Encabezado editorial: kicker + display cortos, centrados. ---- */
.login-col .eyebrow { text-align: center; }
.login-titulo {
  font-family: var(--font-serif);
  font-size: var(--fs-h2);
  font-weight: 600;
  text-align: center;
  color: var(--gris-oscuro);
  margin: 0 0 var(--space-5);
}
.acento-verde { color: var(--p-verde); }

/* ---- Panel blanco. ---- */
.login-panel {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--login-radio-panel);
  padding: var(--space-5);
}

/* ---- Pestañas (Iniciar sesión | Registrarse): texto quieto, subrayado teal
        en la activa. Jerarquía por peso y hairline, no por chrome. Son
        enlaces, así que el hover teal de base.css (a:hover) se apaga aquí. ---- */
.login-tabs {
  display: flex;
  border-bottom: 1px solid var(--hairline);
  margin: 0 0 var(--space-5);
}
.login-tab {
  flex: 1;
  text-align: center;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--gris);
  padding: var(--space-3) 0;
}
.login-tab:hover { color: var(--gris-oscuro); }
.login-tab[aria-current="page"] {
  color: var(--gris-oscuro);
  font-weight: 600;
  border-bottom-color: var(--p-verde);
}

/* ---- Los avisos del servidor (_avisos.html), arriba del contenido del panel.
   El error deja los 24px de .ds-field debajo; el aviso breve, los mismos.
   El aviso breve pierde su línea fina de arriba: justo encima ya está la de
   las pestañas, y dos líneas seguidas se leen como una caja vacía. ---- */
.login-avisos .ds-aviso {
  border-top: 0;
  padding-top: 0;
  margin-bottom: var(--space-4);
}

/* ---- Botones de proveedor: quietos (hairline), apilados, logo + nombre.
        Cada uno es el <button> de su propio <form> (ver el template). ---- */
.login-proveedores { display: grid; gap: var(--space-3); }
.login-proveedores form { margin: 0; }
.btn-proveedor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--login-radio-control);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--gris-oscuro);
  padding: 0.65rem var(--space-4);
  cursor: pointer;
}
.btn-proveedor:hover {
  border-color: var(--gris);
  color: var(--gris-oscuro);
}
.proveedor-icono { width: 1.25rem; height: 1.25rem; flex-shrink: 0; }

/* ---- Divisor "o continúa con": hairline con el texto en medio. ---- */
.login-divisor {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--gris);
  font-size: var(--fs-small);
  margin: var(--space-5) 0;
}
.login-divisor::before,
.login-divisor::after { content: ""; flex: 1; border-top: 1px solid var(--hairline); }

/* ---- Las dos decisiones del flujo actual: pregunta + control segmentado. ---- */
.login-decision { border: none; padding: 0; margin: 0 0 var(--space-3); }
.login-pregunta {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--gris-oscuro);
  margin: 0 0 var(--space-2);
}

/* El control segmentado son dos radios de verdad (los que viajan en el POST)
   con su <label> pintado de botón. El radio se queda en la página, invisible
   pero enfocable: así funcionan las flechas del teclado y el lector de
   pantalla lo anuncia como "botón de opción, 1 de 2". */
.segmentado {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.segmentado__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.segmentado__opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--ds-field-alto-min, 44px);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--login-radio-control);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--gris);
  padding: var(--space-2);
  white-space: nowrap; /* "Correo electrónico" cabe en una línea desde 360px */
  cursor: pointer;
}
.segmentado__opcion:hover { border-color: var(--gris); }
.segmentado__input:checked + .segmentado__opcion {
  border: 1.5px solid var(--p-verde);
  color: var(--gris-oscuro);
  font-weight: 600;
}
/* El mismo anillo de doble trazo de form.css (.ds-focus-ring), puesto en la
   etiqueta porque el radio, que es quien recibe el foco, no se ve. */
.segmentado__input:focus-visible + .segmentado__opcion {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 5px var(--gris-oscuro);
}
/* Por debajo de 360px "Correo electrónico" ya no cabe junto a "WhatsApp":
   las dos opciones se reparten el ancho y el texto parte en dos renglones
   en vez de salirse del panel. */
@media (max-width: 359.98px) {
  .segmentado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .segmentado__opcion { white-space: normal; text-align: center; }
}

/* ---- Número de WhatsApp: prefijo de país + número, en una fila a todo ancho.
   No usa .ds-field__par (form.css): ese apila en celular porque su selector
   muestra el nombre completo del país; este muestra solo bandera e
   indicativo y cabe junto al número desde 320px. ---- */
.login-telefono {
  position: relative; /* el panel de países mide lo mismo que la fila */
  display: flex;
  gap: var(--space-2);
}
.login-telefono > .ds-field__control { flex: 1; min-width: 0; }

/* El botón del prefijo se ve igual que un .ds-field__control: mismo alto,
   borde y radio, para que la fila se lea como un solo campo. */
.login-phone-btn {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  height: 100%;
  min-height: var(--ds-field-alto-min, 44px);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--gris-oscuro);
  background: var(--paper);
  border: 1px solid var(--ds-hairline-aa, var(--hairline));
  border-radius: var(--login-radio-control);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 150ms ease;
}
.login-phone-btn:hover { border-color: var(--gris-secundario); }
.login-phone-btn:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow:
    0 0 0 2px var(--paper),
    0 0 0 5px var(--gris-oscuro);
}
.login-phone-prefix--open .login-phone-btn { border-color: var(--ds-teal-aa, var(--p-verde)); }
.login-phone-prefix-flag { font-size: 1.125rem; line-height: 1; }
.login-phone-prefix-code { font-weight: 500; }

/* La flechita, dibujada con bordes como la del combobox (combobox.css). Los
   0.25rem son corrección óptica: girado, el cuadrado se ve más bajo que su
   caja, y el margen lo vuelve a centrar con el texto (al abrir, al revés). */
.login-phone-prefix-chevron {
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 var(--space-1) 0.25rem;
  border-right: 2px solid var(--gris);
  border-bottom: 2px solid var(--gris);
  transform: rotate(45deg);
  transition: transform 150ms ease;
}
.login-phone-prefix--open .login-phone-prefix-chevron {
  margin-bottom: -0.25rem;
  transform: rotate(-135deg);
}

/* El panel de países. Ancho de toda la fila (prefijo + número), como el panel
   del combobox, para que en un teléfono de 320px no se salga de la pantalla.
   Capa 40: la misma del combobox, encima de la burbuja de Soporte (30). */
.login-phone-dropdown {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 40;
  background: var(--paper);
  border: 1px solid var(--ds-hairline-aa, var(--hairline));
  border-radius: var(--login-radio-control);
  box-shadow: var(--login-sombra-panel);
  overflow: hidden;
}
/* 16px de letra: por debajo Safari en iPhone hace zoom al enfocar. */
.login-phone-search {
  display: block;
  width: 100%;
  min-height: var(--ds-field-alto-min, 44px);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--gris-oscuro);
  background: var(--paper);
  border: 0;
  border-bottom: 1px solid var(--ds-hairline-aa, var(--hairline));
}
.login-phone-search::placeholder { color: var(--gris); opacity: 1; }
/* El anillo universal de base.css quedaría cortado por el overflow del panel.
   En su lugar, la línea de abajo se vuelve teal y de 2px (la segunda es una
   sombra interior, para que el campo no brinque). */
.login-phone-search:focus {
  outline: none;
  border-bottom-color: var(--ds-teal-aa, var(--p-verde));
  box-shadow: inset 0 -1px 0 var(--ds-teal-aa, var(--p-verde));
}
.login-phone-list {
  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  max-height: 13.75rem; /* 220px, el alto que ya tenía la lista: ~5 países a la vista */
  overflow-y: auto;
}
.login-phone-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ds-field-alto-min, 44px);
  padding: var(--space-1) var(--space-3);
  cursor: pointer;
}
.login-phone-option:hover,
.login-phone-option--selected { background: var(--gris-claro); }
.login-phone-option--selected { font-weight: 600; }
/* Proporción 3:2 y borde hairline, como .ds-combobox__flag: una bandera con
   blanco (Perú, Japón) no se pierde sobre el fondo. */
.login-phone-flag-img-sm {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1rem;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: 2px;
}
.login-phone-flag-emoji-sm {
  flex: 0 0 auto;
  width: 1.5rem;
  text-align: center;
  line-height: 1;
}
.login-phone-option-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-small);
  color: var(--gris-oscuro);
}
.login-phone-option-code {
  flex: 0 0 auto;
  font-size: var(--fs-small);
  color: var(--gris);
}
.login-phone-no-results {
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-small);
  color: var(--gris);
  text-align: center;
}

/* ---- El aviso de error al pedir el código: rosado AA, pegado al campo de
        arriba (que deja --space-4 debajo). ---- */
.login-error-msg {
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--ds-rosado-aa, var(--p-rosado-texto));
  margin: calc(var(--space-2) - var(--space-4)) 0 var(--space-4);
}

/* ---- Entrar con código: la nota, el botón que lo pide y el campo. ---- */
.login-nota {
  font-size: var(--fs-small);
  color: var(--gris);
  margin: 0 0 var(--space-3);
}
.login-enviar-codigo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  margin-bottom: var(--space-3);
}

/* "¿Olvidaste tu contraseña?" va a --space-2 del campo de arriba, como en la
   maqueta, aunque en el HTML viva fuera de él: el JS lo esconde por canal y
   no por método, así que no puede ir dentro de la sección de la contraseña. */
.login-olvide {
  font-size: var(--fs-small);
  margin: calc(var(--space-2) - var(--space-4)) 0 var(--space-4);
}
.login-olvide .btn-link { display: inline-block; }

/* Una sola línea bajo los enlaces de texto ("¿Olvidaste tu contraseña?" y
   "Entrar con otro dato"). Bootstrap le pone a .btn-link
   `text-decoration: underline` y el DS le suma su línea fina (border-bottom de
   button.css): juntas salen dos. La regla que lo quita en panel.css solo cubre
   sus contenedores, y esta página no carga panel.css; home.css hace lo mismo
   en la suya. */
.btn-link { text-decoration: none; }

.login-entrar { width: 100%; margin-top: var(--space-2); }
.login-otro-dato { text-align: center; margin: var(--space-4) 0 0; }

/* ---- Con la sesión ya iniciada: el saludo y sus dos salidas. ---- */
.login-sesion { margin: 0 0 var(--space-4); color: var(--gris-secundario); }
.login-sesion-acciones { display: grid; gap: var(--space-3); }

/* ---- La burbuja de Soporte (user/mi_docokids/_soporte.html).
   El componente es welcome-support-float.css, compartido con la home y Mi
   Docokids, y no se toca: aquí van los mismos ajustes que Mi Docokids le
   hace en mi-docokids.css (.perfil-soporte), sin la parte de la barra fija,
   que esta página no tiene. ---- */
@media (max-width: 991.98px) {
  .login-page .ds-support-float { min-height: 48px; } /* el piso del dedo de la home */
}
@media (max-width: 767.98px) {
  .login-page .ds-support-float {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
}
/* Al saltar con Tab a un campo de abajo, que la burbuja no lo tape. */
html:has(> body.login-page) {
  scroll-padding-bottom: calc(var(--space-3) + 48px + var(--space-2) + env(safe-area-inset-bottom, 0px));
}
@media (prefers-reduced-motion: reduce) {
  .login-page .ds-support-float { transition: none; }
}
@media print {
  .login-page .ds-support-float { display: none; }
}

/* En pantallas chicas el panel respira menos y ocupa el ancho con gutter. */
@media (max-width: 575.98px) {
  .login-main { padding: var(--space-5) 0; }
  .login-panel { padding: var(--space-4); }
}