/* ============================================================================
   Konversa — Pantalla de acceso (opción 1a)
   ----------------------------------------------------------------------------
   Panel de marca con fotografía a la izquierda + formulario a la derecha.

   Construido con los tokens y los componentes del design system Konversa
   (claude.ai/design, proyecto 02ac615d-560b-4bf7-84b2-004edecce9f2). Los
   componentes originales son React/JSX; aquí viven como clases CSS.

   NOTA DE ORIGEN: la especificación del design system
   (uploads/WhatsappOSS_Design.md, "Login · Turno 3") documenta las opciones 3a
   y 3b, no la 2a. Pero la 2a es la combinación de ambas, y cada mitad está
   especificada al detalle:

     · Panel fotográfico izquierdo  → §2 (opción 3a): foto en cover con
       object-position:30% center y grayscale(.55) contrast(1.05), velo navy,
       halo mint 900px en left:-260/top:-320, halo teal 760px en
       right:-220/bottom:-300.
     · Columna de formulario + logo → §3 (opción 3b): columna de 392px,
       logo-02-navy.png a 307px, labels de campo alineados a la izquierda y
       todo lo demás centrado, copyright absoluto en bottom:48px.

   No se inventó ningún valor: tipografías, colores, radios, alturas de
   control, sombras y transiciones salen todos de tokens.css.

   FALTA: la fotografía. La spec la nombra en §4 como
   `assets/photo-agent-hud.jpg`, pero no está en el design system — su propio
   readme aclara que nunca se entregó. Ver .k-photo más abajo.

   Desviaciones deliberadas respecto del mockup (lienzo fijo 1440×860):
   · Alto real de ventana (100dvh) en lugar de 860px fijos.
   · Titular del panel y logo con clamp() para el rango 960–1440px.
   · Debajo de 960px el panel fotográfico se oculta y queda el formulario.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body.k-login {
  background: var(--white);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------------ layout */

.k-login__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  min-height: 100dvh;
}

/* ============================================================================
   Panel de marca (izquierda) — fotografía + velo + halos
   ========================================================================== */

.k-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 80px;
  /* Fondo de respaldo: si la fotografía no está, el panel sigue siendo
     legible sobre navy sólido — mismo criterio que la 3a del design system. */
  background: var(--navy-900);
}

/* La foto va en cover, fría y desaturada. Nunca cálida ni con grano.
   Va como capa CSS y no como <img> a propósito: si el archivo todavía no
   existe, no se pinta nada y queda el navy de respaldo — un <img> roto
   mostraría el ícono de imagen faltante encima del panel. */
.k-photo {
  position: absolute;
  inset: 0;
  background-image: url("../../img/konversa/side-panel.jpg");
  background-size: cover;
  background-position: 30% center;
  background-repeat: no-repeat;
  filter: grayscale(0.55) contrast(1.05);
}

/* El velo no es decorativo: es lo que garantiza el contraste del texto. */
.k-veil {
  position: absolute;
  inset: 0;
  background: var(--veil-navy);
  pointer-events: none;
}

/* Halo: círculo anclado fuera del lienzo, solo se ve la caída.
   Máximo dos por superficie, en esquinas opuestas. */
.k-halo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.k-halo--top {
  width: 900px;
  height: 900px;
  left: -260px;
  top: -320px;
  background: var(--halo-mint);
}

.k-halo--bottom {
  width: 760px;
  height: 760px;
  right: -220px;
  bottom: -300px;
  background: var(--halo-teal);
}

.k-panel__content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
  max-width: 560px;
}

/* ---------------------------------------------------------------- eyebrow */

.k-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
}

.k-eyebrow__rule {
  width: 26px;
  height: 2px;
  flex: 0 0 auto;
  background: var(--mint);
}

.k-eyebrow__text {
  font-size: var(--size-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--on-dark-muted-panel);
}

/* ----------------------------------------------------------------- titular */

.k-panel__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: clamp(44px, 5vw, var(--size-h1-display));
  line-height: 1.05;
  letter-spacing: var(--tracking-display);
  color: var(--white);
}

/* Único énfasis tipográfico permitido dentro de un titular. */
.k-panel__title em {
  font-style: normal;
  font-weight: var(--weight-display-extra, 800);
  color: var(--mint);
}

.k-panel__lead {
  margin: 0;
  font-size: var(--size-lead-lg);
  line-height: var(--leading-body);
  color: var(--on-dark-body-panel);
  max-width: var(--measure-lead);
}

/* ------------------------------------------------------- píldora de canal */

