/* Vertex Login */

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --navy:   #1A1F2E;
      --accent: #1D9E75;
      --ice2:   #F0F2F5;
      --line:   #E0E4EA;
      --silver: #8090A8;
      --muted:  #4A5568;
      --white:  #FFFFFF;
      --danger: #E24B4A;
    }
    body {
      font-family: 'DM Sans', sans-serif;
      background: var(--ice2);
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }

    .card {
      background: var(--white);
      border: 1px solid var(--line);
      border-radius: 12px;
      width: 100%;
      max-width: 400px;
      padding: 40px 36px;
      animation: fadeUp 0.3s ease;
    }

    .brand {
      text-align: center;
      margin-bottom: 32px;
    }

    .brand-name {
      font-family: 'Cormorant Garamond', serif;
      font-size: 36px;
      font-weight: 600;
      color: var(--navy);
      letter-spacing: 0.14em;
    }

    .brand-sub {
      font-size: 11px;
      color: var(--silver);
      letter-spacing: 0.08em;
      margin-top: 4px;
    }

    .divider {
      border: none;
      border-top: 1px solid var(--line);
      margin: 0 0 28px;
    }

    .form-group {
      margin-bottom: 16px;
    }

    label {
      display: block;
      font-size: 11px;
      font-weight: 500;
      color: var(--muted);
      letter-spacing: 0.06em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }

    input {
      width: 100%;
      height: 42px;
      border: 1px solid var(--line);
      border-radius: 6px;
      padding: 0 14px;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      color: var(--navy);
      background: var(--white);
      outline: none;
      transition: border-color 0.15s;
    }

    input:focus { border-color: var(--accent); }

    .btn-login {
      width: 100%;
      height: 44px;
      background: var(--navy);
      color: var(--white);
      border: none;
      border-radius: 6px;
      font-family: 'DM Sans', sans-serif;
      font-size: 14px;
      font-weight: 500;
      cursor: pointer;
      margin-top: 24px;
      letter-spacing: 0.04em;
      transition: background 0.15s;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn-login:hover { background: #2C3550; }
    .btn-login:disabled { background: var(--line); color: var(--silver); cursor: default; }

    .error-msg {
      display: none;
      background: #FEE2E2;
      color: var(--danger);
      border-radius: 6px;
      padding: 10px 14px;
      font-size: 13px;
      margin-top: 16px;
      text-align: center;
    }

    .spinner {
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255,255,255,0.3);
      border-top-color: white;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
    }

    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    .footer-txt {
      text-align: center;
      font-size: 11px;
      color: var(--silver);
      margin-top: 24px;
    }
  
/* MODO OSCURO */
body.dark {
  --ice:#0F1117;--line:#2A2F3E;--white:#1A1F2E;--text:#E8ECF0;
  --muted:#9AABBD;--silver:#5A6A7E;--ice2:#141820;
  background:#0F1117;color:#E8ECF0;
}
body.dark .topbar{background:#141820;border-color:#2A2F3E}
body.dark .panel,.dark .page-table,.dark .page-filters,.dark .stat,.dark .modal{background:#1A1F2E;border-color:#2A2F3E}
body.dark input,body.dark select,body.dark textarea{background:#141820;border-color:#2A2F3E;color:#E8ECF0}
body.dark .t-row:nth-child(even){background:#141820}
body.dark .t-row{border-color:#2A2F3E}
body.dark .t-cols{border-color:#2A2F3E}
body.dark .nav-item:hover{background:rgba(255,255,255,.06)}
body.dark .profile-menu,.dark .profile-menu-header{background:#1A1F2E;border-color:#2A2F3E}
body.dark .modal-head{background:#1A1F2E;border-color:#2A2F3E}
body.dark .modal-body{background:#1A1F2E}
body.dark .btn-outline{background:#1A1F2E;border-color:#2A2F3E;color:#9AABBD}
body.dark .fab-icon{background:#1A1F2E;border-color:#2A2F3E;color:#E8ECF0}

html,body { overscroll-behavior: none; }