/*
 * Executive Center
 *
 * Archivo  : assets/css/login.css
 * Propósito: Estilos de la pantalla de login ejecutivo.
 *            Tema claro. Paleta institucional OTIC.
 * Sprint   : 4 — Autenticación administrativa.
 */

/* ══════════════════════════════════════════════════════════════════════════
   TOKENS DE DISEÑO
══════════════════════════════════════════════════════════════════════════ */
:root {
  --lg-bg:            #F8FAFC;
  --lg-card:          #FFFFFF;
  --lg-border:        #E2E8F0;
  --lg-border-focus:  #2563EB;
  --lg-text:          #0F172A;
  --lg-text-muted:    #64748B;
  --lg-text-faint:    #94A3B8;

  --lg-blue:          #2563EB;
  --lg-blue-hover:    #1D4ED8;
  --lg-blue-light:    #EFF6FF;
  --lg-sky:           #0EA5E9;
  --lg-orange:        #EA580C;
  --lg-orange-light:  #FFF7ED;

  --lg-error-bg:      #FEF2F2;
  --lg-error-border:  #FECACA;
  --lg-error-text:    #991B1B;

  --lg-radius:        14px;
  --lg-radius-sm:     8px;
  --lg-radius-xs:     6px;

  --lg-shadow:        0 4px 24px rgba(15, 23, 42, 0.10), 0 1px 4px rgba(15, 23, 42, 0.06);
  --lg-shadow-btn:    0 2px 8px rgba(37, 99, 235, 0.30);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESET Y BASE
══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin:     0;
  padding:    0;
}

html, body {
  height: 100%;
}

body {
  font-family:      'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background-color: var(--lg-bg);
  color:            var(--lg-text);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display:    flex;
  flex-direction: column;
}

/* ══════════════════════════════════════════════════════════════════════════
   LAYOUT PRINCIPAL
══════════════════════════════════════════════════════════════════════════ */
.lg-page {
  flex:            1;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         24px 16px;
  min-height:      100vh;
}

/* Elemento decorativo de fondo */
.lg-page::before {
  content:  '';
  position: fixed;
  top:      -120px;
  right:    -120px;
  width:    480px;
  height:   480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   TARJETA DE LOGIN
══════════════════════════════════════════════════════════════════════════ */
.lg-card {
  position:      relative;
  z-index:       1;
  width:         100%;
  max-width:     420px;
  background:    var(--lg-card);
  border:        1px solid var(--lg-border);
  border-radius: var(--lg-radius);
  box-shadow:    var(--lg-shadow);
  overflow:      hidden;
}

/* Barra de acento superior */
.lg-card-accent {
  height:     4px;
  background: linear-gradient(90deg, var(--lg-blue) 0%, var(--lg-sky) 60%, var(--lg-orange) 100%);
}

/* ══════════════════════════════════════════════════════════════════════════
   ENCABEZADO DE LA TARJETA
══════════════════════════════════════════════════════════════════════════ */
.lg-header {
  padding:    32px 36px 24px;
  text-align: center;
}

/* Logo / Ícono */
.lg-logo {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  background:      var(--lg-blue-light);
  border-radius:   var(--lg-radius-sm);
  margin-bottom:   18px;
  color:           var(--lg-blue);
}

.lg-app-name {
  font-size:   1.25rem;
  font-weight: 700;
  color:       var(--lg-text);
  line-height: 1.2;
}

.lg-app-sub {
  font-size:   0.8125rem;
  color:       var(--lg-text-muted);
  margin-top:  4px;
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARIO
══════════════════════════════════════════════════════════════════════════ */
.lg-form {
  padding: 0 36px 32px;
}

/* ── Mensaje de error ── */
.lg-alert {
  display:       flex;
  align-items:   flex-start;
  gap:           10px;
  background:    var(--lg-error-bg);
  border:        1px solid var(--lg-error-border);
  border-radius: var(--lg-radius-xs);
  padding:       12px 14px;
  margin-bottom: 20px;
  font-size:     0.8375rem;
  color:         var(--lg-error-text);
  line-height:   1.45;
}

.lg-alert-icon {
  flex-shrink: 0;
  margin-top:  1px;
}

/* ── Grupos de campo ── */
.lg-field {
  margin-bottom: 18px;
}

.lg-label {
  display:       block;
  font-size:     0.8125rem;
  font-weight:   600;
  color:         var(--lg-text);
  margin-bottom: 6px;
}

.lg-input {
  width:         100%;
  padding:       10px 13px;
  font-size:     0.9rem;
  font-family:   inherit;
  color:         var(--lg-text);
  background:    #FFFFFF;
  border:        1.5px solid var(--lg-border);
  border-radius: var(--lg-radius-xs);
  outline:       none;
  transition:    border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.lg-input:focus {
  border-color: var(--lg-border-focus);
  box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12);
}

.lg-input::placeholder {
  color: var(--lg-text-faint);
}

/* ── Botón de envío ── */
.lg-btn {
  display:         block;
  width:           100%;
  padding:         12px 16px;
  margin-top:      8px;
  font-size:       0.9375rem;
  font-weight:     600;
  font-family:     inherit;
  color:           #FFFFFF;
  background:      var(--lg-blue);
  border:          none;
  border-radius:   var(--lg-radius-xs);
  cursor:          pointer;
  text-align:      center;
  box-shadow:      var(--lg-shadow-btn);
  transition:      background 0.15s, transform 0.1s, box-shadow 0.15s;
  -webkit-appearance: none;
  appearance: none;
}

.lg-btn:hover {
  background:  var(--lg-blue-hover);
  box-shadow:  0 4px 14px rgba(37, 99, 235, 0.38);
}

.lg-btn:active {
  transform:  translateY(1px);
  box-shadow: 0 1px 4px rgba(37, 99, 235, 0.25);
}

.lg-btn:focus-visible {
  outline:        3px solid var(--lg-blue);
  outline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PIE DE TARJETA
══════════════════════════════════════════════════════════════════════════ */
.lg-footer {
  padding:     16px 36px 20px;
  text-align:  center;
  border-top:  1px solid var(--lg-border);
  font-size:   0.75rem;
  color:       var(--lg-text-faint);
  line-height: 1.5;
}

/* Acento naranjo institucional en el pie */
.lg-footer-brand {
  color:       var(--lg-orange);
  font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .lg-header,
  .lg-form {
    padding-left:  24px;
    padding-right: 24px;
  }

  .lg-footer {
    padding-left:  24px;
    padding-right: 24px;
  }

  .lg-app-name {
    font-size: 1.125rem;
  }
}