/* Lote 130 · Pulido visual oficial: Ajustes, PIN y Apariencia */
:root{
  --kb-radius-sm:12px;--kb-radius-md:16px;--kb-radius-lg:22px;
  --kb-border:rgba(117,153,195,.22);--kb-border-strong:rgba(82,157,255,.42);
  --kb-surface:#0b182b;--kb-surface-2:#0e2036;--kb-surface-3:#122842;
  --kb-text:#f4f8ff;--kb-muted:#8fa7c3;--kb-accent:#2588ff;--kb-green:#39d98a;
  --kb-shadow:0 18px 45px rgba(0,0,0,.22);
}
.settings-grid{align-items:stretch;gap:18px}
.settings-card{position:relative;overflow:hidden;border-radius:var(--kb-radius-lg)!important;border:1px solid var(--kb-border)!important;background:linear-gradient(180deg,rgba(15,29,50,.98),rgba(10,22,39,.98))!important;box-shadow:var(--kb-shadow);padding:22px!important}
.settings-card:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#278dff,#55dca0);opacity:.88}
.settings-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.settings-card-heading h3{margin:3px 0 4px;font-size:20px;letter-spacing:-.02em}
.settings-card-heading p{margin:0;color:var(--kb-muted);font-size:13px;line-height:1.45;max-width:330px}
.settings-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;border:1px solid rgba(64,145,239,.35);background:linear-gradient(145deg,rgba(35,115,205,.25),rgba(22,68,121,.16));color:#82bdff;font-size:21px;flex:0 0 auto}
.pin-setup-panel{display:flex;flex-direction:column;align-items:center;min-height:390px}
.pin-length-choice{display:inline-grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border:1px solid var(--kb-border);border-radius:14px;background:rgba(5,15,28,.55);margin:0 auto 14px}
.pin-length-choice button{min-height:36px;padding:0 14px;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--kb-muted)!important;font-size:12px;font-weight:800;cursor:pointer}
.pin-length-choice button.active{background:linear-gradient(135deg,#176fdf,#2d93ff)!important;color:white!important;box-shadow:0 8px 20px rgba(26,118,231,.28)}
.pin-setup-label{font-size:13px;font-weight:800;color:#b7c8dc!important;margin-top:2px}
.pin-dots{margin:18px 0 12px!important}
.pin-setup-hint{color:var(--kb-muted);font-size:12px;margin:-2px 0 12px;text-align:center}
.pin-keypad{display:grid!important;grid-template-columns:repeat(3,72px)!important;justify-content:center;gap:11px!important;margin:10px auto 0!important}
.pin-keypad button{width:72px!important;height:56px!important;border-radius:16px!important;border:1px solid rgba(86,137,193,.28)!important;background:linear-gradient(180deg,#102640,#0b1c31)!important;color:var(--kb-text)!important;font-size:21px!important;font-weight:800!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.035);transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease}
.pin-keypad button:hover{border-color:rgba(62,151,255,.7)!important;background:linear-gradient(180deg,#153251,#0d2540)!important;box-shadow:0 9px 22px rgba(0,0,0,.18)}
.pin-keypad button:active{transform:scale(.96)}
.pin-keypad .pin-key-back{color:#ffb7bf!important}
.pin-keypad .pin-key-ok{background:linear-gradient(135deg,#0d7d4d,#22b96f)!important;border-color:#35d58a!important;color:white!important;font-size:14px!important;letter-spacing:.03em}
.pin-keypad .pin-key-ok:disabled{opacity:.38;filter:saturate(.5);cursor:not-allowed;box-shadow:none}
.pin-keypad .pin-key-empty{display:none!important}
.pin-active-panel{display:flex;flex-direction:column;gap:16px}
.pin-active-state{display:flex;align-items:center;gap:12px;padding:15px;border-radius:16px;border:1px solid rgba(57,217,138,.24);background:rgba(16,94,62,.13)}
.pin-active-state>span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1ba764;color:white;font-weight:900}.pin-active-state div{display:flex;flex-direction:column}.pin-active-state small{color:var(--kb-muted);margin-top:2px}
.appearance-settings-card{display:flex;flex-direction:column}
.appearance-field{display:flex!important;flex-direction:column;gap:8px;color:#a7bad1!important;font-size:12px!important;font-weight:800!important;margin-bottom:18px}
.appearance-field input{width:100%;min-height:46px!important;padding:0 14px!important;border-radius:13px!important;background:#09192c!important;border:1px solid #24405f!important;color:#eef6ff!important;transition:.16s}
.appearance-field input:focus{outline:none!important;border-color:#278dff!important;box-shadow:0 0 0 3px rgba(39,141,255,.16)!important}
.appearance-section-label{font-size:12px;font-weight:800;color:#a7bad1;margin-bottom:9px}
.theme-choice-grid{display:grid;gap:10px}
.theme-choice{display:grid!important;grid-template-columns:74px 1fr 22px;align-items:center;gap:12px;width:100%;min-height:78px;padding:11px!important;border-radius:16px!important;border:1px solid var(--kb-border)!important;background:rgba(6,17,31,.58)!important;color:var(--kb-text)!important;text-align:left;cursor:pointer;transition:.16s}
.theme-choice:hover{border-color:rgba(69,145,232,.52)!important;transform:translateY(-1px)}
.theme-choice.active{border-color:#2d91ff!important;background:linear-gradient(135deg,rgba(27,91,166,.25),rgba(8,28,50,.78))!important;box-shadow:0 0 0 3px rgba(45,145,255,.10)}
.theme-choice>span:nth-child(2){display:flex;flex-direction:column}.theme-choice small{color:var(--kb-muted);margin-top:3px;font-size:11px}.theme-choice em{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#2588ff;color:white;font-style:normal;font-size:12px;opacity:0}.theme-choice.active em{opacity:1}
.theme-preview{display:grid;grid-template-columns:17px 1fr;grid-template-rows:14px 1fr;gap:4px;width:72px;height:51px;padding:7px;border-radius:11px;border:1px solid rgba(104,150,204,.25);overflow:hidden}.theme-preview i{display:block;border-radius:3px}.theme-preview i:first-child{grid-row:1/3}.theme-preview i:nth-child(2){grid-column:2}.theme-preview i:nth-child(3){grid-column:2}.theme-preview-dark{background:#0b1930}.theme-preview-dark i:first-child{background:#07111f}.theme-preview-dark i:nth-child(2){background:#2588ff}.theme-preview-dark i:nth-child(3){background:#173451}.theme-preview-black{background:#000}.theme-preview-black i:first-child{background:#090909}.theme-preview-black i:nth-child(2){background:#3b8cff}.theme-preview-black i:nth-child(3){background:#171717}
.appearance-live-preview{margin-top:14px;padding:15px;border-radius:16px;border:1px dashed rgba(80,142,211,.32);background:rgba(5,15,28,.45);display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.appearance-live-preview>div{grid-column:1/-1;display:flex;align-items:center;gap:7px;color:var(--kb-muted)}.preview-dot{width:8px;height:8px;border-radius:50%;background:#39d98a;box-shadow:0 0 12px rgba(57,217,138,.65)}.appearance-live-preview strong{font-size:15px}.appearance-live-preview button{min-height:35px!important;padding:0 12px!important;border-radius:10px!important;background:linear-gradient(135deg,#176fdf,#2d93ff)!important;border:0!important;color:white!important;font-size:11px;font-weight:800}
.settings-save-btn{margin-top:14px;min-height:46px!important;border-radius:13px!important;font-weight:850!important;background:linear-gradient(135deg,#1672e4,#2b8fff)!important;box-shadow:0 12px 24px rgba(30,119,226,.22)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:1180px){.settings-grid{grid-template-columns:1fr 1fr!important}.account-card{grid-column:1/-1}.pin-setup-panel{min-height:auto}}
@media(max-width:760px){.settings-grid{grid-template-columns:1fr!important}.settings-card{padding:18px!important}.settings-card-heading p{max-width:none}.pin-keypad{grid-template-columns:repeat(3,64px)!important;gap:10px!important}.pin-keypad button{width:64px!important;height:52px!important}.theme-choice{grid-template-columns:65px 1fr 22px}.theme-preview{width:63px}.appearance-live-preview{grid-template-columns:1fr}.appearance-live-preview button{width:100%}}