.k-panel__trust {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Variante "glass": solo existe sobre oscuro. */
.k-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px 0 6px;
  border: 1px solid var(--glass-border-strong);
  border-radius: var(--radius-pill);
  background: var(--glass-fill-strong);
  color: var(--white);
  font-weight: var(--weight-bold);
  font-size: var(--size-meta);
  white-space: nowrap;
}

/* El verde de WhatsApp existe únicamente como glifo/marca de canal. */
.k-chip__glyph {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--whatsapp);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}

.k-panel__trust-text {
  font-size: var(--size-meta);
  font-weight: var(--weight-medium);
  color: var(--on-dark-muted-panel);
}

/* --------------------------------------------------------------- métricas */

.k-metrics {
  display: flex;
  gap: var(--space-12);
  border-top: var(--border-width-hairline) solid var(--rule-on-dark);
  padding-top: var(--space-8);
  margin-top: var(--space-1);
}

.k-metric {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.k-metric__value {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-metric);
  line-height: var(--leading-display);
  color: var(--white);
}

.k-metric__label {
  font-size: var(--size-metric-label);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-metric-label);
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--on-dark-muted-panel);
}

.k-panel__copy {
  position: relative;
  margin: 56px 0 0;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: var(--on-dark-copyright);
}

/* ============================================================================
   Columna del formulario (derecha)
   ========================================================================== */

.k-login__form-col {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-14) var(--space-11);
  overflow-y: auto;
}

.k-login__form-wrap {
  width: var(--column-form);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-7);
}

.k-login__logo {
  /* Bajado un escalón desde clamp(230px, 21vw, 316px): el lockup competía en
     peso con "Bienvenido de nuevo", que es el encabezado real de la columna.
     Se conserva el clamp —no un ancho fijo— para que siga acompañando al ancho
     de la ventana en lugar de quedar pequeño en pantallas grandes. */
  width: clamp(196px, 18vw, 268px);
  height: auto;
  display: block;
}

.k-login__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.k-login__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-h2);
  color: var(--text-heading);
}

.k-login__lead {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink-500);
}

/* ------------------------------------------------------------- formulario */

.k-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.k-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  text-align: left;
}

/* Fila de etiqueta: permite colgar una acción a la derecha ("¿La olvidaste?"). */
.k-field__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.k-field__label {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: var(--size-label);
  color: var(--text-label);
}

.k-field__input {
  height: var(--control-height-input);
  width: 100%;
  padding: 0 var(--control-padding-inline);
  border: var(--border-width-field) solid var(--border-field);
  border-radius: var(--radius-control);
  background: var(--surface-field);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--navy);
  outline: none;
  transition: var(--transition-field);
}

.k-field__input::placeholder { color: var(--ink-300); }

.k-field__input:focus {
  border-color: var(--border-field-focus);
  background: var(--surface-field-focus);
  box-shadow: var(--shadow-focus);
}

.k-field__input:disabled { opacity: 0.55; }

/* El autorrelleno de Chrome pinta su propio fondo y tapa --surface-field;
   se repinta con un inset shadow, que sí respeta. */
.k-field__input:-webkit-autofill,
.k-field__input:-webkit-autofill:hover,
.k-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--navy);
  -webkit-box-shadow: 0 0 0 1000px var(--surface-field-focus) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* ---------------------------------------------------------------- enlaces */

.k-link {
  color: var(--text-link);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: var(--transition-action);
}

/* Hover: los enlaces teal pasan a navy. Sin subrayado ni desplazamiento. */
.k-link:hover { color: var(--navy); }

.k-link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

.k-field__action { font-size: var(--size-label); }

.k-login__signup {
  margin: 0;
  font-size: var(--size-meta);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
}

/* --------------------------------------------------------------- checkbox */

.k-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: var(--control-height-min-touch);
  cursor: pointer;
  user-select: none;
}

.k-check__box {
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  flex: 0 0 auto;
  margin: 0;
  accent-color: var(--accent-control);
  cursor: pointer;
}

.k-check__box:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 4px;
}

.k-check__label {
  font-size: var(--size-meta);
  font-weight: var(--weight-regular);
  color: var(--ink-700);
}

/* -------------------------------------------------------------------- CTA */

.k-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: var(--control-height-cta);
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: var(--action-primary-bg);
  color: var(--action-primary-fg);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-button);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-action);
}

/* Hover = salto de color (navy → teal), sin escala, sombra ni desplazamiento. */
.k-btn:hover { background: var(--action-primary-bg-hover); }

.k-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.k-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--action-primary-bg);
}

/* ---------------------------------------------------------------- divisor */

