/**
 * ARCHIVO: public/css/login.css
 * MÓDULO: Login — Respaldo visual del ZIP
 * QUÉ HACE: Replica colores/layout del prototipo si Tailwind CDN tarda o falla.
 * SI LO ROMPES: Sin CDN la pantalla puede verse “plana” o distinta al ZIP.
 */

@import url("https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700&display=swap");

/* MODF. LOGIN — Base visual idéntica al screen.png del ZIP. */
body.font-body-md,
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Public Sans", sans-serif;
  background-color: #f7f9fb;
  color: #191c1e;
  -webkit-font-smoothing: antialiased;
}

/* Contenedor centrado */
body > div.w-full.max-w-\[440px\],
.login-shell {
  width: 100%;
  max-width: 440px;
}

h1.font-h1,
h1.text-h1 {
  font-size: 30px;
  line-height: 38px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: #091426;
  margin: 0;
}

.font-label-caps,
.text-label-caps,
label.font-label-caps {
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.05em;
  font-weight: 700;
  text-transform: uppercase;
  color: #45474c;
}

.text-on-surface-variant {
  color: #45474c;
}

.text-secondary {
  color: #006c4a !important;
}

.text-error {
  color: #ba1a1a !important;
}

.bg-primary {
  background-color: #091426 !important;
}

.bg-surface-container-lowest {
  background-color: #ffffff !important;
}

.border-outline-variant {
  border-color: #c5c6cd !important;
}

.border-error {
  border-color: #ba1a1a !important;
}

/* Inputs estilo ZIP */
#form-login input[type="text"],
#form-login input[type="password"] {
  width: 100%;
  height: 48px;
  padding: 4px 16px 0;
  border-width: 2px;
  border-style: solid;
  border-radius: 0.25rem;
  background: transparent;
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  outline: none;
}

#form-login input:focus {
  border-color: #091426;
}

#form-login input.border-error:focus {
  border-color: #ba1a1a;
}

/* Botón primario ZIP */
#form-login button[type="submit"] {
  width: 100%;
  height: 48px;
  margin-top: 8px;
  background: #091426;
  color: #fff;
  border: 0;
  border-radius: 0.25rem;
  font-family: "Public Sans", sans-serif;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

#form-login button[type="submit"]:hover {
  background: #1e293b;
}

/* Icono institucional */
.w-20.h-20.bg-primary {
  width: 80px;
  height: 80px;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}