:root{
      --primary:#c23b1a;
      --primary-dark:#151616;
      --text:#0f172a;
      --muted:#64748b;
      --line:#e5e7eb;
      --soft:#f6f8fb;
      --radius:18px;
      --shadow:0 20px 60px rgba(15,23,42,.12);
    }

    *{box-sizing:border-box;margin:0;padding:0;}
    body{
      font-family:"Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--text);
      min-height:100vh;
      background:
        radial-gradient(1200px 500px at 85% -10%, #dff8f5 0%, transparent 55%),
        radial-gradient(900px 400px at -10% 0%, #fff3e8 0%, transparent 60%),
        var(--soft);
      display:grid;
      place-items:center;
      padding:28px;
    }

    .auth-wrap{
      width:min(980px, 98%);
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:16px;
      align-items:stretch;
    }

    /* panel info izquierda */
    .brand-panel{
      position:relative;
      border-radius:24px;
      padding:28px;
      overflow:hidden;
      background:
        linear-gradient(145deg, #0b1220 0%, #5e6464ff 55%, #aaafafff 100%);
      color:#fff;
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      min-height:420px;
    }
    .brand-panel::after{
      content:"";
      position:absolute; inset:-30% -20% auto auto;
      width:380px; height:380px; border-radius:50%;
      background:radial-gradient(circle, rgba(255,255,255,.22), transparent 60%);
      transform:translate(30px,-30px);
      pointer-events:none;
    }
    .brand-top{
      display:flex; align-items:center; gap:12px;
    }
    .brand-logo{
      width:56px; height:56px; border-radius:14px;
      background:rgba(255,255,255,.12);
      display:grid; place-items:center;
      overflow:hidden;
    }
    .brand-logo img{width:100%; height:100%; object-fit:contain;}
    .brand-top h2{
      font-size:20px; letter-spacing:.2px;
    }
    .brand-top p{
      font-size:13px; opacity:.9;
    }

    .brand-mid h1{
      font-size:clamp(22px,3vw,30px);
      margin:18px 0 8px;
      line-height:1.2;
    }
    .brand-mid p{
      font-size:15px; opacity:.95; max-width:420px;
    }
    .brand-list{
      margin-top:14px; display:grid; gap:8px; font-size:14px;
    }
    .brand-list span{
      display:flex; gap:8px; align-items:center;
    }
    .dot{
      width:8px; height:8px; border-radius:50%;
      background:#fff; opacity:.9;
    }

    /* tarjeta login derecha */
    .login-card{
      background:rgba(255,255,255,.9);
      border:1px solid var(--line);
      border-radius:24px;
      padding:22px;
      box-shadow:var(--shadow);
      backdrop-filter: blur(8px);
      min-height:420px;
      display:flex; flex-direction:column; justify-content:center;
    }

    .login-head{
      text-align:left; margin-bottom:10px;
    }
    .login-head h3{
      font-size:22px; margin-bottom:4px;
    }
    .login-head p{
      color:var(--muted); font-size:14.5px;
    }

    .error{
      background:#fee2e2;
      color:#991b1b;
      padding:10px 12px;
      border-radius:12px;
      font-size:14px;
      margin:10px 0 12px;
      border:1px solid #fecaca;
    }

    .field{
      display:grid; gap:6px; margin-bottom:12px;
    }
    .field label{
      font-weight:600; font-size:14px;
    }

    .input-wrap{
      position:relative;
    }
    .input-wrap input{
      width:100%;
      padding:12px 12px 12px 40px;
      border:1px solid var(--line);
      border-radius:12px;
      font-size:15px;
      outline:none;
      background:#fff;
      transition:.18s ease;
    }
    .input-wrap input:focus{
      border-color:#5f5c5f;
      box-shadow:0 0 0 4px rgba(13,148,136,.12);
    }
    .icon{
      position:absolute; left:12px; top:50%; transform:translateY(-50%);
      width:18px; height:18px; opacity:.6;
    }

    .actions{
      display:grid; gap:10px; margin-top:2px;
    }

    .btn-login{
      width:100%;
      padding:12px;
      border:none;
      border-radius:12px;
      background:var(--primary);
      color:#fff;
      font-weight:700;
      font-size:15px;
      cursor:pointer;
      transition:.18s ease;
      box-shadow:0 10px 24px rgba(11,183,167,.25);
    }
    .btn-login:hover{
      background:var(--primary-dark);
      transform:translateY(-1px);
    }

    .links{
      display:flex; justify-content:space-between; align-items:center;
      font-size:14px; margin-top:4px;
    }
    .links a{
      color:#0a0a0a; font-weight:600; text-decoration:none;
    }
    .links a:hover{ text-decoration:underline; }

    .divider{
      margin:14px 0;
      display:flex; align-items:center; gap:10px; color:#94a3b8; font-size:12px;
    }
    .divider::before,.divider::after{
      content:""; height:1px; flex:1; background:var(--line);
    }

    .hint{
      font-size:12.5px; color:var(--muted); text-align:center;
    }

    @media (max-width:900px){
      .auth-wrap{grid-template-columns:1fr;}
      .brand-panel{min-height:240px;}
      .login-card{min-height:auto;}
    }