:root{
      /* Colores base (ajústalos a tu paleta) */
      --uasd-blue-900:#0e3f7c;
      --uasd-blue-800:#0d57a1;
      --uasd-blue-700:#1368b3;
      --uasd-blue-600:#1f7cc9;
      --uasd-blue-500:#2a8dd9;
      --uasd-gray-100:#f6f8fb;

      /* Banner detrás (reemplaza por tu URL) */
      --banner-url: url('./fondo_autoservicio.jpg');
    }

    /* Fondo general con banner atrás */
    body{
      min-height:100vh;
      background-image:
        linear-gradient(0deg, rgba(0,0,0,.20), rgba(0,0,0,.20)), /* oscurece un poco */
        var(--banner-url);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      color:#1b2a41;
    }

    /* Contenedor principal al centro */
    .portal-wrap{
      display:flex; 
      align-items:center; 
      justify-content:center; 
      min-height:100vh;
      padding: 24px;
      position:relative;
      isolation:isolate;
    }

    /* Tarjeta grande con dos columnas */
    .portal-card{
      border:0;
      border-radius: 20px;
      overflow:hidden;
      background: rgba(255,255,255,.88);
      backdrop-filter: blur(6px);
      box-shadow: 0 15px 55px rgba(5,35,75,.25);
      position:relative;
    }

    /* Lado izquierdo (panel azul con ondas/líneas) */
    .left-pane{
      background:
        radial-gradient(140% 100% at 0% 100%, rgba(255,255,255,.14) 0 55%, transparent 56%),
        radial-gradient(120% 120% at 100% 0%, rgba(255,255,255,.10) 0 55%, transparent 56%),
        linear-gradient(165deg, var(--uasd-blue-700) 0%, var(--uasd-blue-900) 100%);
      position:relative;
      color:#fff;
      min-height: 260px;
    }

    /* “Líneas” finas suaves superpuestas (simulan las curvas del diseño) */
    .left-pane::after{
      content:"";
      position:absolute; inset:-30% -10% -30% -10%;
      background:
        repeating-radial-gradient(circle at 120% 10%,
          rgba(255,255,255,.3) 85 6px,
          rgba(255,255,255,0) 6px 18px),
        radial-gradient(100% 140% at -10% 110%, rgba(255,255,255,.10), transparent 60%);
      mix-blend-mode: screen;
      pointer-events:none;
    }

    /* Lado derecho (contenido 404) */
    .right-pane{
      position:relative;
    }

    /* Sutiles líneas concéntricas en el lado derecho (como el ejemplo) */
    .right-pane::before{
      content:"";
      position:absolute; inset:-40px -40px -40px -40px;
      background:
        repeating-radial-gradient(circle at 85% 50%,
          rgba(15,70,150,.16) 85 8px,
          rgba(15,70,150,0) 8px 20px);
      opacity:.45;
      pointer-events:none;
    }

    .brand-mini{
      display:flex; align-items:center; gap:10px;
      font-weight:600; letter-spacing:.2px;
    }

    .brand-mini .mark{
      width:44px; height:44px; border-radius:50%;
      background: #fff;
      display:grid; place-items:center;
      color: var(--uasd-blue-800);
      box-shadow: 0 6px 18px rgba(0,0,0,.12);
      font-weight:800;
    }

    .badge-ghost{
      background: rgba(255,255,255,.18);
      color:#fff; border:1px solid rgba(255,255,255,.28);
    }

    .btn-round{ border-radius:14px; }
    .form-control{
      background:#fff; border-radius:12px; border-color:#e7ecf5;
    }
    .form-control:focus{ border-color: var(--uasd-blue-600); box-shadow:0 0 0 .25rem rgba(31,124,201,.15) }

    .big-404{
      font-size: clamp(64px, 10vw, 120px);
      line-height: .9;
      font-weight: 800;
      background: linear-gradient(180deg, var(--uasd-blue-700), var(--uasd-blue-500));
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow: 0 6px 20px rgba(15,70,150,.25);
      letter-spacing: -2px;
    }

    .helper-links a{
      text-decoration: none;
    }

    /* Logo superior (opcional) */
    .site-header{
      position:absolute; top:18px; left:24px; right:24px;
      display:flex; align-items:center; justify-content:space-between;
      z-index:2;
    }
    .site-logo{
      display:flex; align-items:center; gap:12px;
      color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35);
      font-weight:700;
    }
    .site-logo img{height:42px; width:auto;}

    @media (max-width: 991.98px){
      .site-header{ position: static; margin-bottom: 16px; }
      .portal-card{ border-radius: 16px; }
    }