/* ============================================================
       4. LAYOUT  login page
    ============================================================ */

    /* -- login-page -- */
    .login-page {
      display: grid;
      grid-template-columns: 1fr 1fr;
      min-height: 100vh;
      background: var(--color-bg);
    }

    /* ============================================================
       5. COMPONENTS
    ============================================================ */

    /* ---- login-panel (left col) ---- */
    .login-panel {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: var(--sp-xl) var(--sp-lg);
    }

    .login-panel__inner {
      background: var(--primary-50);
      border-radius: var(--radius-lg);
      padding: var(--sp-5xl) var(--sp-2xl);
      width: 100%;
      max-width: 560px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 0;
    }

    /* ---- brand ---- */
    .brand {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: var(--sp-xl);
    }

    .brand__logo {
      width: 60px;
      height: 60px;
      background: var(--neutral-900);
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: var(--sp-lg);
    }

    .brand__logo svg {
      color: #fff;
      width: 28px;
      height: 28px;
    }

    .brand__heading {
      font-size: var(--f-24);
      font-weight: 700;
      color: var(--neutral-900);
      letter-spacing: -0.03em;
      text-align: center;
      margin-bottom: var(--sp-sm);
    }

    .brand__subheading {
      font-size: var(--f-14);
      font-weight: 400;
      color: var(--neutral-500);
      text-align: center;
      line-height: 1.5;
    }

    /* ---- login-form ---- */
    .login-form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: var(--sp-2xl);
      max-width: 480px;
    }

    .login-form__group {
      display: flex;
      flex-direction: column;
      gap: var(--sp-xs);
    }

    .login-form__label {
      font-size: var(--f-14);
      font-weight: 600;
      color: var(--neutral-900);
      letter-spacing: 0.01em;
    }

    .login-form__input {
      width: 100%;
      background: var(--color-card-bg);
      border: 1px solid var(--primary-700);
      border-radius: var(--radius-sm);
      padding: var(--sp-md) var(--sp-md);
      font-size: var(--f-14);
      color: var(--neutral-900);
      outline: none;
      transition: border-color 0.18s, box-shadow 0.18s;
    }

    .login-form__input::placeholder {
      color: var(--neutral-300);
      font-weight: 400;
    }

    .login-form__input:focus {
      border-color: var(--color-accent);
      box-shadow: var(--shadow-input-focus);
    }

    /* .login-form__input:invalid:not(:placeholder-shown) {
      border-color: #E05252;
    } */

    .login-form__actions {
      margin-top: var(--sp-sm);
    }

    /* ---- btn ---- */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--sp-sm);
      border-radius: var(--radius-md);
      font-size: var(--f-16);
      font-weight: 600;
      cursor: pointer;
      transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
      border: none;
    }

    .btn--primary {
      background: var(--primary-900);
      color: var(--color-card-bg);
      padding: 14px var(--sp-lg);
      width: 100%;
      letter-spacing: 0.08em;
      box-shadow: 0 2px 12px rgba(82,183,136,0.28);
      transition: all 0.18s ease-in-out;
    }

    .btn--primary:hover {
      background: var(--primary-500);
      box-shadow: 0 4px 20px rgba(82,183,136,0.36);
      transform: translateY(-4px);
    }

    .btn--primary:active {
      transform: translateY(0);
    }

    .btn--primary:focus-visible {
      outline: 3px solid var(--color-accent);
      outline-offset: 2px;
    }

    /* ---- login-footer ---- */
    .login-footer {
      margin-top: var(--sp-2xl);
      width: 100%;
      text-align: center;
    }

    .login-footer__text {
      font-size: 12px;
      color: var(--color-text-link);
      font-weight: 500;
    }

    /* ---- visual-panel (right col) ---- */
    .visual-panel {
      background-image:linear-gradient(rgb(0 0 0 / 5%), rgb(0 0 0 / 48%)), url(/img/fondo.webp);
      background-size: cover;
      border-radius: var(--radius-lg);
      margin: var(--sp-lg);
      position: relative;
      overflow: hidden;
    }

    /* Subtle decorative texture using CSS gradients only */
    .visual-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 60% 50% at 30% 30%, rgba(255,255,255,0.18) 0%, transparent 70%),
        radial-gradient(ellipse 40% 60% at 80% 70%, rgba(82,183,136,0.12) 0%, transparent 70%);
      pointer-events: none;
    }

    .visual-panel__content {
      position: absolute;
      bottom: var(--sp-4xl);
      left: var(--sp-4xl);
      right: var(--sp-4xl);
    }

    .visual-panel__tagline {
      font-size: var(--f-32);
      font-weight: 700;
      color: rgba(255,255,255,0.85);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    .visual-panel__sub {
      font-size: var(--f-16);
      color: rgba(255,255,255,0.55);
      margin-top: var(--sp-sm);
      font-weight: 400;
    }

    /* ============================================================
       6. RESPONSIVE
    ============================================================ */

    /* Tablet: stack, hide visual panel */
    @media (max-width: 900px) {
      .login-page {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
      }

      .visual-panel {
        display: none;
      }

      .login-panel {
        padding: var(--sp-lg) var(--sp-md);
        align-items: center;
        padding-top: var(--sp-2xl);
      }

      .login-panel__inner {
        padding: var(--sp-xl) var(--sp-lg);
      }
    }

    /* Mobile */
    @media (max-width: 480px) {
      .login-panel {
        padding: var(--sp-md);
        align-items: center;
      }

      .login-panel__inner {
        padding: var(--sp-5xl) var(--sp-md);
        border-radius: var(--radius-md);
        height: 100vh;
      }

      .brand__heading { font-size: 22px; }

      .btn--primary { font-size: 14px; padding: 13px var(--sp-md); }
    }

    /* Reduce motion */
    @media (prefers-reduced-motion: reduce) {
      .btn--primary { transition: none; }
      .login-form__input { transition: none; }
    }