/* Paleta: negro, verde logo, dorado logo */
:root{
  --bg:#000000;
  --card:#ffffff;
  --ink:#0f172a;
  --green:#009345;
  --gold:#D4AF37;
  --muted:#6b7280;
  --pink:#eab8c0; /* tono suave para eco del ejemplo (sutil) */
  --radius:18px;
  --shadow:0 20px 60px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Ubuntu,Arial,sans-serif}

.auth-body{
  min-height:100vh;
  background:
    radial-gradient(1000px 500px at 100% -10%, rgba(212,175,55,.10) 0%, transparent 70%),
    radial-gradient(900px 500px at 0% 110%, rgba(0,147,69,.18) 0%, transparent 70%),
    var(--bg);
  display:grid;
  place-items:center;
  padding:24px;
  color:var(--ink);
}

.auth-shell{
  width:min(1100px,100%);
  background:linear-gradient(90deg, #0b0f14 0%, #111827 40%) padding-box;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  display:grid;
  grid-template-columns: 1.15fr 1.2fr;
  overflow:hidden;
}

.panel{position:relative}
.panel-left{
  color:#e5e7eb;
  padding:40px 32px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:12px;
}
.brand{max-width:420px}
.brand-logo{width:72px;height:auto;margin-bottom:12px;display:block}
.brand-title{margin:0 0 6px;font-size:22px;letter-spacing:.6px;color:#fff}
.brand-text{margin:0 0 16px;opacity:.85;line-height:1.5}
.ghost-btn{
  display:inline-block;border:1px solid rgba(212,175,55,.55);
  color:#fff;text-decoration:none;padding:10px 14px;border-radius:10px;
  background:linear-gradient(0deg, rgba(212,175,55,.15), rgba(212,175,55,.08));
}
.panel-deco{display:flex;align-items:center;justify-content:center}
.chevron{
  width:66px;height:66px;border-radius:50%;
  background:linear-gradient(180deg, rgba(212,175,55,.9), rgba(212,175,55,.7));
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(212,175,55,.35);
  margin-left:8px;
}
.chevron span{font-size:28px;color:#0b0f14;line-height:1;transform:translateX(2px)}

.panel-right{
  background:var(--card);
  padding:36px 28px 30px;
}

.close-x{
  position:absolute;right:12px;top:10px;border:0;background:transparent;
  font-size:28px;line-height:1;cursor:pointer;color:#9ca3af;
}
.close-x:hover{color:#111827}

.form-head{display:grid;place-items:center;margin-bottom:10px;text-align:center}
.head-logo{width:54px;height:auto;margin-bottom:8px}
.title{margin:0;font-size:26px;color:#111827}
.subtitle{margin:4px 0 14px;color:var(--muted)}

.auth-form{max-width:430px;margin:0 auto;display:grid;gap:14px}
.field{display:grid;gap:6px;text-align:left}
.field span{font-size:14px;color:#111827}
.field input{
  width:100%;padding:14px 16px;border-radius:12px;border:1px solid #e5e7eb;
  background:#fff;outline:none;transition:border .2s, box-shadow .2s;
}
.field input:focus{
  border-color:var(--green);
  box-shadow:0 0 0 3px rgba(0,147,69,.15);
}

.row{display:flex;gap:12px;align-items:center;margin:2px 0 6px}
.between{justify-content:space-between}
.remember{color:#374151;font-size:14px}
.link{color:var(--green);text-decoration:none}
.link:hover{text-decoration:underline}

.btn-primary{
  width:100%;padding:14px 18px;border:0;border-radius:14px;
  background:linear-gradient(180deg, var(--green), #007a38);
  color:#fff;font-weight:700;cursor:pointer;
  box-shadow:0 14px 32px rgba(0,147,69,.35);
}
.btn-primary:hover{filter:brightness(1.05)}
.switch{margin:10px 0 0;text-align:center;color:#4b5563}

/* Responsivo / móviles como en la referencia */
@media (max-width: 920px){
  .auth-shell{grid-template-columns:1fr}
  .panel-left{
    grid-template-columns:1fr;
    text-align:center;
    padding:28px 20px 6px;
  }
  .panel-deco{display:none}
  .brand{margin:0 auto}
  .panel-right{padding:24px 18px 28px}
}

.flash-wrap{max-width:430px;margin:0 auto 12px;display:grid;gap:8px}
.flash{padding:10px 12px;border-radius:10px;font-size:14px}
.flash.success{background:#ecfdf5;border:1px solid #bbf7d0;color:#065f46}
.flash.warning{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.flash.danger{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}