/* Páginas de entrada (login, código, logout, primer acceso).
   Paleta coherente con COLORS.primary de Unfold (settings.py). */

:root {
  --primario: oklch(47% .12 55);         /* primary-600 */
  --primario-oscuro: oklch(39% .1 50);   /* primary-700, hover */
  --fondo: oklch(97% .02 70);            /* primary-50 */
  --tarjeta: #fff;
  --texto: #1f2937;
  --texto-suave: #6b7280;
  --borde: #e5e7eb;
  --error: #b91c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primario: oklch(56% .13 60);       /* primary-500: más contraste sobre oscuro */
    --primario-oscuro: oklch(66% .12 65);
    --fondo: oklch(16% .04 50);          /* primary-950 */
    --tarjeta: oklch(24% .06 50);        /* primary-900 */
    --texto: #e5e7eb;
    --texto-suave: #9ca3af;
    --borde: oklch(31% .08 50);          /* primary-800 */
    --error: #fca5a5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 1.25rem;
}

.entrance { width: 100%; max-width: 24rem; }

.entrance-marca { text-align: center; margin-bottom: 1.5rem; }
.entrance-marca h2 { margin: 0; font-size: 1.6rem; letter-spacing: .02em; }
.entrance-marca p { margin: .25rem 0 0; font-size: .85rem; color: var(--texto-suave); }

.entrance-mensajes { list-style: none; margin: 0 0 1rem; padding: 0; }
.entrance-mensajes li {
  border: 1px solid var(--borde); border-radius: 6px; background: var(--tarjeta);
  padding: .6rem .8rem; font-size: .85rem; margin-bottom: .5rem;
}

.entrance-card {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 2rem;
}

/* Elementos genéricos que emite allauth dentro de la tarjeta (páginas sin override). */
.entrance-card h1 { margin: 0 0 1rem; font-size: 1.15rem; font-weight: 600; }
.entrance-card p { font-size: .9rem; color: var(--texto-suave); line-height: 1.5; }
.entrance-card form p { margin: 0 0 .9rem; color: var(--texto); }
.entrance-card label { display: block; font-size: .85rem; margin-bottom: .3rem; }

.entrance-card input:not([type="checkbox"]):not([type="hidden"]) {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--borde);
  border-radius: 6px;
  background: transparent;
  color: var(--texto);
  font-size: .95rem;
}
.entrance-card input:focus { outline: 2px solid var(--primario); outline-offset: 1px; }

/* Botón principal: submits y links de provider (ul > li > a en las páginas de allauth). */
.entrance-card button[type="submit"],
.entrance-card ul:not(.errorlist):not(.entrance-mensajes) a,
.entrance-boton-proveedor {
  display: block; width: 100%;
  padding: .6rem .8rem; margin: .35rem 0;
  background: var(--primario); color: #fff;
  border: 0; border-radius: 6px;
  font-size: .95rem; text-align: center; text-decoration: none;
  cursor: pointer;
}
.entrance-card button[type="submit"]:hover,
.entrance-card ul:not(.errorlist) a:hover,
.entrance-boton-proveedor:hover { background: var(--primario-oscuro); }

.entrance-card ul:not(.errorlist) { list-style: none; margin: 0; padding: 0; }

/* Botón secundario (outline): "envíame un código" y el Cancelar de la página de código. */
.entrance-boton-secundario,
.entrance-card button[form] {
  display: block; width: 100%;
  padding: .6rem .8rem; margin: .35rem 0;
  background: transparent; color: var(--primario);
  border: 1px solid var(--primario); border-radius: 6px;
  font-size: .95rem; text-align: center; text-decoration: none;
  cursor: pointer;
}
.entrance-boton-secundario:hover,
.entrance-card button[form]:hover { border-color: var(--primario-oscuro); color: var(--primario-oscuro); }

/* Links sueltos ("Volver", "Other sign-in options"). */
.entrance-card a { color: var(--primario); }
.entrance-volver { display: block; margin-top: 1rem; font-size: .85rem; text-align: center; }

.entrance-clave { margin-top: .75rem; }
.entrance-clave summary {
  font-size: .85rem; color: var(--texto-suave);
  cursor: pointer; text-align: center; margin: .5rem 0;
}
.entrance-clave form { margin-top: .75rem; }

.entrance-card hr { border: 0; border-top: 1px solid var(--borde); margin: 1rem 0; }

.entrance-card ul.errorlist {
  list-style: none; margin: 0 0 .75rem; padding: 0;
  color: var(--error); font-size: .85rem;
}
.entrance-card span.helptext { display: block; font-size: .8rem; color: var(--texto-suave); margin-top: .25rem; }