/* ==========================================================
   SOL DE PUERTO V8 - LOGIN + SUCURSAL
   Capa visual independiente para no alterar la lógica previa.
   ========================================================== */
:root {
  --sdp-navy: #071224;
  --sdp-navy-2: #0d1b31;
  --sdp-panel: rgba(10, 24, 44, .84);
  --sdp-orange: #f59e0b;
  --sdp-orange-2: #f97316;
  --sdp-blue: #3b82f6;
  --sdp-text: #f8fafc;
  --sdp-muted: #9fb0c8;
  --sdp-line: rgba(255,255,255,.10);
}

/* LOGIN */
.login-v8.container-login {
  min-height: 100vh;
  background: radial-gradient(circle at 18% 22%, rgba(245,158,11,.12), transparent 30%),
              radial-gradient(circle at 80% 22%, rgba(59,130,246,.12), transparent 28%),
              #071224 url('../img/pannel.jpg') no-repeat center/cover;
  overflow: hidden;
}
.login-v8.container-login::before {
  background: linear-gradient(105deg, rgba(4,12,25,.96) 0%, rgba(6,18,36,.92) 52%, rgba(9,23,43,.96) 100%);
}
.login-v8 .left-panel { padding: clamp(42px, 6vw, 92px); }
.login-v8 .login-brand { display:flex; align-items:center; gap:16px; margin-bottom:44px; }
.login-v8 .login-brand-logo { width:72px; height:72px; border-radius:18px; background:#fff; padding:8px; display:grid; place-items:center; box-shadow:0 16px 40px rgba(0,0,0,.28), 0 0 0 1px rgba(245,158,11,.30); }
.login-v8 .login-brand-logo img { width:100%; max-height:100%; object-fit:contain; border:0; padding:0; box-shadow:none; background:transparent; }
.login-v8 .login-brand-eyebrow { display:block; font-size:11px; letter-spacing:2.2px; font-weight:800; color:#fbbf24; margin-bottom:5px; }
.login-v8 .login-brand h2 { margin:0; font-size:25px; letter-spacing:1.3px; font-weight:900; }
.login-v8 .hero-kicker { display:inline-flex; gap:8px; align-items:center; padding:8px 13px; border-radius:999px; color:#fed7aa; background:rgba(249,115,22,.09); border:1px solid rgba(249,115,22,.20); font-size:12px; font-weight:700; letter-spacing:.4px; margin-bottom:18px; }
.login-v8 .descrih1tion { margin:0 0 18px; font-size:clamp(42px,4.2vw,66px); line-height:1.02; letter-spacing:-1.8px; background:none; -webkit-text-fill-color:initial; color:#fff; padding:0; }
.login-v8 .descrih1tion span { color:#f59e0b; }
.login-v8 .description { max-width:600px; color:#b7c5d8; font-size:16px; line-height:1.65; margin-bottom:28px; }
.login-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; max-width:560px; margin-bottom:26px; }
.login-feature { display:flex; align-items:center; gap:12px; padding:14px 15px; border-radius:14px; background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px); }
.login-feature > i { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:rgba(245,158,11,.12); color:#fbbf24; font-size:15px; }
.login-feature span { display:flex; flex-direction:column; line-height:1.15; }
.login-feature strong { color:#f8fafc; font-size:13px; margin-bottom:4px; }
.login-feature small { color:#8da1bb; font-size:11px; }
.login-v8 .security-tips { max-width:560px; padding:14px 18px; margin-bottom:24px; background:rgba(7,18,36,.55); border-color:rgba(59,130,246,.18); border-left-color:#f59e0b; box-shadow:none; }
.login-v8 .security-tips p { margin:5px 0; font-size:12px; color:#c9d5e5; }
.login-v8 .security-tips i { color:#fbbf24; }
.login-v8 .get-started { border-color:rgba(245,158,11,.65); background:rgba(245,158,11,.08); box-shadow:none; font-size:13px; padding:10px 18px; }
.login-v8 .get-started:hover { background:#f59e0b; color:#071224; box-shadow:0 10px 30px rgba(245,158,11,.24); }

.login-v8 .right-panel { background:rgba(4,12,25,.48); border-left:1px solid rgba(255,255,255,.05); padding:32px; }
.login-v8 .login-form { max-width:440px; padding:38px; border-radius:26px; background:linear-gradient(180deg, rgba(14,31,55,.88), rgba(8,20,39,.88)); border:1px solid rgba(255,255,255,.10); box-shadow:0 32px 90px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.05); }
.login-mobile-brand { display:none; }
.login-v8 .login-header { margin-bottom:24px; }
.login-header-icon { width:48px; height:48px; margin:0 auto 13px; display:grid; place-items:center; border-radius:15px; color:#fbbf24; background:linear-gradient(145deg, rgba(245,158,11,.18), rgba(249,115,22,.08)); border:1px solid rgba(245,158,11,.23); font-size:20px; }
.login-v8 .login-header h1 { font-size:27px; letter-spacing:-.4px; margin-bottom:6px; }
.login-v8 .login-header .subtitle { color:#8fa2bc; font-size:13px; }
.login-branch-card { display:flex; align-items:center; gap:12px; padding:13px 14px; margin-bottom:22px; border-radius:15px; background:rgba(59,130,246,.07); border:1px solid rgba(96,165,250,.16); }
.login-branch-card .branch-icon { flex:0 0 38px; width:38px; height:38px; display:grid; place-items:center; border-radius:11px; color:#93c5fd; background:rgba(59,130,246,.12); }
.login-branch-card .branch-copy { min-width:0; flex:1; display:flex; flex-direction:column; }
.login-branch-card small { color:#7f93ad; letter-spacing:1.2px; font-weight:800; font-size:9px; }
.login-branch-card strong { color:#eef6ff; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.login-branch-card .branch-copy span { color:#7186a1; font-size:10px; margin-top:2px; }
.login-branch-card .branch-ok { color:#22c55e; font-size:14px; opacity:.85; }
.login-v8 .form-group.login-field { margin-bottom:17px; }
.login-v8 .login-field label { display:block; color:#a9bad0; font-size:11px; font-weight:700; margin:0 0 7px 2px; }
.login-v8 .login-field .form-control-icon { top:42px; left:17px; color:#71849e; font-size:14px; }
.login-v8 .right-panel input[type="text"],
.login-v8 .right-panel input[type="password"] { height:50px; padding:12px 48px; border-radius:13px; background:rgba(3,10,22,.50); border:1px solid rgba(255,255,255,.09); font-size:13px; }
.login-v8 .right-panel input:focus { border-color:rgba(245,158,11,.75); box-shadow:0 0 0 3px rgba(245,158,11,.10); }
.toggle-login-password { position:absolute; right:10px; top:31px; width:38px; height:38px; border:0; background:transparent; color:#71849e; z-index:11; border-radius:9px; }
.toggle-login-password:hover, .toggle-login-password:focus { color:#fbbf24; background:rgba(245,158,11,.08); outline:none; }
.login-v8 .login-button { height:52px; margin-top:23px; border-radius:13px; background:linear-gradient(135deg,#f59e0b,#f97316); border:0; color:#101827; font-size:12px; font-weight:900; box-shadow:0 14px 34px rgba(249,115,22,.20); }
.login-v8 .login-button:hover { background:linear-gradient(135deg,#fbbf24,#fb923c); box-shadow:0 17px 38px rgba(249,115,22,.28); }
.login-v8 .login-button[disabled] { opacity:.72; cursor:wait; transform:none; }
.login-result { min-height:0; text-align:center; font-size:12px; }
.login-result .alert { margin:14px 0 0; border-radius:10px; }
.login-secure-note { margin-top:22px; padding-top:17px; border-top:1px solid rgba(255,255,255,.07); text-align:center; color:#647995; font-size:10px; letter-spacing:.2px; }
.login-secure-note i { margin-right:5px; color:#7e93ad; }

/* HEADER / SUCURSAL ACTIVA */
.sdp-header-context { float:left; height:50px; display:flex; align-items:center; gap:8px; margin-left:10px; }
.sdp-sucursal-pill { height:34px; max-width:300px; display:flex; align-items:center; gap:9px; padding:0 13px; border-radius:10px; color:#fff; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.15); line-height:1; }
.sdp-sucursal-pill > i { color:#fbbf24; font-size:13px; }
.sdp-sucursal-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.sdp-sucursal-copy small { color:rgba(255,255,255,.65); font-size:8px; font-weight:800; letter-spacing:1px; }
.sdp-sucursal-copy strong { display:block; max-width:220px; color:#fff; font-size:10px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sdp-header-user-name { display:inline-block; max-width:145px; vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sdp-user-context { padding:12px 14px 10px; border-bottom:1px solid #edf0f4; background:#f8fafc; }
.sdp-user-context strong { display:block; color:#1e293b; font-size:12px; margin-bottom:3px; }
.sdp-user-context span { display:block; color:#64748b; font-size:10px; }
.sdp-user-context .sdp-user-branch { margin-top:7px; color:#1d4ed8; font-weight:700; }

@media (max-width: 1060px) {
  .sdp-sucursal-pill { max-width:190px; padding:0 10px; }
  .sdp-sucursal-copy strong { max-width:130px; }
}
@media (max-width: 900px) {
  .login-v8.container-login { min-height:100vh; display:block; }
  .login-v8 .left-panel { display:none; }
  .login-v8 .right-panel { min-height:100vh; padding:22px; background:linear-gradient(160deg,rgba(4,12,25,.88),rgba(9,25,47,.92)); }
  .login-v8 .login-form { max-width:460px; padding:28px 24px; }
  .login-mobile-brand { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom:26px; color:#fff; letter-spacing:1px; font-size:13px; }
  .login-mobile-brand img { width:48px; height:48px; object-fit:contain; border-radius:12px; background:#fff; padding:5px; }
}
@media (max-width: 767px) {
  .sdp-header-context { margin-left:5px; }
  .sdp-sucursal-pill { width:38px; padding:0; justify-content:center; background:rgba(255,255,255,.10); }
  .sdp-sucursal-copy { display:none; }
  .sdp-header-user-name { display:none; }
}
@media (max-width: 420px) {
  .login-v8 .right-panel { padding:14px; }
  .login-v8 .login-form { padding:24px 18px; border-radius:21px; }
  .login-branch-card .branch-copy span { display:none; }
}