/* =====================================================================
   [C-12] LOGIN FLOTANTE — port de "Clean & Minimal sign in" (21st, @preetsuthar17)
   al vocabulario de PneumaDev. La tarjeta es la del componente (384 px, degradado
   celeste→blanco, borde azul pálido, esquinas 24 px, icono en losa, campos con
   icono, botón con degradado gris, divisor punteado con botones abajo); lo que
   cambia es el contenido: usuario/contraseña del portal y la cuenta demo pública
   en lugar de correo y redes sociales. Se abre como <dialog> modal sobre la landing.
   ===================================================================== */

/* ---------- Diálogo y fondo ---------- */
.auth {
  position: fixed; inset: 0; margin: auto;
  width: min(384px, calc(100vw - 32px));
  max-width: none; max-height: calc(100dvh - 32px);
  padding: 0; border: 0; background: transparent; overflow: visible;
  color: var(--ink);
}
.auth:focus { outline: 0; } /* el foco va al campo Usuario (autofocus); el diálogo no dibuja anillo */
.auth::backdrop {
  background: rgba(27, 31, 36, .38);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.auth[open] { animation: auth-in .34s var(--ease-out) both; }
.auth[open]::backdrop { animation: auth-bg-in .34s ease both; }
.auth.is-closing { animation: auth-out .22s ease-in both; }
.auth.is-closing::backdrop { animation: auth-bg-out .22s ease-in both; }

@keyframes auth-in    { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes auth-out   { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes auth-bg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes auth-bg-out{ from { opacity: 1; } to { opacity: 0; } }

/* Bloquea el scroll de la página mientras el diálogo está abierto */
html.has-modal { overflow: hidden; }

/* ---------- Tarjeta (max-w-sm · from-sky-50/50 to-white · rounded-3xl · shadow-xl · p-8 · border-blue-100) ---------- */
.auth__card {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  padding: 32px;
  background: linear-gradient(180deg, rgba(227, 241, 252, .55) 0%, #fff 100%);
  border: 1px solid #D5E8F7;
  border-radius: 24px;
  box-shadow: 0 20px 25px -5px rgba(15, 76, 129, .10), 0 8px 10px -6px rgba(15, 76, 129, .10);
}

/* Cerrar (no está en el componente original: lo pide el uso como modal) */
.auth__close {
  position: absolute; top: 12px; right: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 0; border-radius: 10px; cursor: pointer;
  color: var(--ink-3); background: transparent;
  transition: background-color .18s ease, color .18s ease;
}
.auth__close:hover { background: var(--s2); color: var(--ink); }
.auth__close svg { width: 16px; height: 16px; }

/* Losa del icono (w-14 h-14 · rounded-2xl · bg-white · shadow-lg · mb-6) */
.auth__badge {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 24px;
  border-radius: 16px; background: #fff;
  box-shadow: 0 10px 15px -3px rgba(27, 31, 36, .08), 0 4px 6px -4px rgba(27, 31, 36, .08);
}
.auth__badge svg { width: 28px; height: 28px; color: var(--ink); }

/* Título (text-2xl semibold) y texto (text-sm gray-500) */
.auth__title { margin: 0 0 8px; font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; text-align: center; }
.auth__sub   { margin: 0 0 24px; font-size: 14px; line-height: 20px; color: var(--ink-3); text-align: center; }

/* ---------- Campos (gap-3 · pl-10 · py-2 · rounded-xl · border-gray-200 · bg-gray-50 · ring-blue-200) ---------- */
.auth__form { width: 100%; display: flex; flex-direction: column; }
.auth__fields { width: 100%; display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.auth__field { position: relative; }
.auth__field > svg {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.auth__input {
  width: 100%; height: 40px; padding: 8px 12px 8px 40px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--s0); color: var(--ink);
  font: inherit; font-size: 14px; line-height: 20px;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.auth__input::placeholder { color: var(--muted); }
.auth__input:focus { outline: none; border-color: transparent; box-shadow: 0 0 0 2px var(--blue-soft); background: #fff; }
.auth__field--pass .auth__input { padding-right: 40px; }
.auth__field.is-invalid .auth__input { border-color: #D9534F; }

/* Mostrar/ocultar contraseña (right-3 · gray-400) */
.auth__eye {
  position: absolute; right: 8px; top: 50%; translate: 0 -50%;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px; cursor: pointer;
  color: var(--muted); background: transparent;
  transition: color .18s ease, background-color .18s ease;
}
.auth__eye:hover { color: var(--ink-2); background: var(--s2); }
.auth__eye svg { width: 16px; height: 16px; }
.auth__eye .eye-off { display: none; }
.auth__eye[aria-pressed="true"] .eye-on { display: none; }
.auth__eye[aria-pressed="true"] .eye-off { display: block; }

/* Fila: error a la izquierda (text-sm red-500) · «¿Olvidó su contraseña?» a la derecha (text-xs medium) */
.auth__row { width: 100%; display: flex; justify-content: flex-end; align-items: flex-start; gap: 12px; min-height: 18px; }
.auth__error { flex: 1; margin: 0; font-size: 13px; line-height: 18px; color: #C0392B; text-align: left; display: none; }
.auth__error.is-on { display: block; }
.auth__error a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.auth__forgot { flex: none; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.auth__forgot:hover { text-decoration: underline; text-underline-offset: 2px; }

/* Botón principal (from-gray-700 to-gray-900 · py-2 · rounded-xl · shadow · hover:brightness-105) */
.auth__submit {
  width: 100%; height: 40px; margin: 8px 0 16px;
  border: 0; border-radius: 12px; color: #fff; font-weight: 500; font-size: 15px; cursor: pointer;
  background: linear-gradient(180deg, #4A5263 0%, var(--btn-hover) 100%);
  box-shadow: 0 1px 3px rgba(27, 31, 36, .12), 0 1px 2px -1px rgba(27, 31, 36, .12);
  transition: filter .18s ease, transform .18s ease, opacity .18s ease;
}
.auth__submit:hover { filter: brightness(1.08); }
.auth__submit:active { transform: translateY(1px); }
.auth__submit:disabled { opacity: .7; cursor: progress; filter: none; transform: none; }

/* Divisor punteado con rótulo (border-dashed gray-200 · text-xs gray-400) */
.auth__or { display: flex; align-items: center; width: 100%; margin: 8px 0; }
.auth__or::before, .auth__or::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
.auth__or span { margin: 0 8px; font-size: 12px; line-height: 16px; color: var(--muted); white-space: nowrap; }

/* Fila inferior (gap-3 · mt-2 · botones h-12 rounded-xl border bg-white hover:bg-gray-100 grow) */
.auth__alt { display: flex; gap: 12px; width: 100%; margin-top: 8px; }
.auth__demo {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 48px; padding: 0 16px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 500;
  transition: background-color .18s ease, border-color .18s ease;
}
.auth__demo:hover { background: var(--s2); }
.auth__demo svg { width: 18px; height: 18px; color: var(--ac); flex: none; }

/* ---------- Móvil ---------- */
@media (max-width: 480px) {
  .auth__card { padding: 28px 20px 24px; border-radius: 20px; }
  .auth__title { font-size: 22px; line-height: 28px; }
}