/* ============================================================
   pages/login.css — Inicio de sesión (Google + contraseña)
   Estilos propios de esta página. Extraído del <style> inline.
   Carga después de: vendor/theme.css, kapp.css, demo-modern.css, panel_extras.css
   ============================================================ */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: 'Geist', -apple-system, sans-serif;
      min-height: 100dvh;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #009efb 0%, #0077c2 60%, #005fa3 100%);
    }

    /* Card */
    .card {
      background: #fff;
      border-radius: 20px;
      box-shadow:
        0 20px 60px rgba(0,0,0,0.15),
        0 4px 16px rgba(0,0,0,0.08);
      width: 100%; max-width: 380px;
      margin: 20px;
      padding: 40px 36px 36px;
      animation: cardIn 0.5s cubic-bezier(0.32,0.72,0,1) both;
    }

    @keyframes cardIn {
      from { opacity: 0; transform: translateY(20px) scale(0.97); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Logo */
    .logo-wrap {
      text-align: center;
      margin-bottom: 18px;
    }

    .logo-wrap img {
      width: 72px;
      height: auto;
    }

    /* Title */
    .card-title {
      text-align: center;
      font-size: 17px;
      font-weight: 600;
      color: #009efb;
      margin-bottom: 28px;
      line-height: 1.3;
    }

    /* Fields */
    .field-wrap { margin-bottom: 16px; }

    .field-row {
      display: flex; align-items: center;
      border: 1.5px solid #e0e7ef;
      border-radius: 10px;
      overflow: hidden;
      transition: border-color 0.2s, box-shadow 0.2s;
      background: #f7fafd;
    }

    .field-row:focus-within {
      border-color: #009efb;
      box-shadow: 0 0 0 3px rgba(0,158,251,0.1);
      background: #fff;
    }

    .field-icon {
      padding: 0 12px;
      color: #bcc8d8;
      display: flex; align-items: center;
      flex-shrink: 0;
    }

    .field-icon svg { width: 17px; height: 17px; }

    .field-input {
      flex: 1;
      padding: 13px 14px 13px 0;
      font-family: inherit; font-size: 14px;
      color: #1a2540;
      border: none; background: transparent; outline: none;
    }

    .field-input::placeholder { color: #bcc8d8; }

    /* Show password toggle */
    .pwd-toggle {
      padding: 0 12px;
      background: none; border: none; cursor: pointer;
      color: #bcc8d8;
      display: flex; align-items: center;
      transition: color 0.2s;
    }
    .pwd-toggle:hover { color: #009efb; }
    .pwd-toggle svg { width: 17px; height: 17px; }

    /* Error */
    .error-msg {
      display: none; align-items: center; gap: 7px;
      font-size: 12px; color: #d32f2f;
      background: rgba(211,47,47,0.07);
      border: 1px solid rgba(211,47,47,0.18);
      border-radius: 8px;
      padding: 9px 12px;
      margin-bottom: 16px;
      font-weight: 500;
    }
    .error-msg.show { display: flex; }

    /* Button */
    .btn-login {
      width: 100%;
      padding: 14px;
      background: #009efb;
      color: #fff;
      border: none; border-radius: 10px; cursor: pointer;
      font-family: inherit; font-size: 14px; font-weight: 600;
      letter-spacing: 0.08em; text-transform: uppercase;
      transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      box-shadow: 0 4px 14px rgba(0,158,251,0.35);
      margin-top: 6px;
    }

    .btn-login:hover {
      background: #0088e0;
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0,158,251,0.45);
    }

    .btn-login:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0,158,251,0.3);
    }

    .btn-login:disabled { opacity: 0.65; cursor: not-allowed; transform: none; }

    /* Spinner inside button */
    .btn-login.loading::after {
      content: '';
      display: inline-block;
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,0.4);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      vertical-align: middle;
      margin-left: 8px;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* Divider "o" + Google */
    .or-divider { margin-top: 18px; }
    .or-line {
      display: flex; align-items: center;
      color: #bcc8d8; font-size: 12px;
      margin-bottom: 14px;
    }
    .or-line::before, .or-line::after {
      content: ''; flex: 1; height: 1px; background: #e0e7ef;
    }
    .or-line span { padding: 0 12px; }

    /* Footer */
    .footer {
      text-align: center;
      margin-top: 22px;
      font-size: 10px;
      color: #c0c8d4;
      letter-spacing: 0.05em;
    }