:root{
  --bg:#06152f;--panel:#0b2148;--panel2:#102a57;--text:#fff;--muted:#9fb0c9;
  --line:rgba(255,255,255,.10);--blue:#2f8cff;--cyan:#56d5ff;--green:#38d878;
  --yellow:#ffd84d;--danger:#ff6262;--white:#fff;--shadow:0 22px 60px rgba(0,0,0,.28)
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;min-height:100dvh;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:radial-gradient(circle at 90% 0,rgba(47,140,255,.24),transparent 32%),linear-gradient(180deg,#071a39,#06152f);-webkit-font-smoothing:antialiased;padding-bottom:calc(82px + env(safe-area-inset-bottom))}
button,input,select,textarea{font:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.hidden-frame{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;border:0}
.app{width:min(100%,500px);margin:0 auto;padding:calc(18px + env(safe-area-inset-top)) 14px 24px}
.view{display:none}.view.active{display:block}
.top{text-align:center;padding:6px 8px 20px}.top.compact{padding-bottom:14px}
.eyebrow{display:inline-block;color:var(--cyan);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.top h1{margin:6px 0 0;font-size:34px;letter-spacing:-.04em;line-height:1}.top p{margin:9px 0 0;color:var(--muted);font-size:14px;line-height:1.45}
.counter-card{display:grid;grid-template-columns:58px 1fr 58px;gap:10px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.055);box-shadow:var(--shadow);backdrop-filter:blur(16px)}
.round-btn{width:58px;height:58px;border:0;border-radius:18px;background:rgba(255,255,255,.08);color:#fff;font-size:34px}.round-btn:active{transform:scale(.96);background:rgba(255,255,255,.14)}
.counter-center{text-align:center}.counter-center input{width:100%;border:0;outline:0;background:transparent;color:#fff;text-align:center;font-size:52px;font-weight:800;letter-spacing:-.06em;appearance:textfield}.counter-center input::-webkit-inner-spin-button,.counter-center input::-webkit-outer-spin-button{-webkit-appearance:none}.counter-center span{display:block;color:var(--muted);font-size:12px;font-weight:600}
.hero-result{margin-top:16px;padding:24px 20px;border-radius:24px;text-align:center;background:linear-gradient(145deg,rgba(56,216,120,.16),rgba(47,140,255,.09)),var(--panel);border:1px solid rgba(56,216,120,.21)}
.hero-result span{color:#b8c9dd;font-size:13px;font-weight:700}.hero-result strong{display:block;margin-top:7px;color:var(--green);font-size:clamp(46px,13vw,64px);line-height:1;letter-spacing:-.055em}.hero-result small{display:block;margin-top:8px;color:var(--muted);font-size:13px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.mini-grid article{min-height:114px;padding:16px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.05)}.mini-grid article.accent{background:linear-gradient(145deg,rgba(255,216,77,.11),rgba(255,255,255,.04));border-color:rgba(255,216,77,.18)}.mini-grid span{display:block;color:var(--muted);font-size:12px;font-weight:650}.mini-grid strong{display:block;margin-top:10px;font-size:27px;letter-spacing:-.03em}.mini-grid small{display:block;margin-top:7px;color:#7f93ae;font-size:11px}
.level-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;padding:15px 16px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.045)}.level-row span{display:block;color:var(--muted);font-size:11px}.level-row strong{display:block;margin-top:4px;font-size:17px}.level-row b{padding:9px 11px;border-radius:999px;background:rgba(56,216,120,.13);color:var(--green);font-size:12px}
.progress{height:8px;margin-top:12px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}.progress>div{height:100%;width:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--green));transition:width .2s ease}.micro{min-height:18px;margin:7px 4px 0;color:var(--muted);text-align:center;font-size:11px}

.block{margin-top:10px;padding:18px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.045);box-shadow:0 14px 34px rgba(0,0,0,.12)}
.block h2{margin:0 0 14px;font-size:15px;letter-spacing:-.01em}
.carrier-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.carrier{min-height:76px;border:2px solid transparent;border-radius:18px;color:#fff;font-weight:800;font-size:18px;transition:.16s ease}.carrier.selected{border-color:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.11)}.carrier.bait{background:#0b0b0c}.carrier.movistar{background:linear-gradient(135deg,#21a7e9,#067fc5)}.carrier.unefon{background:#ffcc16;color:#101318}.carrier.att{background:linear-gradient(135deg,#149bd7,#086fb1)}.carrier.telcel{background:linear-gradient(135deg,#133e7a,#0b2856)}.carrier:last-child{grid-column:1/-1}
.procedure-grid{display:grid;gap:9px}.procedure-btn{width:100%;padding:15px 14px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.055);color:#fff;text-align:left;font-weight:750}.procedure-btn.selected{background:rgba(47,140,255,.18);border-color:rgba(86,213,255,.55)}
.warning{margin-bottom:14px;padding:13px 14px;border-radius:15px;background:rgba(255,98,98,.13);border:1px solid rgba(255,98,98,.26);color:#ffd6d6;font-size:12px;line-height:1.45}.warning strong{display:block;margin-bottom:4px;color:#fff}
.fields{display:grid;gap:13px}.field{display:grid;gap:7px}.field label{color:#c5d1e2;font-size:12px;font-weight:700}.field input,.field select,.field textarea{width:100%;min-height:50px;border:1px solid var(--line);outline:0;border-radius:14px;background:rgba(255,255,255,.06);color:#fff;padding:12px 13px}.field textarea{min-height:82px;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:#6f829d}.field select option{color:#111}.help{color:#7f93ae;font-size:10.5px;line-height:1.4}
.file-input{position:relative;display:block}.file-input input{position:absolute;inset:0;opacity:0;cursor:pointer}.file-box{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;border:1px dashed rgba(86,213,255,.38);border-radius:15px;background:rgba(47,140,255,.06)}.file-box strong{font-size:13px}.file-box span{color:var(--cyan);font-size:12px;font-weight:800}.file-box.ready{border-style:solid;border-color:rgba(56,216,120,.4);background:rgba(56,216,120,.08)}.file-box.ready span{color:var(--green)}
.consent{display:flex;gap:10px;align-items:flex-start;margin-top:17px;color:#b8c7da;font-size:11.5px;line-height:1.45}.consent input{width:18px;height:18px;margin:0;accent-color:var(--green);flex:0 0 auto}
.primary-btn,.secondary-btn,.whatsapp-btn{width:100%;min-height:54px;border:0;border-radius:16px;font-weight:850;text-align:center}.primary-btn{margin-top:16px;background:linear-gradient(135deg,var(--blue),#1cbeaa);color:#fff;box-shadow:0 14px 30px rgba(47,140,255,.18)}.primary-btn:disabled{opacity:.55;cursor:wait}.privacy-note{margin:10px 4px 0;color:#71859f;font-size:10.5px;line-height:1.4;text-align:center}
.success{text-align:center;padding:58px 10px 20px}.success-icon{width:78px;height:78px;margin:0 auto 18px;display:grid;place-items:center;border-radius:50%;background:rgba(56,216,120,.14);border:1px solid rgba(56,216,120,.34);color:var(--green);font-size:40px;font-weight:900}.success h2{margin:7px 0 10px;font-size:26px}.success p{margin:0 auto 24px;max-width:340px;color:var(--muted);font-size:14px;line-height:1.5}.whatsapp-btn{display:grid;place-items:center;background:#25d366;color:#062b15;text-decoration:none;box-shadow:0 14px 34px rgba(37,211,102,.20)}.secondary-btn{margin-top:10px;background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff}
.setup{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;background:rgba(2,8,20,.78);backdrop-filter:blur(12px)}.setup-card{width:min(100%,380px);padding:24px;border:1px solid var(--line);border-radius:22px;background:#0d2348;box-shadow:var(--shadow);text-align:center}.setup-card strong{font-size:19px}.setup-card p{color:var(--muted);line-height:1.5;font-size:13px}.setup-card code{color:var(--cyan)}

.bottom-nav{position:fixed;left:50%;bottom:0;z-index:50;width:min(100%,500px);transform:translateX(-50%);display:grid;grid-template-columns:1fr 1fr;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:rgba(5,18,42,.92);border-top:1px solid var(--line);backdrop-filter:blur(18px)}.nav-item{display:grid;place-items:center;gap:2px;min-height:58px;border:0;border-radius:16px;background:transparent;color:#7890ad;font-size:11px;font-weight:750}.nav-item.active{background:rgba(47,140,255,.12);color:#fff}.nav-icon{font-size:22px;line-height:1}

@media(max-width:360px){.app{padding-left:10px;padding-right:10px}.counter-card{grid-template-columns:52px 1fr 52px}.round-btn{width:52px;height:52px}.counter-center input{font-size:46px}.mini-grid strong{font-size:24px}}


/* ===== Corrección v2: consentimiento y feedback de envío ===== */
.consent-card{
  position:relative;
  display:grid;
  grid-template-columns:24px 1fr;
  align-items:start;
  gap:12px;
  margin-top:18px;
  padding:14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.055);
  cursor:pointer;
  user-select:none
}
.consent-card input{
  position:absolute;
  opacity:0;
  pointer-events:none
}
.custom-check{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:2px solid #7890ad;
  border-radius:7px;
  color:transparent;
  font-size:15px;
  font-weight:900;
  transition:.15s ease;
  background:rgba(0,0,0,.14)
}
.consent-card input:checked + .custom-check{
  border-color:var(--green);
  background:var(--green);
  color:#062b15
}
.consent-card.invalid{
  border-color:rgba(255,98,98,.65);
  background:rgba(255,98,98,.09)
}
.consent-copy{
  color:#b8c7da;
  font-size:11.5px;
  line-height:1.45
}
.consent-copy strong{
  display:block;
  margin-bottom:3px;
  color:#fff;
  font-size:12px
}
.submit-status{
  min-height:18px;
  margin:9px 4px 0;
  text-align:center;
  font-size:11px;
  line-height:1.4;
  color:var(--muted)
}
.submit-status.error{color:#ff9b9b}
.submit-status.ok{color:var(--green)}
.primary-btn.sending{
  background:linear-gradient(135deg,#517292,#3b6477)
}


/* ===== v3: Escáner de código de barras para ICCID ===== */
.field-row-with-action{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:center
}
.field-row-with-action input{min-width:0}
.scan-iccid-btn{
  min-height:50px;
  padding:0 13px;
  border:1px solid rgba(86,213,255,.34);
  border-radius:14px;
  background:rgba(47,140,255,.12);
  color:#8de4ff;
  font-size:12px;
  font-weight:850;
  white-space:nowrap
}
.scan-iccid-btn:active{transform:scale(.98)}
.scan-iccid-btn .camera-glyph{font-size:16px;margin-right:5px}
.scanner-modal{
  position:fixed;
  inset:0;
  z-index:120;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom));
  background:rgba(1,7,18,.82);
  backdrop-filter:blur(12px)
}
.scanner-sheet{
  width:min(100%,500px);
  max-height:calc(100dvh - 30px);
  overflow:auto;
  padding:20px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:26px;
  background:#0b2148;
  box-shadow:0 24px 70px rgba(0,0,0,.42)
}
.scanner-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px
}
.scanner-head h2{
  margin:5px 0 0;
  font-size:22px
}
.scanner-close{
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:13px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:28px;
  line-height:1
}
.scanner-help{
  margin:12px 0 15px;
  color:#9fb0c9;
  font-size:12px;
  line-height:1.45
}
.scanner-reader{
  overflow:hidden;
  min-height:250px;
  border:1px solid rgba(86,213,255,.22);
  border-radius:18px;
  background:#020814
}
.scanner-reader video{
  border-radius:18px!important;
  object-fit:cover!important
}
.scanner-status{
  min-height:20px;
  margin:12px 4px 0;
  color:#9fb0c9;
  text-align:center;
  font-size:11px
}
.scanner-status.ok{color:#38d878}
.scanner-status.error{color:#ff9b9b}
#scannerReader__dashboard_section_swaplink,
#scannerReader__dashboard_section_csr button{
  color:#0b2148!important
}
@media(max-width:380px){
  .field-row-with-action{grid-template-columns:1fr}
  .scan-iccid-btn{width:100%}
}

/* v4 validación */
.field input:focus,.field textarea:focus{border-color:rgba(86,213,255,.58);box-shadow:0 0 0 3px rgba(86,213,255,.08)}
.field input:user-invalid,.field textarea:user-invalid{border-color:rgba(255,98,98,.65)}


/* ===== v5: arquitectura por servicio ===== */
body{
  padding-bottom:calc(20px + env(safe-area-inset-bottom))
}
.app-v5{
  padding-bottom:30px
}
.home-top{
  padding-top:24px;
  padding-bottom:26px
}
.home-top h1{
  max-width:340px;
  margin-left:auto;
  margin-right:auto
}
.service-menu{
  display:grid;
  gap:12px
}
.service-card{
  width:100%;
  min-height:96px;
  display:grid;
  grid-template-columns:58px 1fr auto;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:22px;
  color:#fff;
  text-align:left;
  box-shadow:0 16px 38px rgba(0,0,0,.12)
}
.service-card.portabilidad{
  background:linear-gradient(135deg,rgba(47,140,255,.18),rgba(255,255,255,.05))
}
.service-card.pospago{
  background:linear-gradient(135deg,rgba(121,91,255,.18),rgba(255,255,255,.05))
}
.service-card.esim{
  background:linear-gradient(135deg,rgba(56,216,120,.15),rgba(255,255,255,.05))
}
.service-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  font-size:28px
}
.service-copy{
  min-width:0
}
.service-copy strong{
  display:block;
  font-size:17px;
  letter-spacing:.01em
}
.service-copy small{
  display:block;
  margin-top:5px;
  color:#9fb0c9;
  font-size:12px;
  line-height:1.35
}
.chevron{
  color:#7fa1c8;
  font-size:30px;
  line-height:1
}
.simulator-shortcut{
  width:100%;
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:14px 15px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:18px;
  background:rgba(255,255,255,.04);
  color:#fff;
  text-align:left
}
.simulator-shortcut>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:rgba(47,140,255,.11);
  color:#79c9ff;
  font-size:21px
}
.simulator-shortcut strong{
  display:block;
  font-size:13px
}
.simulator-shortcut small{
  display:block;
  margin-top:3px;
  color:#8196b2;
  font-size:10.5px
}
.simulator-shortcut b{
  color:#7590af;
  font-size:24px
}
.with-back{
  position:relative;
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:start;
  text-align:center;
  gap:8px
}
.with-back>div{
  grid-column:2
}
.back-btn{
  grid-column:1;
  width:42px;
  height:42px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:31px;
  line-height:1
}
.brand-menu{
  display:grid;
  gap:11px
}
.brand-card{
  width:100%;
  min-height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:20px;
  color:#fff;
  font-weight:800;
  text-align:left
}
.brand-card.bait{background:#101114}
.brand-card.movistar{background:linear-gradient(135deg,#1aa9e8,#0778bd)}
.brand-card.unefon{background:#f4ca17;color:#101318}
.brand-card.att{background:linear-gradient(135deg,#1398d8,#0870b3)}
.brand-card.telcel{background:linear-gradient(135deg,#164781,#0b2a58)}
.brand-name{
  font-size:18px
}
.pending-card{
  margin-top:18px;
  padding:30px 20px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:24px;
  background:rgba(255,255,255,.045);
  text-align:center
}
.pending-icon{
  width:64px;
  height:64px;
  margin:0 auto 14px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:rgba(56,216,120,.12);
  color:#58e08b;
  font-size:28px
}
.pending-card h2{
  margin:0;
  font-size:21px
}
.pending-card p{
  margin:9px auto 0;
  max-width:320px;
  color:#9fb0c9;
  font-size:13px;
  line-height:1.5
}
#successView .success{
  padding-top:80px
}


/* ===== carrier logos upgrade ===== */
.brand-menu{
  margin-top: 4px;
}
.brand-card{
  min-height: 94px;
  padding: 14px 18px;
  box-shadow: 0 16px 34px rgba(0,0,0,.14);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.brand-card:active{
  transform: scale(.985);
}
.brand-card.bait{
  background: linear-gradient(135deg,#ffd42a,#f0bf10);
}
.brand-card.movistar{
  background: linear-gradient(135deg,#ffffff,#f5faff);
  border-color: rgba(47,140,255,.22);
}
.brand-card.unefon{
  background: linear-gradient(135deg,#ffd84a,#f4c61a);
  color:#111827;
}
.brand-card.att{
  background: linear-gradient(135deg,#149bd7,#086fb1);
}
.brand-card.telcel{
  background: linear-gradient(135deg,#1550a6,#0d3f88);
}
.brand-logo{
  display:block;
  width:auto;
  max-width:min(76vw, 240px);
  max-height:54px;
  object-fit:contain;
  object-position:left center;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.05));
}
.brand-card.movistar .brand-logo{
  max-height:48px;
}
.brand-card.telcel .brand-logo{
  max-height:42px;
}
.brand-card.bait .brand-logo{
  max-height:58px;
}
.brand-card .chevron{
  margin-left:14px;
  flex:0 0 auto;
}
@media (max-width: 380px){
  .brand-card{
    min-height:86px;
    padding: 12px 14px;
  }
  .brand-logo{
    max-width: 200px;
    max-height: 50px;
  }
}


/* ===== v6: contraste final por carrier ===== */
.brand-card.bait{
  background:#FFD42A !important;
  border-color:#FFD42A !important;
  color:#161616 !important;
}
.brand-card.movistar{
  background:#FFFFFF !important;
  border-color:#E5EEF7 !important;
  color:#129FE3 !important;
}
.brand-card.unefon{
  background:#FFD42A !important;
  border-color:#FFD42A !important;
  color:#161616 !important;
}
.brand-card.att{
  background:#FFFFFF !important;
  border-color:#E5EEF7 !important;
  color:#111827 !important;
}
.brand-card.telcel{
  background:#1550A6 !important;
  border-color:#2A65BA !important;
  color:#FFFFFF !important;
}

.brand-card.bait .chevron,
.brand-card.unefon .chevron{
  color:#202020 !important;
}
.brand-card.movistar .chevron,
.brand-card.att .chevron{
  color:#6B8FBC !important;
}
.brand-card.telcel .chevron{
  color:#FFFFFF !important;
}

.brand-card.bait .brand-logo,
.brand-card.unefon .brand-logo{
  filter:none !important;
}
.brand-card.telcel .brand-logo{
  filter:none !important;
}
.brand-card.att .brand-logo{
  max-height:50px !important;
}
.brand-card.movistar .brand-logo{
  max-height:50px !important;
}

.brand-logo{
  opacity:1 !important;
}


/* ===== v7: contraste real corregido ===== */
.brand-card{
  overflow:hidden;
}
.brand-logo{
  display:block;
  width:auto;
  max-width:min(78vw, 270px) !important;
  max-height:64px !important;
  object-fit:contain;
  image-rendering:auto;
  filter:none !important;
  opacity:1 !important;
}
.brand-card.bait .brand-logo,
.brand-card.unefon .brand-logo{
  max-height:66px !important;
}
.brand-card.telcel .brand-logo{
  max-height:54px !important;
}
.brand-card.att .brand-logo{
  max-height:52px !important;
}
.brand-card.movistar .brand-logo{
  max-height:54px !important;
}


/* ===== v8: botones por imagen completa del carrier ===== */
.brand-menu{
  gap:12px;
}
.brand-card.image-card{
  padding:0 !important;
  min-height:auto !important;
  background:transparent !important;
  border:0 !important;
  border-radius:28px !important;
  overflow:hidden !important;
  box-shadow:0 16px 34px rgba(0,0,0,.14) !important;
}
.brand-card.image-card .carrier-button-image{
  display:block;
  width:100%;
  height:auto;
  border-radius:28px;
}
.brand-card.image-card .brand-name{
  width:100%;
  display:block;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  font-weight:800;
  text-align:left;
}
.brand-card.image-card .chevron,
.brand-card.image-card .brand-logo{
  display:none !important;
}
.brand-card.image-card:active{
  transform:scale(.985);
}


/* ===== v9: corrección de CSS, medidas y formatos de botones ===== */
.brand-menu{
  width:min(100%, 760px);
  margin:8px auto 0;
  display:grid;
  gap:16px;
}

.brand-card.image-card{
  width:100%;
  display:block;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  border-radius:28px !important;
  overflow:hidden !important;
  box-shadow:0 18px 34px rgba(0,0,0,.16);
  transition:transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color:transparent;
}

.brand-card.image-card:hover{
  box-shadow:0 22px 40px rgba(0,0,0,.18);
}

.brand-card.image-card:active{
  transform:scale(.985);
}

.carrier-button-image{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2048 / 640;
  object-fit:cover;
  object-position:center;
  border-radius:28px;
  image-rendering:auto;
}

/* fallback si alguna imagen no carga */
.brand-card.image-card .brand-name{
  width:100%;
  display:block;
  padding:24px 22px;
  border-radius:28px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:18px;
  font-weight:800;
  text-align:left;
}

@media (max-width: 1024px){
  .brand-menu{
    width:min(100%, 680px);
  }
}

@media (max-width: 768px){
  .brand-menu{
    width:100%;
    gap:14px;
  }

  .brand-card.image-card{
    border-radius:24px !important;
  }

  .carrier-button-image,
  .brand-card.image-card .brand-name{
    border-radius:24px;
  }
}

@media (max-width: 480px){
  .brand-menu{
    gap:12px;
  }

  .brand-card.image-card{
    border-radius:22px !important;
  }

  .carrier-button-image,
  .brand-card.image-card .brand-name{
    border-radius:22px;
  }
}


/* ===== v13: selects y modalidad Pospago ===== */
.field select{
  width:100%;
  min-height:50px;
  border:1px solid var(--line);
  outline:0;
  border-radius:14px;
  background:#152b50;
  color:#fff;
  padding:12px 42px 12px 13px;
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg,transparent 50%,#8ea5c2 50%),
    linear-gradient(135deg,#8ea5c2 50%,transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 12px) calc(50% - 2px);
  background-size:6px 6px,6px 6px;
  background-repeat:no-repeat;
}
.field select:focus{
  border-color:rgba(86,213,255,.58);
  box-shadow:0 0 0 3px rgba(86,213,255,.08);
}
.field select option{
  background:#fff;
  color:#111827;
}


/* ===== v15: cuentas, login y administración ===== */
body.auth-loading{
  overflow:hidden;
}
body.auth-loading .app{
  visibility:hidden;
  pointer-events:none;
}
.auth-gate{
  position:fixed;
  inset:0;
  z-index:300;
  display:grid;
  place-items:center;
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 82% 8%,rgba(47,140,255,.25),transparent 32%),
    linear-gradient(180deg,#071a39,#06152f);
  overflow:auto;
}
.auth-gate.hidden{
  display:none;
}
.auth-card{
  width:min(100%,430px);
  padding:28px 22px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:28px;
  background:rgba(10,31,67,.88);
  box-shadow:0 28px 80px rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
}
.auth-mark{
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  border-radius:20px;
  background:linear-gradient(135deg,#2f8cff,#25c6a3);
  color:#fff;
  font-size:30px;
  font-weight:900;
}
.auth-card h1{
  margin:7px 0 8px;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.035em;
}
.auth-card p{
  margin:0 0 20px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.auth-form{
  display:grid;
  gap:13px;
}
.auth-form label,
.admin-form label,
.admin-edit-grid label{
  display:grid;
  gap:7px;
  color:#c5d1e2;
  font-size:12px;
  font-weight:700;
}
.auth-form input,
.admin-form input,
.admin-form textarea,
.admin-edit-grid input,
.admin-edit-grid textarea,
.pin-reset-row input{
  width:100%;
  min-height:50px;
  border:1px solid var(--line);
  outline:0;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:12px 13px;
}
.auth-form input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-edit-grid input:focus,
.admin-edit-grid textarea:focus,
.pin-reset-row input:focus{
  border-color:rgba(86,213,255,.58);
  box-shadow:0 0 0 3px rgba(86,213,255,.08);
}
.admin-form textarea,
.admin-edit-grid textarea{
  min-height:78px;
  resize:vertical;
}
.session-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
  padding:13px 14px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:17px;
  background:rgba(255,255,255,.04);
}
.session-bar>div:first-child{
  min-width:0;
}
.session-bar span,
.session-bar small{
  display:block;
  color:#8196b2;
  font-size:10.5px;
}
.session-bar strong{
  display:block;
  margin:3px 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:13px;
}
.session-actions{
  display:flex;
  gap:7px;
  flex:0 0 auto;
}
.mini-action{
  min-height:36px;
  padding:0 11px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:11px;
  background:rgba(255,255,255,.06);
  color:#fff;
  font-size:11px;
  font-weight:800;
}
.mini-action.danger{
  border-color:rgba(255,98,98,.18);
  background:rgba(255,98,98,.09);
  color:#ffb4b4;
}
.admin-create-card{
  margin-top:8px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.045);
}
.admin-create-card h2,
.admin-list-head h2{
  margin:0;
  font-size:16px;
}
.admin-form{
  display:grid;
  gap:12px;
  margin-top:14px;
}
.admin-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin:22px 2px 10px;
}
.admin-list-head p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:11px;
}
.admin-users-list{
  display:grid;
  gap:12px;
}
.admin-user-card{
  padding:17px;
  border:1px solid var(--line);
  border-radius:20px;
  background:rgba(255,255,255,.045);
}
.admin-user-card.disabled{
  opacity:.68;
}
.admin-user-title{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}
.admin-user-title strong{
  display:block;
  font-size:16px;
}
.admin-user-title span:not(.user-state){
  display:block;
  margin-top:4px;
  color:#7f93ae;
  font-size:11px;
}
.user-state{
  padding:7px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:850;
}
.user-state.on{
  background:rgba(56,216,120,.12);
  color:#57e58f;
}
.user-state.off{
  background:rgba(255,98,98,.11);
  color:#ff9b9b;
}
.admin-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:15px;
}
.admin-edit-grid .full{
  grid-column:1/-1;
}
.admin-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:12px;
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,.07);
  color:#8196b2;
  font-size:10.5px;
}
.admin-meta strong{
  color:#b8c8dc;
  font-weight:700;
}
.admin-user-actions{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.pin-reset-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  margin-top:10px;
}
.admin-empty{
  padding:24px 18px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:18px;
  color:#8196b2;
  text-align:center;
  font-size:12px;
}
.admin-empty.error{
  color:#ff9b9b;
}
@media(max-width:480px){
  .session-bar{
    align-items:flex-start;
    flex-direction:column;
  }
  .session-actions{
    width:100%;
  }
  .session-actions .mini-action{
    flex:1;
  }
  .admin-edit-grid{
    grid-template-columns:1fr;
  }
  .admin-edit-grid .full{
    grid-column:auto;
  }
  .pin-reset-row{
    grid-template-columns:1fr;
  }
}


/* ===== v16: historial de órdenes y estados ===== */
.orders-shortcut{
  margin-top:14px;
}
.orders-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:10px 0 14px;
}
.orders-summary article{
  min-width:0;
  padding:13px 8px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  background:rgba(255,255,255,.045);
  text-align:center;
}
.orders-summary span{
  display:block;
  color:#8196b2;
  font-size:9.5px;
  line-height:1.15;
}
.orders-summary strong{
  display:block;
  margin-top:5px;
  font-size:20px;
}
.orders-toolbar{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}
.orders-toolbar input,
.orders-toolbar select,
.order-admin-controls select,
.order-admin-controls textarea{
  width:100%;
  min-height:43px;
  border:1px solid var(--line);
  outline:0;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:10px 11px;
}
.orders-toolbar input{
  grid-column:1/-1;
}
.orders-toolbar .mini-action{
  grid-column:1/-1;
}
.orders-toolbar select option,
.order-admin-controls select option{
  color:#111;
}
.orders-live-note{
  display:flex;
  align-items:center;
  gap:7px;
  margin:10px 2px 14px;
  color:#8196b2;
  font-size:10px;
}
.orders-live-note small{
  margin-left:auto;
  color:#6f829c;
}
.live-dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:#46d58b;
  box-shadow:0 0 0 4px rgba(70,213,139,.09);
}
.orders-list{
  display:grid;
  gap:12px;
}
.order-card{
  padding:17px;
  border:1px solid var(--line);
  border-radius:21px;
  background:rgba(255,255,255,.045);
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}
.order-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.order-card-head>div{
  min-width:0;
}
.order-folio{
  display:block;
  margin-bottom:6px;
  color:#7f93ae;
  font-size:10px;
  font-weight:750;
  letter-spacing:.02em;
}
.order-card-head strong{
  display:block;
  font-size:16px;
}
.order-card-head small{
  display:block;
  margin-top:4px;
  color:#9aacbf;
  font-size:11px;
}
.order-status{
  flex:0 0 auto;
  max-width:118px;
  padding:7px 9px;
  border-radius:999px;
  background:rgba(109,137,178,.13);
  color:#bdd0eb;
  text-align:center;
  font-size:9.5px;
  font-weight:850;
}
.order-status.recibida{
  background:rgba(86,159,255,.12);
  color:#9fc9ff;
}
.order-status.en-revision{
  background:rgba(255,191,71,.12);
  color:#ffd17d;
}
.order-status.en-proceso{
  background:rgba(65,174,255,.13);
  color:#8cd1ff;
}
.order-status.completada{
  background:rgba(70,213,139,.13);
  color:#73e6a6;
}
.order-status.incidencia{
  background:rgba(255,149,66,.13);
  color:#ffb579;
}
.order-status.rechazada{
  background:rgba(255,89,89,.12);
  color:#ff9a9a;
}
.order-client{
  margin-top:13px;
  padding:10px 12px;
  border-radius:13px;
  background:rgba(255,255,255,.035);
}
.order-client span,
.order-client small{
  display:block;
  color:#8196b2;
  font-size:9.5px;
}
.order-client strong{
  display:block;
  margin:3px 0;
  font-size:12px;
}
.order-message{
  margin-top:13px;
  padding:13px;
  border-radius:14px;
  background:rgba(47,140,255,.07);
}
.order-message.empty{
  background:rgba(255,255,255,.025);
}
.order-message span{
  color:#7f93ae;
  font-size:9.5px;
  font-weight:750;
}
.order-message p{
  margin:5px 0 0;
  color:#d8e4f2;
  font-size:12px;
  line-height:1.45;
}
.order-times{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.order-times div{
  padding-top:9px;
  border-top:1px solid rgba(255,255,255,.06);
}
.order-times span{
  display:block;
  color:#6f829c;
  font-size:9px;
}
.order-times strong{
  display:block;
  margin-top:3px;
  color:#aebed1;
  font-size:10.5px;
}
.order-admin-controls{
  display:grid;
  gap:10px;
  margin-top:15px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}
.order-admin-controls label{
  display:grid;
  gap:6px;
  color:#b9c8da;
  font-size:10.5px;
  font-weight:750;
}
.order-admin-controls textarea{
  min-height:86px;
  resize:vertical;
  line-height:1.4;
}
.compact-primary{
  min-height:44px;
}
@media(max-width:480px){
  .orders-summary{
    grid-template-columns:repeat(2,1fr);
  }
  .orders-toolbar{
    grid-template-columns:1fr;
  }
  .orders-toolbar input,
  .orders-toolbar .mini-action{
    grid-column:auto;
  }
  .orders-live-note{
    flex-wrap:wrap;
  }
  .orders-live-note small{
    width:100%;
    margin-left:14px;
  }
  .order-card-head{
    gap:8px;
  }
  .order-times{
    grid-template-columns:1fr;
  }
}


/* ===== v17: roles Cliente / Administrador ===== */
.admin-form select,
.admin-edit-grid select{
  width:100%;
  min-height:50px;
  border:1px solid var(--line);
  outline:0;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  color:#fff;
  padding:12px 13px;
}
.admin-form select option,
.admin-edit-grid select option{
  color:#111;
}
.role-help,
.master-protection-note{
  padding:10px 12px;
  border:1px solid rgba(86,159,255,.12);
  border-radius:12px;
  background:rgba(86,159,255,.06);
  color:#91a8c4;
  font-size:10.5px;
  line-height:1.4;
}
.master-protection-note{
  margin-top:12px;
  border-color:rgba(70,213,139,.12);
  background:rgba(70,213,139,.06);
  color:#a8cfb7;
}
.account-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:6px;
}
.role-badge{
  padding:7px 9px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:850;
}
.role-badge.client{
  background:rgba(86,159,255,.12);
  color:#a9ceff;
}
.role-badge.admin{
  background:rgba(177,113,255,.13);
  color:#d2b2ff;
}


/* ===== v18: filtros rápidos para administradores ===== */
.admin-filter-panel{
  margin:0 0 13px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.035);
}
.admin-filter-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.admin-filter-title strong{
  font-size:12px;
}
.text-action{
  border:0;
  background:transparent;
  color:#8ebcff;
  font-size:10.5px;
  font-weight:800;
}
.admin-user-filters{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.admin-user-filters input,
.admin-user-filters select{
  width:100%;
  min-height:43px;
  border:1px solid var(--line);
  outline:0;
  border-radius:12px;
  background:rgba(255,255,255,.055);
  color:#fff;
  padding:9px 10px;
  font-size:11px;
}
.admin-user-filters input{
  grid-column:1/-1;
}
.admin-user-filters select option{
  color:#111;
}
.filter-result-count{
  margin-top:8px;
  color:#7f93ae;
  font-size:10px;
}
.orders-toolbar.enhanced{
  grid-template-columns:1fr 1fr;
}
.orders-toolbar.enhanced .admin-only-filter{
  grid-column:1/-1;
}
.orders-toolbar.enhanced .orders-toolbar-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  grid-column:1/-1;
}
.orders-toolbar.enhanced .filter-result-count{
  grid-column:1/-1;
  margin-top:0;
}
@media(max-width:480px){
  .admin-user-filters{
    grid-template-columns:1fr;
  }
  .admin-user-filters input{
    grid-column:auto;
  }
  .orders-toolbar.enhanced{
    grid-template-columns:1fr;
  }
  .orders-toolbar.enhanced .admin-only-filter,
  .orders-toolbar.enhanced .orders-toolbar-actions,
  .orders-toolbar.enhanced .filter-result-count{
    grid-column:auto;
  }
}


/* ===== v18.3: mostrar / ocultar NIP o contraseña ===== */
.password-field{
  position:relative;
  display:block;
}
.password-field input{
  padding-right:52px;
}
.password-toggle{
  position:absolute;
  top:50%;
  right:7px;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  transform:translateY(-50%);
  border:0;
  border-radius:11px;
  background:transparent;
  color:#9fb1c8;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.password-toggle:hover,
.password-toggle:focus-visible{
  background:rgba(255,255,255,.07);
  color:#fff;
  outline:none;
}
.eye-icon{
  position:relative;
  width:20px;
  height:13px;
  display:block;
  border:2px solid currentColor;
  border-radius:70% 15% / 70% 15%;
  transform:rotate(45deg);
}
.eye-icon::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
}
.password-toggle.is-visible .eye-icon::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:25px;
  height:2px;
  border-radius:99px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(-45deg);
  box-shadow:0 0 0 2px rgba(10,31,67,.88);
}


/* ===== v18.5: simulador exclusivo para administradores ===== */
.admin-only.hidden{
  display:none !important;
}


/* ===== v19: AT&T Pospago ===== */
.form-section-title{
  grid-column:1/-1;
  margin:12px 0 2px;
  padding:10px 2px 7px;
  border-bottom:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  color:#d8e8ff;
}
.form-section-title:first-child{
  margin-top:0;
}