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

      :root {
        /* Alias de la paleta de la landing (paleta_app.css): el login no define sus
           propios colores, los hereda. Se declaran una sola vez y su var() se resuelve en
           `html`, asi que en oscuro toman el valor oscuro del token al que apuntan. */
        --metro-violet: var(--accent);
        --metro-purple: var(--accent);
        --metro-indigo: var(--accent-2);
        --metro-accent: var(--accent-2);
        --metro-dark: var(--tile-a);
        --metro-surface: var(--card);
        --metro-bg: var(--bg);
        --metro-text: var(--text);
        --metro-text-muted: var(--muted);
        --metro-border: var(--border);
        --metro-success: #10b981;
        --metro-error: #ef4444;
        --metro-radius: 2px;
        --metro-font: "Raleway", sans-serif;

        /* ===== PRIVATE COLOR TOKENS =====
           One token per color literal of this sheet, declared before its first use.
           #fff is NOT --metro-surface: that token moves in the dark block. */
        --logcn-c1: repeating-linear-gradient( 0deg, transparent, transparent 60px, rgba(255, 255, 255, 0.03) 60px, rgba(255, 255, 255, 0.03) 61px ), repeating-linear-gradient( 90deg, transparent, transparent 60px, rgba(255, 255, 255, 0.03) 60px, rgba(255, 255, 255, 0.03) 61px );
        --logcn-c2: var(--on-grad);
        --logcn-c3: rgba(255, 255, 255, 0.8);
        --logcn-c4: rgba(255, 255, 255, 0.12);
        --logcn-c5: rgba(255, 255, 255, 0.15);
        --logcn-c6: rgba(255, 255, 255, 0.18);
        --logcn-c7: var(--on-grad);
        --logcn-c8: rgba(255, 255, 255, 0.7);
        --logcn-c9: rgba(255, 255, 255, 0.4);
        --logcn-c10: 0 1px 3px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.06);
        --logcn-c11: var(--on-grad);
        --logcn-c12: #f0fdf4;
        --logcn-c13: #bbf7d0;
        --logcn-c14: #166534;
        --logcn-c15: var(--on-grad);
        --logcn-c16: var(--muted);
        --logcn-c17: rgba(124, 58, 237, 0.06);
        --logcn-c18: var(--on-grad);
        --logcn-c19: #fef2f2;
        --logcn-c20: #fecaca;
        --logcn-c21: var(--on-grad);
        --logcn-c22: rgba(124, 58, 237, 0.35);
        --logcn-c23: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.2), transparent );
        --logcn-c24: rgba(255, 255, 255, 0.3);
        --logcn-c25: var(--on-grad);
        --logcn-c26: rgba(0, 0, 0, 0.1);
        --logcn-c27: var(--on-grad);
        --logcn-c28: #3c4043;
        --logcn-c29: var(--card);
        --logcn-c30: var(--border);
        --logcn-c31: #00a4ef;
        --logcn-c32: var(--on-grad);
        --logcn-c33: #00a4ef;
        --logcn-c34: #0090d5;
        --logcn-c35: #0090d5;
        --logcn-c36: #24292e;
        --logcn-c37: var(--on-grad);
        --logcn-c38: #24292e;
        --logcn-c39: #1b1f23;
        --logcn-c40: #1b1f23;
        --logcn-c41: rgba(124, 58, 237, 0.04);
        --logcn-c42: var(--on-grad);
        --logcn-c43: rgba(0, 0, 0, 0.2);
        --logcn-c44: rgba(0, 0, 0, 0.06);
        --logcn-c45: rgba(124, 58, 237, 0.15);
        --logcn-c46: rgba(0, 0, 0, 0.6);
        --logcn-c47: rgba(0, 0, 0, 0.2);
        --logcn-c48: #f0fdf4;
        --logcn-c49: #bbf7d0;
        --logcn-c50: #166534;
      }

      /* El bloque dark propio del login se fue: los `--metro-*` son alias de la paleta y su
         var() ya toma el valor oscuro solo. Los `--logcn-*` que son blancos sobre el degradado
         tampoco cambian de modo: el degradado de marca es `--grad`, que ya trae su version
         oscura. */

      html,
      body {
        height: 100%;
        font-family: var(--metro-font);
        background: var(--metro-bg);
        color: var(--metro-text);
        overflow: hidden;
      }

      /* ===== LAYOUT ===== */
      .login-layout {
        display: flex;
        height: 100vh;
        width: 100vw;
      }

      /* ===== BRAND PANEL (LEFT) ===== */
      .brand-panel {
        flex: 0 0 420px;
        background: var(--hero-bg);
        border-right: 1px solid var(--border);
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 48px 40px;
        position: relative;
        overflow: hidden;
      }

      .brand-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        /* Same technical grid as the landing hero. */
        background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
          linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
        background-size: 44px 44px;
        pointer-events: none;
      }

      .brand-title {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--text);
        letter-spacing: -0.02em;
        line-height: 1.1;
        margin-bottom: 8px;
      }

      .brand-subtitle {
        font-size: 1rem;
        font-weight: 300;
        color: var(--muted);
        margin-bottom: 40px;
      }

      /* Metro KPI Tiles */
      .metro-tiles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        margin-bottom: auto;
      }

      .metro-tile {
        background: var(--card);
        border: 1px solid var(--border);
        padding: 20px 16px;
        border-radius: var(--metro-radius);
        transition: background 0.2s;
      }

      .metro-tile:hover {
        background: var(--surface);
      }

      .metro-tile-value {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--accent);
        line-height: 1;
      }

      .metro-tile-label {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        margin-top: 6px;
      }

      .brand-version {
        font-size: 0.75rem;
        color: var(--muted);
        font-weight: 400;
        margin-top: 32px;
      }

      /* ===== MAIN AREA (RIGHT) ===== */
      .main-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 32px;
        position: relative;
        overflow: hidden;
      }

      /* ===== FLOATING TILES (BACKGROUND) ===== */
      .floating-tiles {
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        z-index: 0;
      }

      .floating-tile {
        position: absolute;
        border-radius: var(--metro-radius);
        opacity: var(--tile-opacity);
        animation: floatTile linear infinite;
      }

      /* Los cuatro tonos del cubo de la landing, por clase: el color no puede ir en `style` porque
         entonces los dos temas pintan lo mismo. La opacidad sale de `--tile-opacity`, que tambien
         cambia con el tema. */
      .floating-tile.tile--a {
        background: var(--tile-a);
      }

      .floating-tile.tile--b {
        background: var(--tile-b);
      }

      .floating-tile.tile--c {
        background: var(--tile-c);
      }

      .floating-tile.tile--d {
        background: transparent;
        border: 2px solid var(--tile-d);
        opacity: calc(var(--tile-opacity) * 2);
      }

      @keyframes floatTile {
        0% {
          transform: translateY(100vh) rotate(0deg);
        }

        100% {
          transform: translateY(-120px) rotate(360deg);
        }
      }

      /* ===== LOGIN CARD ===== */
      .login-card {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 420px;
        background: var(--metro-surface);
        border-radius: var(--metro-radius);
        box-shadow: var(--logcn-c10);
        overflow: hidden;
      }

      .login-card-accent {
        height: 4px;
        background: linear-gradient(
          90deg,
          var(--metro-violet),
          var(--metro-accent)
        );
      }

      .login-card-body {
        padding: 40px 36px 32px;
      }

      .login-icon {
        width: 52px;
        height: 52px;
        background: linear-gradient(
          135deg,
          var(--metro-violet),
          var(--metro-indigo)
        );
        border-radius: var(--metro-radius);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
      }

      .login-icon svg {
        width: 26px;
        height: 26px;
        color: var(--logcn-c11);
      }

      .login-heading {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--metro-text);
        margin-bottom: 4px;
      }

      .login-subheading {
        font-size: 0.85rem;
        font-weight: 400;
        color: var(--metro-text-muted);
        margin-bottom: 28px;
      }

      /* ===== STATUS BAR ===== */
      .status-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        background: var(--logcn-c12);
        border: 1px solid var(--logcn-c13);
        border-radius: var(--metro-radius);
        margin-bottom: 24px;
        font-size: 0.75rem;
        font-weight: 500;
        color: var(--logcn-c14);
      }

      .status-dot {
        width: 8px;
        height: 8px;
        background: var(--metro-success);
        border-radius: 50%;
        animation: pulse 2s ease-in-out infinite;
      }

      @keyframes pulse {
        0%,
        100% {
          opacity: 1;
          transform: scale(1);
        }

        50% {
          opacity: 0.5;
          transform: scale(1.3);
        }
      }

      /* ===== FORM ===== */
      .form-group {
        margin-bottom: 18px;
      }

      .form-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--metro-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        margin-bottom: 6px;
      }

      .input-wrapper {
        position: relative;
        display: flex;
        align-items: center;
      }

      .input-icon {
        position: absolute;
        left: 12px;
        width: 18px;
        height: 18px;
        color: var(--metro-text-muted);
        pointer-events: none;
      }

      .form-input {
        width: 100%;
        padding: 12px 12px 12px 40px;
        font-family: var(--metro-font);
        font-size: 0.9rem;
        font-weight: 400;
        color: var(--metro-text);
        background: var(--metro-bg);
        border: 1px solid var(--metro-border);
        border-radius: var(--metro-radius);
        outline: none;
        transition:
          border-color 0.15s,
          background 0.15s;
      }

      .form-input:focus {
        border-color: var(--metro-violet);
        background: var(--logcn-c15);
      }

      .form-input::placeholder {
        color: var(--logcn-c16);
      }

      .form-input.has-suffix {
        padding-right: 44px;
      }

      .input-suffix {
        position: absolute;
        right: 4px;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        border-radius: var(--metro-radius);
        cursor: pointer;
        color: var(--metro-text-muted);
        transition:
          color 0.15s,
          background 0.15s;
      }

      .input-suffix:hover {
        color: var(--metro-violet);
        background: var(--logcn-c17);
      }

      .input-suffix svg {
        width: 18px;
        height: 18px;
      }

      /* ===== REMEMBER ME ===== */
      .form-options {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
      }

      .checkbox-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--metro-text-muted);
        cursor: pointer;
        user-select: none;
      }

      .checkbox-label input[type="checkbox"] {
        appearance: none;
        width: 18px;
        height: 18px;
        border: 1.5px solid var(--metro-border);
        border-radius: var(--metro-radius);
        background: var(--metro-bg);
        cursor: pointer;
        position: relative;
        transition: all 0.15s;
      }

      .checkbox-label input[type="checkbox"]:checked {
        background: var(--metro-violet);
        border-color: var(--metro-violet);
      }

      .checkbox-label input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 5px;
        width: 5px;
        height: 10px;
        border: solid var(--logcn-c18);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
      }

      .forgot-link {
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--metro-violet);
        text-decoration: none;
        transition: color 0.15s;
      }

      .forgot-link:hover {
        color: var(--metro-indigo);
      }

      /* ===== ERROR MESSAGE ===== */
      .error-message {
        display: none;
        padding: 10px 14px;
        background: var(--logcn-c19);
        border: 1px solid var(--logcn-c20);
        border-radius: var(--metro-radius);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--metro-error);
        margin-bottom: 16px;
        text-align: center;
      }

      .error-message.visible {
        display: block;
      }

      /* ===== SUBMIT BUTTON ===== */
      .btn-submit {
        position: relative;
        width: 100%;
        padding: 14px 24px;
        font-family: var(--metro-font);
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--logcn-c21);
        background: linear-gradient(
          135deg,
          var(--metro-violet),
          var(--metro-indigo)
        );
        border: none;
        border-radius: var(--metro-radius);
        cursor: pointer;
        overflow: hidden;
        transition:
          transform 0.15s,
          box-shadow 0.15s;
      }

      .btn-submit:hover:not(:disabled) {
        transform: translateY(-1px);
        box-shadow: 0 4px 16px var(--logcn-c22);
      }

      .btn-submit:active:not(:disabled) {
        transform: translateY(0);
      }

      .btn-submit:disabled {
        opacity: 0.7;
        cursor: not-allowed;
      }

      /* Shimmer effect */
      .btn-submit::after {
        content: "";
        position: absolute;
        top: 0;
        left: -100%;
        width: 60%;
        height: 100%;
        background: var(--logcn-c23);
        animation: shimmer 3s ease-in-out infinite;
      }

      @keyframes shimmer {
        0% {
          left: -100%;
        }

        100% {
          left: 200%;
        }
      }

      .btn-submit .btn-text {
        position: relative;
        z-index: 1;
      }

      .btn-submit .btn-spinner {
        display: none;
        width: 20px;
        height: 20px;
        border: 2px solid var(--logcn-c24);
        border-top-color: var(--logcn-c25);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
        margin: 0 auto;
      }

      .btn-submit.loading .btn-text {
        display: none;
      }

      .btn-submit.loading .btn-spinner {
        display: block;
      }

      .btn-submit.loading::after {
        animation: none;
        display: none;
      }

      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      /* ===== SSO PROVIDER BUTTONS ===== */
      .sso-buttons {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .btn-sso {
        width: 100%;
        padding: 12px 16px;
        font-family: var(--metro-font);
        font-size: 0.85rem;
        font-weight: 600;
        border-radius: var(--metro-radius);
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        border: 1px solid var(--metro-border);
      }

      .btn-sso:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px var(--logcn-c26);
      }

      .btn-sso svg {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }

      /* Google */
      .btn-google {
        background: var(--logcn-c27);
        color: var(--logcn-c28);
      }

      .btn-google:hover {
        background: var(--logcn-c29);
        border-color: var(--logcn-c30);
      }

      /* Microsoft */
      .btn-microsoft {
        background: var(--logcn-c31);
        color: var(--logcn-c32);
        border-color: var(--logcn-c33);
      }

      .btn-microsoft:hover {
        background: var(--logcn-c34);
        border-color: var(--logcn-c35);
      }

      /* GitHub */
      .btn-github {
        background: var(--logcn-c36);
        color: var(--logcn-c37);
        border-color: var(--logcn-c38);
      }

      .btn-github:hover {
        background: var(--logcn-c39);
        border-color: var(--logcn-c40);
      }

      /* ===== DIVIDER ===== */
      .divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 20px 0;
      }

      .divider::before,
      .divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: var(--metro-border);
      }

      .divider span {
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--metro-text-muted);
        text-transform: uppercase;
        letter-spacing: 0.06em;
      }

      /* ===== SSO / LDAP BUTTONS ===== */
      .alt-buttons {
        display: flex;
        gap: 10px;
      }

      .btn-alt {
        flex: 1;
        padding: 10px 16px;
        font-family: var(--metro-font);
        font-size: 0.75rem;
        font-weight: 600;
        color: var(--metro-text-muted);
        background: var(--metro-bg);
        border: 1px solid var(--metro-border);
        border-radius: var(--metro-radius);
        cursor: pointer;
        transition: all 0.15s;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }

      .btn-alt:hover {
        border-color: var(--metro-violet);
        color: var(--metro-violet);
        background: var(--logcn-c41);
      }

      .btn-alt svg {
        width: 16px;
        height: 16px;
      }

      /* ===== FOOTER ===== */
      .login-footer {
        text-align: center;
        padding: 16px 36px 20px;
        font-size: 0.7rem;
        color: var(--metro-text-muted);
        border-top: 1px solid var(--metro-border);
      }

      /* ===== TOAST ===== */
      .toast-container {
        position: fixed;
        top: 24px;
        right: 24px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        gap: 8px;
      }

      .toast {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 20px;
        background: var(--metro-dark);
        color: var(--logcn-c42);
        border-radius: var(--metro-radius);
        font-size: 0.85rem;
        font-weight: 500;
        box-shadow: 0 8px 24px var(--logcn-c43);
        animation: toastIn 0.3s ease-out forwards;
        max-width: 360px;
      }

      .toast.toast-out {
        animation: toastOut 0.3s ease-in forwards;
      }

      .toast-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
      }

      .toast-success .toast-icon {
        color: var(--metro-success);
      }

      .toast-error .toast-icon {
        color: var(--metro-error);
      }

      @keyframes toastIn {
        from {
          opacity: 0;
          transform: translateX(40px);
        }

        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes toastOut {
        from {
          opacity: 1;
          transform: translateX(0);
        }

        to {
          opacity: 0;
          transform: translateX(40px);
        }
      }

      /* ===== SHAKE ===== */
      @keyframes shake {
        0%,
        100% {
          transform: translateX(0);
        }

        20%,
        60% {
          transform: translateX(-6px);
        }

        40%,
        80% {
          transform: translateX(6px);
        }
      }

      .shake {
        animation: shake 0.4s ease-in-out;
      }

      /* ===== HOME LINK ===== */
      .home-link {
        position: absolute;
        top: 20px;
        left: 20px;
        z-index: 10;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 8px 16px;
        font-family: var(--metro-font);
        font-size: 0.8rem;
        font-weight: 600;
        color: var(--metro-text-muted);
        background: var(--metro-surface);
        border: 1px solid var(--metro-border);
        border-radius: var(--metro-radius);
        text-decoration: none;
        transition: all 0.15s;
        box-shadow: 0 1px 3px var(--logcn-c44);
      }

      .home-link:hover {
        color: var(--metro-violet);
        border-color: var(--metro-violet);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px var(--logcn-c45);
      }

      .home-link svg {
        width: 16px;
        height: 16px;
      }

      /* ===== CHANGE PASSWORD MODAL ===== */
      .cp-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: var(--logcn-c46);
        z-index: 10000;
        align-items: center;
        justify-content: center;
      }
      .cp-overlay.visible {
        display: flex;
      }
      .cp-modal {
        background: var(--metro-surface);
        border-radius: var(--metro-radius);
        box-shadow: 0 8px 40px var(--logcn-c47);
        width: 100%;
        max-width: 420px;
        overflow: hidden;
        animation: cpSlideIn 0.25s ease-out;
      }
      @keyframes cpSlideIn {
        from {
          opacity: 0;
          transform: translateY(-20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      .cp-modal-accent {
        height: 4px;
        background: linear-gradient(
          90deg,
          var(--metro-violet),
          var(--metro-accent)
        );
      }
      .cp-modal-body {
        padding: 32px 28px 24px;
      }
      .cp-modal-heading {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--metro-text);
        margin-bottom: 4px;
      }
      .cp-modal-sub {
        font-size: 0.8rem;
        color: var(--metro-text-muted);
        margin-bottom: 20px;
      }
      .cp-modal .error-message {
        margin-bottom: 12px;
      }
      .cp-modal .success-message {
        display: none;
        padding: 10px 14px;
        background: var(--logcn-c48);
        border: 1px solid var(--logcn-c49);
        border-radius: var(--metro-radius);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--logcn-c50);
        margin-bottom: 12px;
        text-align: center;
      }
      .cp-modal .success-message.visible {
        display: block;
      }

      /* ===== RESPONSIVE ===== */
      @media (max-width: 768px) {
        .brand-panel {
          display: none;
        }

        .main-area {
          padding: 24px 16px;
        }

        .login-card-body {
          padding: 32px 24px 24px;
        }

        .login-footer {
          padding: 16px 24px 20px;
        }

        .cp-modal {
          margin: 16px;
        }

        .cp-modal-body {
          padding: 24px 20px 20px;
        }
      }