/* POSUP Licenciador — Shared Theme */
:root{
  --bg:#0b1014; --surface:#0f151b; --surface-2:#121a22;
  --primary:#22c55e; --primary-600:#16a34a;
  --text:#e8eef3; --muted:#9fb2c3; --ring:#36d399; --border:#1f2a32; --warn:#facc15;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #12202b 0%, transparent 60%),
    radial-gradient(1000px 500px at 110% 20%, #1a2630 0%, transparent 60%),
    var(--bg);
  color: var(--text);
  letter-spacing:.2px;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}
.navbar{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),#0c1013;border-bottom:1px solid var(--border)}
.brand-badge{font-size:.75rem;padding:.2rem .45rem;border:1px solid #2a3642;border-radius:.5rem;color:#b7c7d5}
.section-title{font-weight:800; letter-spacing:.2px; margin: 24px 0 8px}
.subtle{color:var(--muted)}

/* Cards */
.card-modern{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 18px;
  height: 100%;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.card-modern:hover{
  transform: translateY(-2px);
  border-color:#2a3a46;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.icon-wrap{
  width:42px;height:42px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.01)), var(--surface-2);
  border:1px solid #22303a; color:#bfead3; margin-right:10px;
  flex: 0 0 42px;
}
.card-title{margin:0;font-weight:800; font-size:1.05rem}
.card-desc{margin:.25rem 0 .75rem; color:var(--muted)}
.btn-success{
  --bs-btn-bg:var(--primary);--bs-btn-border-color:var(--primary);
  --bs-btn-hover-bg:var(--primary-600);--bs-btn-hover-border-color:var(--primary-600);
}
.btn-pill{border-radius:12px;height:42px;display:flex;align-items:center;justify-content:center}
.btn-outline-light{border-color:#3a4856;color:#e7edf3}
.btn-outline-light:hover{background:#1b2530}
.btn-outline-warning{border-color:#6b5a1a;color:#f8e08a}

/* Login */
.container-narrow{ max-width: 440px; margin: 0 auto; padding: 24px; }
.brand{font-weight:800;font-size:clamp(24px,4vw,32px);
  background:linear-gradient(90deg,#fff,#c7ffdf 60%,#79e6aa);
  -webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:.6px}
.subtitle{ color: var(--muted); margin-top:.25rem; }
.login-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.0)) , var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.02);
  padding: 24px;
}
.form-label{ color: #cfe7f5; font-weight:600; }
.form-control{
  background: var(--surface-2);
  border: 1px solid #24303a;
  color: var(--text);
  height: 48px;
  border-radius: 12px;
  padding-left: 2.5rem; /* space for icon */
}
.form-control::placeholder{ color:#7f93a4; opacity:1; }
.form-control:focus{
  background: #0f171e;
  color: var(--text);
  border-color: var(--ring);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(54,211,153,.25);
}
.input-icon{
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color:#92a9bb; font-size: 1.1rem;
}
.footer-note{ color:#7f93a4; font-size:.8rem; text-align:center; margin-top:1.25rem }
/* --- Input con icono, centrado perfecto --- */
.input-row { position: relative; }

.input-row .input-icon{
  position: absolute;
  inset-inline-start: 12px;      /* left en LTR */
  top: 50%;
  transform: translateY(-50%);   /* centra vertical */
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  color: #92a9bb;
  pointer-events: none;          /* no bloquea clic en el input */
  line-height: 1;                /* evita desalineo por fuentes */
  font-size: 1.1rem;
}

.form-control{
  padding-inline-start: 2.5rem;  /* espacio para el icono */
  line-height: 1.25;             /* altura consistente */
  height: 48px;                  /* ya lo tenías, mantiene layout */
}
/* Input groups con iconos centrados y look POSUP */
.posup-input .input-group-text{
  background: var(--surface-2);
  border: 1px solid #24303a;
  color: #92a9bb;
  border-right: 0;
  display: grid;
  place-items: center;
  width: 48px;                 /* ancho fijo para centrar el icono */
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}

.posup-input .form-control{
  background: var(--surface-2);
  border: 1px solid #24303a;
  border-left: 0 !important;   /* une visualmente con el icono */
  color: var(--text);
  height: 48px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}

.posup-input .form-control:focus{
  background: #0f171e;
  color: var(--text);
  border-color: var(--ring);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(54,211,153,.25);
}

/* Corrige el gap del feedback dentro del input-group */
.posup-input .invalid-feedback{
  display: block;
  margin-left: 4px;
}