/* ==========================================================================
   CONFIGURACIÓN Y VARIABLES DE TEMA (PERSONALIZACIÓN ÁGIL)
   ========================================================================== */
:root {
  /* 1. PALETA DE COLORES */
  --color-primary: #1e3a8a;       /* Azul marino / Identidad principal */
  --color-primary-hover: #1d4ed8; /* Color de interacción al pasar el ratón */
  --color-accent: #d97706;        /* Dorado / Detalle de acento */
  --color-bg: #f8fafc;            /* Fondo de la pantalla */
  --color-card-bg: #ffffff;       /* Fondo de la tarjeta central */
  --color-text-main: #0f172a;     /* Texto principal */
  --color-text-muted: #64748b;    /* Texto secundario / etiquetas */
  --color-border: #e2e8f0;        /* Bordes de inputs y divisores */
  --color-error: #ef4444;         /* Mensajes de alerta o error */

  /* 2. TIPOGRAFÍA Y FUENTES */
  --font-family-title: 'Cinzel', serif; /* Fuente elegante/clásica para títulos */
  --font-family-body: 'Roboto', sans-serif; /* Fuente clara para textos e inputs */

  /* 3. ESPACIADOS Y TAMAÑOS (Ajustables globalmente) */
  --spacing-unit: 8px;            /* Unidad base para multiplicadores */
  --card-padding: calc(var(--spacing-unit) * 4); /* 32px de relleno */
  --input-padding: calc(var(--spacing-unit) * 1.5); /* 12px de relleno interno */
  --border-radius: 12px;          /* Curvatura de bordes */
  --logo-max-width: 100px;        /* Tamaño máximo del logotipo */
}

/* ==========================================================================
   ESTILOS GENERALES Y MAQUETACIÓN
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-body);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Tarjeta de Formulario */
.login-card {
  background-color: var(--color-card-bg);
  padding: var(--card-padding);
  border-radius: var(--border-radius);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  border-top: 4px solid var(--color-accent);
}

.header {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.logo {
  max-width: var(--logo-max-width);
  height: auto;
  margin-bottom: var(--spacing-unit);
}

.logo-text {
  font-size: 3rem;
  margin-bottom: var(--spacing-unit);
}

.title {
  font-family: var(--font-family-title);
  color: var(--color-primary);
  font-size: 1.5rem;
  font-weight: 700;
}

.subtitle {
  color: var(--color-text-muted);
  font-size: 0.875rem;
  margin-top: calc(var(--spacing-unit) * 0.5);
}

/* Formulario */
.form-group {
  margin-bottom: calc(var(--spacing-unit) * 2.5);
}

label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-muted);
  margin-bottom: calc(var(--spacing-unit) * 0.75);
}

input[type="email"],
input[type="password"] {
  width: 100%;
  padding: var(--input-padding);
  border: 1px solid var(--color-border);
  border-radius: calc(var(--border-radius) / 2);
  font-family: var(--font-family-body);
  font-size: 0.95rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.15);
}

/* Botón Principal */
.btn-primary {
  width: 100%;
  padding: var(--input-padding);
  background-color: var(--color-primary);
  color: #ffffff;
  border: none;
  border-radius: calc(var(--border-radius) / 2);
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: var(--color-primary-hover);
}

/* Mensaje de Error */
.alert {
  padding: var(--input-padding);
  border-radius: calc(var(--border-radius) / 2);
  font-size: 0.875rem;
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-error);
  border: 1px solid var(--color-error);
}