:root {
      --azul:      #1a3a6b;
      --azul-med:  #2563a8;
      --azul-light:#e8f0fa;
      --texto:     #1c1c1c;
      --texto-med: #444444;
      --texto-suf: #6b7280;
      --border:    #d1d5db;
      --bg:        #ffffff;
      --bg2:       #f4f6f9;
      --font-display: 'Bebas Neue', sans-serif;
      --font-body:    'Barlow', sans-serif;
      --radius: 6px;
      --transition: 0.3s ease;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body {
      height: 100%;
      font-family: var(--font-body);
      background: var(--bg2);
      color: var(--texto);
    }


    /* ===== LAYOUT ===== */
    .login-wrapper {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }

    /* Panel izquierdo — decorativo corporativo */
    .login-left {
      background: var(--azul);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 48px;
      position: relative;
      overflow: hidden;
    }
    .login-left::before {
      content: '';
      position: absolute;
      top: -80px; right: -80px;
      width: 360px; height: 360px;
      border-radius: 50%;
      border: 60px solid rgba(255,255,255,0.05);
    }
    .login-left::after {
      content: '';
      position: absolute;
      bottom: -60px; left: -60px;
      width: 280px; height: 280px;
      border-radius: 50%;
      border: 40px solid rgba(255,255,255,0.04);
    }
    .left-logo {
      position: relative;
      z-index: 1;
    }
    .left-logo .logo-main {
      font-family: var(--font-display);
      font-size: 2rem;
      letter-spacing: 0.18em;
      color: #ffffff;
      display: block;
    }
    .left-logo .logo-sub {
      font-size: 0.62rem;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: rgba(255,255,255,0.55);
      display: block;
      margin-top: 4px;
    }
    .left-content {
      position: relative;
      z-index: 1;
    }
    .left-content h2 {
      font-family: var(--font-display);
      font-size: 3rem;
      line-height: 1;
      letter-spacing: 0.04em;
      color: #ffffff;
      margin-bottom: 20px;
    }
    .left-content p {
      font-size: 0.95rem;
      color: rgba(255,255,255,0.65);
      line-height: 1.8;
      max-width: 340px;
    }
    .left-features {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .left-feature {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.88rem;
      color: rgba(255,255,255,0.7);
    }
    .left-feature-dot {
      width: 8px; height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.4);
      flex-shrink: 0;
    }

    /* Panel derecho — formulario */
    .login-right {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 48px 40px;
      background: var(--bg);
    }
    .login-card {
      width: 100%;
      max-width: 400px;
    }
    .login-card h1 {
      font-family: var(--font-display);
      font-size: 2rem;
      letter-spacing: 0.06em;
      color: var(--azul);
      margin-bottom: 6px;
    }
    .login-card .login-subtitle {
      font-size: 0.9rem;
      color: var(--texto-suf);
      margin-bottom: 36px;
    }

    /* Formulario */
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 20px;
    }
    .form-group label {
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--texto);
    }
    .input-wrap {
      position: relative;
    }
    .input-wrap svg {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px; height: 18px;
      color: var(--texto-suf);
      pointer-events: none;
    }
    .form-group input {
      width: 100%;
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      color: var(--texto);
      font-family: var(--font-body);
      font-size: 1rem;
      padding: 13px 16px 13px 44px;
      outline: none;
      transition: var(--transition);
    }
    .form-group input:focus {
      border-color: var(--azul-med);
      box-shadow: 0 0 0 3px rgba(37,99,168,0.12);
    }
    .form-group input::placeholder { color: #aaa; }

    /* Mostrar/ocultar contraseña */
    .toggle-pass {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      cursor: pointer;
      color: var(--texto-suf);
      padding: 0;
      display: flex;
      align-items: center;
    }
    .toggle-pass svg { width: 18px; height: 18px; }
    .toggle-pass:hover { color: var(--azul); }

    /* Botón submit */
    .btn-login {
      width: 100%;
      background: var(--azul);
      color: #fff;
      font-family: var(--font-display);
      font-size: 1.15rem;
      letter-spacing: 0.1em;
      padding: 15px;
      border: none;
      border-radius: var(--radius);
      cursor: pointer;
      transition: var(--transition);
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
    }
    .btn-login:hover { background: var(--azul-med); }
    .btn-login:disabled {
      background: var(--border);
      cursor: not-allowed;
    }
    .btn-login svg { width: 18px; height: 18px; }

    /* Mensajes de error / aviso */
    .login-msg {
      display: none;
      padding: 13px 16px;
      border-radius: var(--radius);
      font-size: 0.9rem;
      margin-bottom: 20px;
      border-left: 4px solid;
    }
    .login-msg.error {
      display: block;
      background: #fef2f2;
      border-color: #ef4444;
      color: #7f1d1d;
    }
    .login-msg.warning {
      display: block;
      background: #fffbeb;
      border-color: #f59e0b;
      color: #78350f;
    }
    .login-msg.success {
      display: block;
      background: #f0fdf4;
      border-color: #22c55e;
      color: #14532d;
    }

    /* Intentos restantes */
    .intentos-info {
      font-size: 0.8rem;
      color: var(--texto-suf);
      text-align: center;
      margin-top: 16px;
    }
    .intentos-info span {
      color: #ef4444;
      font-weight: 600;
    }

    /* Volver a la web */
    .back-link {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.82rem;
      color: var(--texto-suf);
      text-decoration: none;
      margin-top: 32px;
      transition: var(--transition);
    }
    .back-link:hover { color: var(--azul); }
    .back-link svg { width: 14px; height: 14px; }

    /* Spinner de carga */
    @keyframes spin { to { transform: rotate(360deg); } }
    .spinner {
      width: 18px; height: 18px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
    }
/*nav */
.nav-logo-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.left-logo a {
  text-decoration: none;
}
    /* RESPONSIVE */
    @media (max-width: 768px) {
      .login-wrapper { grid-template-columns: 1fr; }
      .login-left { display: none; }
      .login-right { padding: 40px 24px; background: var(--bg2); }
      .login-card {
        background: var(--bg);
        padding: 32px 24px;
        border-radius: 12px;
        border: 1px solid var(--border);
        box-shadow: 0 4px 24px rgba(0,0,0,0.06);
      }
    }