/* Estilos de la puerta de entrada.
 *
 * Son los mismos del portafolio de entregas, copiados a propósito: a este
 * trabajo se llega desde su catálogo, y encontrarse con una puerta de otro
 * color se parece demasiado a haber caído en un sitio que no es.
 *
 * Van en un archivo y no embebidos en la página porque la política de
 * seguridad del sitio no permite estilos en línea. Ésta es la única hoja que
 * se sirve sin haber entrado. */

:root {
  --azul: #1b3d63; --azul-claro: #2f6ea8; --tinta: #21303f; --suave: #5a6675;
  --linea: #e3e8ef; --fondo: #f4f7fb; --blanco: #fff; --alerta: #a4343a;
}

/* El portafolio deja elegir el tema y lo guarda en el navegador. Acá no hay
   script que pueda leer esa preferencia —la política del sitio tampoco lo
   permitiría—, así que se sigue la del sistema, que es la que acierta casi
   siempre. */
@media (prefers-color-scheme: dark) {
  :root {
    --azul: #7fb3e3; --azul-claro: #a8cdf0; --tinta: #e8edf3; --suave: #a9b6c6;
    --linea: #2b3644; --fondo: #161c24; --blanco: #1e262f; --alerta: #ef9a9e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px;
  font-family: "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
  background:
    radial-gradient(1200px 600px at 50% -10%, rgba(47, 110, 168, .10), transparent 60%),
    var(--fondo);
  color: var(--tinta);
}

.caja {
  width: 100%; max-width: 420px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 18px; padding: 34px 32px 30px;
  box-shadow: 0 18px 50px -24px rgba(16, 32, 56, .38);
}

.marca { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.marca img { height: 34px; width: auto; }
.marca span {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--suave);
}

h1 { margin: 0 0 6px; font-size: 22px; line-height: 1.25; color: var(--azul); }
.trabajo { margin: 0 0 20px; font-size: 14px; color: var(--suave); }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }

input[type="password"] {
  width: 100%; padding: 12px 14px; font-size: 16px; color: inherit;
  font-family: inherit;
  background: transparent; border: 1px solid var(--linea); border-radius: 10px;
}
input[type="password"]:focus {
  outline: 3px solid var(--azul-claro); outline-offset: 1px; border-color: var(--azul-claro);
}

button {
  margin-top: 16px; width: 100%; padding: 12px 16px; font-size: 15px; font-weight: 600;
  font-family: inherit;
  color: #fff; background: var(--azul); border: 0; border-radius: 10px; cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
button:hover { background: var(--azul-claro); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid var(--azul-claro); outline-offset: 2px; }

.error {
  margin: 0 0 18px; padding: 11px 14px; border-radius: 10px; font-size: 14px;
  background: rgba(164, 52, 58, .10); color: var(--alerta);
  border: 1px solid rgba(164, 52, 58, .28);
}

.nota { margin: 18px 0 0; font-size: 12.5px; color: var(--suave); line-height: 1.5; }
.volver { display: inline-block; margin-top: 18px; font-size: 13px; color: var(--azul-claro); }

@media (prefers-reduced-motion: reduce) { button { transition: none; } }