.k-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.k-divider::before,
.k-divider::after {
  content: "";
  flex: 1;
  height: var(--border-width-hairline);
  background: var(--border-divider);
}

.k-divider__label {
  font-size: var(--size-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-divider);
  text-transform: uppercase;
  color: var(--ink-300);
  white-space: nowrap;
}

/* --------------------------------------------------- errores de validación */

.k-alert {
  width: 100%;
  margin: 0;
  padding: 12px var(--control-padding-inline);
  border-radius: var(--radius-control);
  background: #fdecec;
  color: #8c2626;
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  text-align: left;
}

.k-alert ul { margin: 0; padding: 0; list-style: none; }
.k-alert li + li { margin-top: var(--space-1); }

.k-field__error {
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: #c0392b;
}

/* ASP.NET renderiza el contenedor del resumen aunque no haya errores; sin esto
   se vería una caja roja vacía en cada carga limpia de la página. */
.validation-summary-valid,
.field-validation-valid { display: none; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1280px) {
  .k-panel { padding: 56px; }
}

/* Por debajo del punto de colapso el panel desaparece: un titular de 64px y
   una fotografía apaisada no funcionan en vertical, y lo que importa es el
   formulario. */
@media (max-width: 960px) {
  .k-login__grid { grid-template-columns: 1fr; }
  .k-panel { display: none; }
  .k-login__form-col { padding: var(--space-11) var(--space-7) 96px; }
}

@media (max-height: 760px) {
  .k-login__form-col { align-items: flex-start; }
  .k-panel { justify-content: center; }
  .k-panel__copy { margin-top: var(--space-11); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ============================================================================
   PANTALLA CENTRADA (opción 3a) — cambio de contraseña
   ----------------------------------------------------------------------------
   Segunda composición del design system, especificada en §2 de
   uploads/WhatsappOSS_Design.md: fotografía + velo + halos, con una columna
   central de 520px y una tarjeta blanca encima.

   POR QUÉ 3a Y NO EL SPLIT DEL LOGIN: cambiar la contraseña es una pantalla de
   TAREA, no de entrada. El panel de marca del login vende el producto —
   titular, chip de canal, métricas de disponibilidad— y eso no tiene sentido
   para alguien que ya inició sesión y solo necesita resolver un trámite. La 3a
   concentra la atención en una sola columna y mantiene la continuidad visual
   (misma foto, mismo velo, mismos halos, mismos campos y botón).

   Reutiliza tal cual .k-photo, .k-veil, .k-halo, .k-field, .k-btn, .k-alert y
   .k-divider del bloque del login: son los mismos componentes del sistema.

   DESVIACIÓN: la 3a coloca el logo en versión BLANCA sobre el fondo oscuro,
   encima de la tarjeta. Aquí va en navy DENTRO de la tarjeta — no se descargó
   logo-02-white.png y, en una pantalla de trámite, un lockup de 320px flotando
   sobre la foto pesa más de lo que aporta. Si se quiere la composición literal,
   hace falta ese asset.
   ========================================================================== */

body.k-auth {
  background: var(--navy-900);
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

.k-auth-stage {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-14) var(--space-7);
}

.k-auth-column {
  position: relative;
  width: var(--column-hero);
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-9);
}

/* Tarjeta del sistema: radio 24, padding 38×40, sin borde y una sola sombra
   muy difusa. */
.k-card {
  width: 100%;
  background: var(--surface-card);
  border-radius: var(--radius-card);
  padding: var(--space-10) var(--space-11);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.k-card__logo {
  width: clamp(180px, 40%, 220px);
  height: auto;
  display: block;
}

.k-card__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.k-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: var(--size-h2);
  line-height: 1.1;
  letter-spacing: var(--tracking-h2);
  color: var(--text-heading);
}

.k-card__lead {
  margin: 0;
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink-500);
}

/* Aviso de cambio forzado. El sistema no define paleta de advertencia, así que
   se construye con el mismo criterio que .k-alert: fondo muy claro del matiz y
   texto oscuro del mismo matiz (7.1:1), sin bordes ni iconos. */
.k-notice {
  width: 100%;
  margin: 0;
  padding: 12px var(--control-padding-inline);
  border-radius: var(--radius-control);
  background: #fff6e5;
  color: #8a5a00;
  font-size: var(--size-label);
  font-weight: var(--weight-medium);
  text-align: left;
}

.k-auth-copy {
  position: absolute;
  bottom: 26px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: var(--on-dark-copyright);
}

@media (max-width: 560px) {
  .k-card { padding: var(--space-7); }
}

