/*
 * Kai-Cata — pantallas públicas de acceso (registro, login, recuperar/restablecer contraseña).
 * Se apoya en assets/css/tokens.css (Fase 0) — no redefine paleta ni tipografía, solo layout.
 */

* { box-sizing: border-box; }

body.kc-auth {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--kc-paper);
  color: var(--kc-ink);
  font-family: var(--kc-font-body);
  padding: 24px;
}

.kc-auth-tarjeta {
  width: 100%;
  max-width: 420px;
  /* Antes esto era un blanco fijo (#fff) — con la marca de plataforma (lib/marca_plataforma.php)
     pudiendo poner un fondo de página oscuro, el texto (var(--kc-ink)) se calcula para contrastar
     contra var(--kc-paper), así que la tarjeta tiene que usar esa MISMA variable como fondo — si
     no, queda texto claro sobre una tarjeta blanca fija, ilegible. Mismo criterio que ya usaban
     los campos de abajo (línea "background: var(--kc-paper)" en .kc-campo input). */
  background: var(--kc-paper);
  border: 1px solid var(--kc-console-line, #E4E0D3);
  border-radius: var(--kc-radius-md);
  padding: 32px 28px;
}

.kc-auth-marca {
  font-family: var(--kc-font-display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

/* Logo de marca de la plataforma (admin/branding.php), cuando Antonio subió uno en vez de dejar
   el texto "Kai-Cata" de siempre — ver lib/marca_plataforma.php::kc_marca_plataforma_bloque_html(). */
.kc-auth-logo { display: block; height: auto; width: auto; max-height: 40px; max-width: 100%; object-fit: contain; margin: 0 0 8px; }

.kc-auth-subtitulo {
  margin: 0 0 24px;
  color: var(--kc-graphite);
  font-size: 0.95rem;
}

.kc-campo { margin-bottom: 16px; }

.kc-campo label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
}

.kc-campo input[type="email"],
.kc-campo input[type="password"],
.kc-campo input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D8D3C3;
  border-radius: var(--kc-radius-sm);
  font-family: var(--kc-font-body);
  font-size: 1rem;
  background: var(--kc-paper);
  color: var(--kc-ink);
}

.kc-campo input:focus {
  outline: 2px solid var(--kc-graphite);
  outline-offset: 1px;
}

.kc-moneda-opciones {
  display: flex;
  gap: 12px;
}

.kc-moneda-opciones label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #D8D3C3;
  border-radius: var(--kc-radius-sm);
  padding: 10px 12px;
  font-weight: 500;
  font-size: 0.95rem;
  cursor: pointer;
}

.kc-boton {
  width: 100%;
  padding: 12px;
  background: var(--kc-ink);
  color: var(--kc-paper);
  border: none;
  border-radius: var(--kc-radius-sm);
  font-family: var(--kc-font-body);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
}

.kc-boton:hover { background: var(--kc-graphite); }

.kc-auth-pie {
  margin-top: 20px;
  font-size: 0.85rem;
  color: var(--kc-graphite);
  text-align: center;
}

.kc-auth-pie a { color: var(--kc-ink); }

/* "¿No has recibido tu clave temporal? Reenviarla" — colapsado por defecto en login.php. */
.kc-auth-reenvio {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--kc-console-line, #E4E0D3);
  font-size: 0.85rem;
}
.kc-auth-reenvio summary {
  cursor: pointer;
  color: var(--kc-graphite);
  text-align: center;
}
.kc-auth-reenvio summary:hover { color: var(--kc-ink); }
.kc-auth-reenvio form { margin-top: 12px; }

.kc-alerta {
  padding: 10px 12px;
  border-radius: var(--kc-radius-sm);
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.kc-alerta-error {
  background: #F6E3DF;
  color: var(--kc-alert);
  border: 1px solid #E3B9AF;
}

.kc-alerta-exito {
  background: #E9EDE4;
  color: var(--kc-moss);
  border: 1px solid #C7D2BC;
}

/* Honeypot — invisible para una persona, visible para un formulario automatizado */
.kc-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Tamaño mínimo de toque (ronda "auditoría responsiva + PWA") ----
   Los campos de estas 5 pantallas medían ~41px de alto real en móvil — por debajo del mínimo
   recomendado de 44px. Mismo criterio de `pointer: coarse` que el resto de la app. */
@media (pointer: coarse) {
  .kc-campo input[type="email"],
  .kc-campo input[type="password"],
  .kc-campo input[type="text"] {
    min-height: 44px;
  }
  .kc-boton { min-height: 44px; }
  .kc-moneda-opciones label { min-height: 44px; }
}

/* Selector de idioma de las pantallas públicas (login/registro/recuperar/restablecer) — ronda
   "idioma trilingüe, páginas públicas". Mismo mecanismo que el selector del sidebar de la
   consola (lib/layout.php) pero sin cuenta autenticada de la cual leer el idioma — ver
   kc_idioma_publico_*() en lib/i18n.php e idioma-publico-cambiar.php. Arriba a la derecha de la
   tarjeta, chico y discreto, no debe competir visualmente con el formulario. */
.kc-auth-idioma {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 12px;
}
.kc-auth-idioma select {
  font-family: var(--kc-font-body);
  font-size: 0.8rem;
  color: var(--kc-graphite);
  background: var(--kc-paper);
  border: 1px solid var(--kc-console-line, #E4E0D3);
  border-radius: var(--kc-radius-sm);
  padding: 4px 8px;
  cursor: pointer;
}