/* En ventanas bajas la tarjeta manda: se libera el centrado vertical y el
   copyright deja de ser absoluto para no montarse sobre el formulario. */
@media (max-height: 760px) {
  .k-auth-stage { align-items: flex-start; padding-block: var(--space-11); }
  .k-auth-copy { position: static; margin-top: var(--space-8); }
}

/* ============================================================================
   PÁGINA CLARA DE CUENTA — perfil
   ----------------------------------------------------------------------------
   A diferencia del login y del cambio de contraseña, al perfil NO se llega
   desde fuera: es un destino del rail de navegación, dentro de la aplicación.
   Por eso no lleva la fotografía ni el velo — una escenografía oscura detrás de
   una pantalla de consulta es teatral y la haría parecer otra puerta de acceso.

   Queda claro, con la misma tarjeta, tipografía, campos y botones del sistema,
   más dos halos muy tenues para que el fondo no quede desnudo. Es la misma
   gramática del fondo del chat, con la misma justificación.
   ========================================================================== */

body.k-page {
  min-height: 100dvh;
  background-color: var(--field-bg);
  background-image:
    radial-gradient(circle 620px at 100% 0%, rgba(70, 189, 188, 0.14), transparent 68%),
    radial-gradient(circle 520px at 0% 100%, rgba(34, 168, 175, 0.10), transparent 70%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: var(--font-sans);
  font-size: var(--size-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
}

.k-page-wrap {
  width: var(--column-hero);
  max-width: 100%;
  margin: 0 auto;
  padding: var(--space-14) var(--space-7) var(--space-11);
  display: flex;
  flex-direction: column;
  gap: var(--space-9);
}

/* .k-card centra su contenido para el formulario de acceso; aquí los datos van
   alineados a la izquierda. */
.k-card--flush {
  align-items: stretch;
  text-align: left;
}

/* Lista de datos: etiqueta arriba en minúscula tipográfica, valor debajo.
   Se prefiere apilado y no dos columnas porque los valores (correo, roles)
   tienen anchos muy dispares y una rejilla los dejaría descolgados. */
.k-deflist {
  margin: 0;
  display: flex;
  flex-direction: column;
}

.k-deflist__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width-hairline) solid var(--border-divider);
}

.k-deflist__row:last-child { border-bottom: none; }

.k-deflist__term {
  font-size: var(--size-caption);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-metric-label);
  text-transform: uppercase;
  color: var(--ink-300);
}

.k-deflist__desc {
  margin: 0;
  font-size: var(--size-meta);
  font-weight: var(--weight-medium);
  color: var(--text-heading);
  word-break: break-word;
}

/* Los roles son etiquetas, no texto corrido: píldora, el radio que el sistema
   reserva para ese uso. */
.k-roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: 2px;
}

.k-role {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: rgba(34, 168, 175, 0.12);
  color: var(--teal-600);
  font-size: var(--size-caption);
  font-weight: var(--weight-bold);
}

.k-card__actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: nowrap;
}

/* Ancho igual con flex:1 1 0 y no auto: así los dos botones miden lo mismo sin
   depender del largo de su texto, que es lo que los desbalanceaba. Bajan a 44px
   (el mínimo táctil del sistema) porque dos CTA de 52px seguidos pesan
   demasiado para acciones secundarias de una pantalla de consulta. */
.k-card__actions .k-btn {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: var(--control-height-min-touch);
  padding: 0 var(--space-3);
  font-size: 15px;
  white-space: nowrap;
}

/* Solo en pantallas muy angostas se apilan: por debajo de esto los textos se
   recortarían. */
@media (max-width: 430px) {
  .k-card__actions { flex-wrap: wrap; }
  .k-card__actions .k-btn { flex-basis: 100%; }
}

/* Segunda acción: el sistema no define botón secundario sobre claro, así que se
   deriva del CTA — misma altura y radio, sin relleno, con la línea de campo
   como borde. Al pasar, se comporta como los enlaces: teal. */
.k-btn--ghost {
  background: transparent;
  color: var(--text-heading);
  border: var(--border-width-field) solid var(--border-field);
}

.k-btn--ghost:hover {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}

.k-page-copy {
  margin: 0;
  text-align: center;
  font-size: var(--size-caption);
  font-weight: var(--weight-medium);
  color: var(--ink-300);
}

/* En la variante alineada a la izquierda, la marca y el encabezado siguen
   centrados: son el remate de la tarjeta, no parte de los datos. */
.k-card--flush .k-card__logo { align-self: center; }
.k-card--flush .k-card__head { text-align: center; }