/* ===== ConnectTV – Panel de transferencias ===== */
:root{
  --gold:#f6b92b; --gold-light:#ffd45e; --gold-dark:#e59a12;
  --navy-900:#050d22; --navy-800:#071231; --navy-700:#0a1736;
  --blue-line:#3a86ff; --text-soft:#cfdcf5;
}
*{box-sizing:border-box}
body{margin:0;background:var(--navy-900);font-family:Poppins,Arial,sans-serif;color:#fff}
button{font-family:inherit}

.app{position:relative;display:flex;width:100%;min-height:941px;overflow:hidden;
  background:radial-gradient(1200px 700px at 70% 0%,#0d2457 0%,var(--navy-800) 55%,var(--navy-900) 100%)}
.app::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(500px 220px at 88% 6%,#f6b92b33,transparent 70%),
             radial-gradient(600px 300px at 0% 100%,#f6b92b2e,transparent 70%),
             radial-gradient(700px 400px at 50% 30%,#1f6be022,transparent 70%)}

/* ----- Barra lateral ----- */
.side{position:relative;z-index:1;width:244px;flex:none;display:flex;flex-direction:column;
  padding:38px 18px 24px 17px;border-right:1px solid #12306b;background:linear-gradient(180deg,#071536,var(--navy-900))}
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:34px}
.brand img{filter:drop-shadow(0 0 12px #f6b92b66)}
.brand b{font-size:30px;font-weight:700;letter-spacing:-.5px;margin-top:6px}
.brand b em,.promo b span{font-style:normal;color:var(--gold)}
.nav{display:flex;align-items:center;gap:25px;height:54px;margin-bottom:19px;padding:0 0 0 9px;border-radius:14px;
  background:#0b1a3d;border:1px solid #14295a;color:#fff;text-decoration:none;font-size:16px;font-weight:500;transition:.15s}
.nav img{flex:none}
.nav:hover{border-color:var(--gold)}
.nav.on{background:linear-gradient(180deg,#ffc83d,var(--gold-dark));color:var(--navy-700);border-color:var(--gold-light);
  box-shadow:0 0 24px #f6b92bcc,inset 0 1px 0 #fff6}
.promo{margin-top:auto;border-radius:18px;padding:16px 10px 18px;text-align:center;
  background:linear-gradient(160deg,#0f2a63,var(--navy-700));border:1px solid #f6b92b55;
  box-shadow:0 0 26px #f6b92b66,inset 0 0 20px #f6b92b22}
.promo img{display:block;margin:0 auto}
.promo b{display:block;font-size:26px;line-height:1.1}
.promo i{display:block;font-size:14px;color:#dbe6ff;margin-top:6px;line-height:1.35}

/* ----- Contenido ----- */
.main{position:relative;z-index:1;flex:1;min-width:0;padding:0 24px 64px 36px}
.banner-top{position:absolute;right:0;top:0;z-index:3}
.hit{position:absolute;top:8px;width:46px;height:46px;z-index:4;background:none;border:0;padding:0;cursor:pointer;border-radius:50%}
.hit:focus-visible{outline:2px solid var(--gold)}

.head{position:relative;height:185px;display:flex;gap:22px;align-items:flex-start;padding-top:36px}
.head .big{filter:drop-shadow(0 0 8px #f6b92bcc);flex:none}
.head h1{margin:0;font-size:40px;line-height:1.1;font-weight:700}
.head p{margin:8px 0 0;max-width:560px;font-size:18px;line-height:1.35;color:var(--text-soft)}
.swoosh{position:absolute;right:-24px;top:0;width:760px;height:200px;pointer-events:none}
.slogan{position:absolute;right:230px;top:50px;transform:rotate(-6deg);text-align:center;font-style:italic;font-weight:700;
  font-size:30px;line-height:1.1;color:#ffcb45;text-shadow:0 0 14px #f6b92b66}
.slogan b{color:#fff;font-size:36px;text-shadow:0 0 16px #ffffff55}

/* ----- Tarjetas ----- */
.cards{display:grid;grid-template-columns:405fr 418fr 497fr;gap:24px;height:205px}
.card{position:relative;display:flex;align-items:center;padding:0 22px;overflow:hidden;border-radius:18px;
  border:2px solid var(--blue-line);background:linear-gradient(135deg,#0e2a66,#081a42);
  box-shadow:0 0 26px #2f7bff88,inset 0 0 28px #2f7bff33}
.card h3{margin:0;font-size:23px;font-weight:600}
.card .wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%;pointer-events:none}
.coin{margin-right:20px;flex:none}
.amount{font-size:52px;font-weight:700;line-height:1.1}
.qr{margin-right:26px;flex:none}
.code small{display:block;font-size:18px;font-weight:500}
.code strong{display:block;font-size:26px;margin:4px 0 12px}
.secure{gap:26px;background:linear-gradient(135deg,#0d2a66,#0a1d4a)}
.secure>*{position:relative;z-index:1}
.secure .wave{position:absolute;z-index:0}
.secure h3{font-size:30px;font-weight:700;line-height:1.12}
.secure i{display:block;margin-top:8px;font-size:20px;color:#e8efff}

/* ----- Botones ----- */
.btn{position:relative;z-index:1;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 24px;
  border-radius:12px;border:2px solid var(--gold);font-size:18px;font-weight:600;cursor:pointer;color:var(--gold);background:transparent;transition:.15s}
.btn svg{width:24px;height:24px}
.btn.gold{background:linear-gradient(180deg,#ffc83d,#f0a416);color:var(--navy-700)}
.btn:hover{filter:brightness(1.12)}
.btn:focus-visible,.act:focus-visible{outline:3px solid #fff}

/* ----- Movimientos ----- */
.panel{margin-top:33px;min-height:305px;border-radius:18px;border:2px solid #2f6fd0;background:#081a42cc;
  box-shadow:0 0 22px #2f7bff55;overflow:hidden}
.ph{display:flex;align-items:center;gap:14px;height:82px;padding:0 24px}
.ph h2{margin:0;font-size:27px;font-weight:600;flex:1}
.ph .btn{height:48px;font-size:17px;font-weight:500;color:#fff;border-radius:24px;padding:0 26px;border-color:var(--gold)}
.scroll{overflow-x:auto}
.cols,.row{display:grid;grid-template-columns:367px 1fr 232px 150px;align-items:center;padding-left:28px;font-size:18px;min-width:760px}
.cols{height:52px;background:#0d2150;font-weight:500}
.row{height:55px;margin-right:24px;border-bottom:1px solid #15306a;animation:in .35s ease}
.row:last-child{border-bottom:0}
.row strong{font-weight:600}
.neg{color:#ff4d4d}.pos{color:#19e07a}
.pill{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:4px 16px 4px 14px;border-radius:20px;font-size:17px;font-weight:500}
.pill i{width:12px;height:12px;border-radius:50%;background:currentColor}
.pill.r{background:#3d1626;color:#ff6b6b;border:1px solid #6b2236}
.pill.g{background:#0d3a2c;color:#22e58a;border:1px solid #14634a}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ----- Acciones ----- */
.acts{display:grid;grid-template-columns:446fr 440fr 432fr;gap:24px;margin-top:38px}
.act{height:110px;display:flex;align-items:center;gap:22px;padding:0 30px;border-radius:18px;border:3px solid var(--gold);
  background:linear-gradient(180deg,#0a1b45,#071230);color:#fff;text-align:left;cursor:pointer;
  box-shadow:0 0 22px #f6b92b77,inset 0 0 18px #f6b92b22;transition:.15s}
.act:hover{background:#0d2257}
.act img{flex:none}
.act b{display:block;font-size:28px;font-weight:600}
.act small{display:block;font-size:18px;color:#dbe6ff;margin-top:2px}

/* ----- Ventana emergente y aviso ----- */
dialog{width:min(440px,92vw);padding:28px;border-radius:18px;border:2px solid var(--gold);color:#fff;
  background:linear-gradient(160deg,#0f2a63,var(--navy-700));box-shadow:0 0 40px #f6b92b66}
dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}
dialog h3{margin:0 0 6px;font-size:26px}
dialog p{margin:0 0 16px;color:var(--text-soft)}
dialog label{display:block;margin-bottom:14px;font-weight:500}
dialog input{display:block;width:100%;margin-top:6px;height:46px;padding:0 14px;border-radius:10px;border:2px solid #2f6fd0;
  background:#071231;color:#fff;font:500 17px Poppins,Arial,sans-serif}
dialog input:focus{outline:none;border-color:var(--gold)}
.error{min-height:20px;color:#ff6b6b;font-size:15px}
.modal-actions{display:flex;justify-content:flex-end;gap:12px}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:50;
  padding:12px 22px;border-radius:12px;background:#0d3a2c;border:1px solid #14634a;color:#22e58a;font-weight:500;transition:.3s}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ----- Adaptable ----- */
@media (max-width:1100px){
  .side{display:none}
  .cards,.acts{grid-template-columns:1fr}
  .cards{height:auto}.card{min-height:205px}
  .slogan,.swoosh{display:none}
  .head{height:auto;padding-bottom:24px}
}

/* ===== Vistas y pantalla de Inicio ===== */
.view[hidden]{display:none}
.panel.auto{min-height:0}
.stat-box{position:relative;z-index:1;width:100%}
.stat-box h3{margin-bottom:10px}
.stat-box dl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 28px}
.stat-box dl div{display:flex;flex-direction:column}
.stat-box dt{font-size:14px;color:var(--text-soft)}
.stat-box dd{margin:0;font-size:24px;font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;padding:0 24px 26px}
.tile{display:flex;align-items:center;gap:16px;padding:16px 18px;border-radius:16px;border:2px solid #2f6fd0;
  background:linear-gradient(135deg,#0e2a66,#081a42);color:#fff;text-align:left;cursor:pointer;
  box-shadow:0 0 16px #2f7bff44;transition:.15s}
.tile:hover{border-color:var(--gold);box-shadow:0 0 22px #f6b92b66;transform:translateY(-2px)}
.tile:focus-visible{outline:3px solid #fff}
.tile img{flex:none}
.tile b{display:block;font-size:19px;font-weight:600}
.tile small{display:block;font-size:14px;color:var(--text-soft)}
.empty{padding:22px 28px;color:var(--text-soft)}
.empty-art{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:22px 28px;color:var(--text-soft)}
.empty-art img{width:140px;height:auto;max-width:60%;filter:drop-shadow(0 8px 18px #f6b92b44)}
.empty-art p{margin:0 0 6px}
.empty-art.sm{padding:14px 10px}
.empty-art.sm img{width:100px}
.toast{display:flex;align-items:center;gap:10px}
.toast img{width:28px;height:28px;object-fit:contain;flex:none}
.soon{padding:40px;text-align:center}
.soon h2{margin:0 0 8px;font-size:30px}
.soon p{margin:0 0 22px;color:var(--text-soft)}

/* ===== Tienda ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-bottom:26px}
.search input,.sort select{height:46px;padding:0 16px;border-radius:12px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 16px Poppins,Arial,sans-serif}
.search input{width:280px}
.search input:focus,.sort select:focus{outline:none;border-color:var(--gold)}
.sort{display:flex;align-items:center;gap:10px;margin-left:auto;font-weight:500;color:var(--text-soft)}
.sort select{padding-right:10px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{height:42px;padding:0 20px;border-radius:21px;border:2px solid #2f6fd0;background:#0b1a3d;color:#fff;font-size:15px;font-weight:500;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--gold)}
.chip.on{background:linear-gradient(180deg,#ffc83d,var(--gold-dark));color:var(--navy-700);border-color:var(--gold-light);box-shadow:0 0 16px #f6b92b99}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:24px}
.product{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;border:2px solid var(--blue-line);
  background:linear-gradient(160deg,#0e2a66,#081a42);box-shadow:0 0 22px #2f7bff55;transition:.2s}
.product:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 0 28px #f6b92b77}
.p-img{aspect-ratio:2/3;padding:8px;background:radial-gradient(circle at 50% 40%,#12307a,#071231);display:flex;align-items:center;justify-content:center}
.p-img img{width:100%;height:100%;object-fit:contain}
.p-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.tag{align-self:flex-start;font-size:12px;font-weight:600;letter-spacing:.3px;color:var(--gold);background:#f6b92b1f;border:1px solid #f6b92b66;border-radius:10px;padding:2px 10px}
.product h3{margin:0;font-size:17px;font-weight:600;line-height:1.25}
.p-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.p-foot strong{font-size:24px}
.p-foot .btn{height:42px;padding:0 20px;font-size:16px}
.buy-top{display:flex;gap:18px;margin-bottom:16px}
.buy-top img{border-radius:10px;object-fit:contain;background:#071231;flex:none}
.buy-top h3{margin:8px 0 6px}
.buy-sum{margin:0 0 8px;border-radius:12px;background:#071231;border:1px solid #14295a;padding:6px 16px}
.buy-sum div{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #14295a}
.buy-sum div:last-child{border-bottom:0;font-weight:700}
.buy-sum dt{color:var(--text-soft)}.buy-sum dd{margin:0;font-weight:600}
.modal-actions .btn[hidden]{display:none}
@media (max-width:1100px){.sort{margin-left:0}.search input{width:100%}}


/* ===== Barra superior, notificaciones y carrito ===== */
.topbar{position:absolute;top:8px;right:6px;z-index:5;display:flex;gap:10px}
.tb-btn{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid var(--gold);background:#0b1a3d;color:var(--gold);
  display:grid;place-items:center;cursor:pointer;transition:.15s;padding:0}
.tb-btn svg{width:24px;height:24px}
.tb-btn:hover{background:#12307a;box-shadow:0 0 16px #f6b92b88}
.tb-btn:focus-visible{outline:3px solid #fff}
.badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ff4d4d;color:#fff;
  font-size:12px;font-weight:700;display:grid;place-items:center;border:2px solid var(--navy-900)}
.badge[hidden]{display:none}
.dropdown{position:absolute;top:62px;right:6px;z-index:6;width:min(360px,92vw);max-height:420px;overflow:auto;border-radius:16px;
  border:2px solid var(--gold);background:linear-gradient(160deg,#0f2a63,var(--navy-700));box-shadow:0 0 30px #f6b92b66;padding:8px}
.dropdown[hidden]{display:none}
.dd-head{display:flex;justify-content:space-between;align-items:center;padding:8px 10px 10px;border-bottom:1px solid #14295a}
.link{background:none;border:0;color:var(--gold);cursor:pointer;font:500 13px Poppins,Arial,sans-serif;text-decoration:underline}
.notif{padding:10px;border-bottom:1px solid #14295a;font-size:14px;line-height:1.35}
.notif:last-child{border-bottom:0}
.notif.new{background:#f6b92b14;border-radius:10px}
.notif small{display:block;color:var(--text-soft);margin-top:2px}
.dd-item{display:block;width:100%;text-align:left;padding:10px 12px;border:0;border-radius:10px;background:none;color:#fff;
  font:500 15px Poppins,Arial,sans-serif;cursor:pointer}
.dd-item:hover{background:#12307a}
.dd-user{padding:10px 12px;border-bottom:1px solid #14295a;margin-bottom:4px}
.dd-user small{display:block;color:var(--text-soft)}

/* ===== Carrito ===== */
#cartModal{width:min(560px,94vw)}
.cart-row{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #14295a}
.cart-row img{width:56px;height:56px;object-fit:contain;border-radius:8px;background:#071231}
.cart-row b{display:block;font-size:15px;line-height:1.25}
.cart-row small{color:var(--text-soft)}
.qty{display:flex;align-items:center;gap:6px;justify-content:flex-end}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--gold);background:transparent;color:var(--gold);font-size:18px;cursor:pointer;line-height:1}
.qty span{min-width:22px;text-align:center;font-weight:600}
.cart-empty{padding:26px 0;text-align:center;color:var(--text-soft)}
#cartItems{max-height:300px;overflow:auto;margin-bottom:12px}
.p-foot{flex-wrap:wrap}
.p-foot .btn.add{padding:0 14px;flex:none}
.p-foot .btns{display:flex;gap:8px;flex:1 1 100%}
.p-foot .btns .gold{flex:1;justify-content:center;padding:0 12px}
.nav[hidden]{display:none}

/* ===== Autenticación ===== */
#authModal{width:min(460px,94vw)}
.tabs{display:flex;gap:6px;margin-bottom:16px;background:#071231;border-radius:12px;padding:4px}
.tab{flex:1;height:40px;border:0;border-radius:9px;background:transparent;color:var(--text-soft);font:600 14px Poppins,Arial,sans-serif;cursor:pointer}
.tab.on{background:linear-gradient(180deg,#ffc83d,var(--gold-dark));color:var(--navy-700)}
label[hidden]{display:none}

/* ===== Administración ===== */
.adm-table{min-width:640px;padding:0 24px 20px}
.adm-row{display:grid;grid-template-columns:1.6fr 1fr 1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #15306a;font-size:15px}
.adm-row.head{font-weight:600;color:var(--text-soft);background:none}
.adm-row .acts-mini{display:flex;gap:8px}
.mini{height:34px;padding:0 14px;border-radius:9px;border:1.5px solid var(--gold);background:transparent;color:var(--gold);font:500 13px Poppins,Arial,sans-serif;cursor:pointer}
.mini.danger{border-color:#ff6b6b;color:#ff6b6b}
.adm-form{display:flex;gap:12px;padding:0 24px 24px;flex-wrap:wrap}
.adm-form input{flex:1;min-width:220px;height:46px;padding:0 14px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 16px Poppins,Arial,sans-serif}
.adm-form input:focus{outline:none;border-color:var(--gold)}
#prodModal label{margin-bottom:10px}

/* ---------- Carrusel de banners (Inicio) ---------- */
.hero{position:relative;margin:0 0 22px;border-radius:18px;overflow:hidden;border:1px solid #f6b92b55;box-shadow:0 8px 28px #0008;background:#0a1330}
.hero-track{display:flex;transition:transform .6s ease}
.hero-slide{flex:0 0 100%;display:block;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:1981/793}
.hero-slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero-nav{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:1px solid #f6b92b99;background:#0a1330cc;color:#f6b92b;display:grid;place-items:center;cursor:pointer;opacity:0;transition:opacity .2s}
.hero-nav svg{width:22px;height:22px}
.hero:hover .hero-nav,.hero-nav:focus-visible{opacity:1}
.hero-nav.prev{left:12px}.hero-nav.next{right:12px}
.hero-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:8px}
.hero-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:#ffffff80;cursor:pointer}
.hero-dots button.on{background:#f6b92b;width:26px;border-radius:6px}
@media (hover:none){.hero-nav{display:none}}
@media (prefers-reduced-motion:reduce){.hero-track{transition:none}}


/* ===== Tema claro ===== */
html[data-theme="dark"]{color-scheme:dark}
html[data-theme="light"]{color-scheme:light;--text-soft:#4a5b80;--navy-900:#eef3fb;--navy-800:#f6f9fe}
html[data-theme="light"] body{background:#eef3fb;color:#0b1a3d}
html[data-theme="light"] .app{background:radial-gradient(1000px 600px at 70% 0,#fff,#eef3fb 60%,#e1eaf8)}
html[data-theme="light"] .app::before{opacity:.45}
html[data-theme="light"] .side{background:#fff;border-right-color:#d5e0f3}
html[data-theme="light"] .brand b{color:#0b1a3d}
html[data-theme="light"] .nav{background:#f1f5fc;border-color:#d5e0f3;color:#0b1a3d}
html[data-theme="light"] .nav.on{background:linear-gradient(180deg,#ffc83d,#e59a12);color:#0a1736;border-color:#ffd45e}
html[data-theme="light"] .promo{color:#fff}
html[data-theme="light"] .head p,html[data-theme="light"] .sort,html[data-theme="light"] .empty,html[data-theme="light"] .empty-art,html[data-theme="light"] .soon p{color:#4a5b80}
html[data-theme="light"] .slogan{color:#c47f00}
html[data-theme="light"] .slogan b{color:#0b1a3d;text-shadow:none}
html[data-theme="light"] .card{color:#fff}
html[data-theme="light"] .btn{color:#a86a00}
html[data-theme="light"] .card .btn:not(.gold){color:var(--gold)}
html[data-theme="light"] .btn.gold{color:#0a1736}
html[data-theme="light"] .ph .btn{color:#0b1a3d}
html[data-theme="light"] .panel{background:#fffffff2;border-color:#bcd0f0;box-shadow:0 6px 22px #2f7bff1f}
html[data-theme="light"] .cols{background:#e6eefb}
html[data-theme="light"] .row,html[data-theme="light"] .dd-head,html[data-theme="light"] .notif,html[data-theme="light"] .dd-user,html[data-theme="light"] .cart-row,html[data-theme="light"] .adm-row{border-color:#dbe5f6}
html[data-theme="light"] .neg{color:#d62f2f}
html[data-theme="light"] .pos{color:#0e9f5a}
html[data-theme="light"] .pill.r{background:#ffe9ec;color:#c0283d;border-color:#f3b8c0}
html[data-theme="light"] .pill.g{background:#dff7ec;color:#0e8a58;border-color:#a6e3c8}
html[data-theme="light"] .act{background:#fff;color:#0b1a3d;box-shadow:0 6px 18px #f6b92b55}
html[data-theme="light"] .act small{color:#4a5b80}
html[data-theme="light"] .act:hover{background:#fff7e0}
html[data-theme="light"] dialog{background:#fff;color:#0b1a3d;box-shadow:0 10px 40px #0b1a3d44}
html[data-theme="light"] dialog input,html[data-theme="light"] .search input,html[data-theme="light"] .sort select,html[data-theme="light"] .adm-form input{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
html[data-theme="light"] .tile{background:#fff;color:#0b1a3d;border-color:#bcd0f0;box-shadow:0 4px 14px #2f7bff1f}
html[data-theme="light"] .chip{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
html[data-theme="light"] .chip.on{background:linear-gradient(180deg,#ffc83d,#e59a12);color:#0a1736;border-color:#ffd45e}
html[data-theme="light"] .product{background:#fff;border-color:#bcd0f0;box-shadow:0 6px 18px #2f7bff22}
html[data-theme="light"] .p-img{background:radial-gradient(circle at 50% 40%,#fff,#dfe8f7)}
html[data-theme="light"] .tag,html[data-theme="light"] .link,html[data-theme="light"] .mini,html[data-theme="light"] .qty button{color:#a86a00}
html[data-theme="light"] .mini.danger{color:#d62f2f}
html[data-theme="light"] .buy-top img,html[data-theme="light"] .cart-row img{background:#eef3fb}
html[data-theme="light"] .buy-sum,html[data-theme="light"] .tabs{background:#eef3fb;border-color:#d5e0f3}
html[data-theme="light"] .tb-btn{background:#fff;color:#a86a00}
html[data-theme="light"] .tb-btn:hover{background:#fff7e0}
html[data-theme="light"] .dropdown{background:#fff;box-shadow:0 10px 30px #0b1a3d33}
html[data-theme="light"] .dd-item{color:#0b1a3d}
html[data-theme="light"] .dd-item:hover{background:#eef3fb}
html[data-theme="light"] .hero{box-shadow:0 8px 24px #0b1a3d33}
html[data-theme="light"] .error{color:#c0283d}

/* ===== Mejoras de diseño ===== */
html{scroll-behavior:smooth}
.app{min-height:100vh;min-height:100dvh}
.view:not([hidden]){animation:in .35s ease}
.feat{padding:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
.feat-grid{padding:0 24px 26px}
.btn,.tile,.chip,.act,.tb-btn,.nav{-webkit-tap-highlight-color:transparent}
.act:hover,.tile:hover{transform:translateY(-2px)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
html[data-theme="light"] :focus-visible{outline-color:#a86a00}
*{scrollbar-width:thin;scrollbar-color:#f6b92b88 transparent}

/* ===== Responsive: tablet y teléfono ===== */
@media (max-width:1100px){
  .side{display:flex;position:fixed;left:0;right:0;bottom:0;top:auto;width:auto;flex-direction:row;padding:6px 8px calc(6px + env(safe-area-inset-bottom));
    border-right:0;border-top:1px solid #12306b;z-index:40;background:linear-gradient(180deg,#071536,#050d22)}
  html[data-theme="light"] .side{border-top-color:#d5e0f3;background:#fff}
  .brand,.promo{display:none}
  #nav{display:flex;gap:6px;width:100%;overflow-x:auto;scrollbar-width:none}
  #nav::-webkit-scrollbar{display:none}
  .nav{flex:1 0 70px;flex-direction:column;justify-content:center;gap:2px;height:58px;margin:0;padding:4px 2px;font-size:11px;text-align:center;border-radius:12px}
  .nav img{width:26px;height:26px}
  .nav span{white-space:nowrap}
  .nav.on{box-shadow:0 0 14px #f6b92bcc}
  .main{padding:0 16px calc(96px + env(safe-area-inset-bottom))}
  .banner-top{display:none}
  .head{padding-top:64px;gap:14px}
  .head .big{width:44px;height:auto}
  .head h1{font-size:30px}
  .head p{font-size:16px}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}
  dialog{max-height:92dvh;overflow:auto}
}
@media (max-width:600px){
  .main{padding-left:12px;padding-right:12px}
  .head h1{font-size:26px}
  .head p{font-size:14px}
  .hero{border-radius:14px;margin-bottom:16px}
  .hero-slide{aspect-ratio:2/1}
  .card{padding:16px}
  .card h3{font-size:18px}
  .amount{font-size:36px}
  .coin,.qr,.shield{width:82px;height:auto;margin-right:14px}
  .code strong{font-size:20px}
  .code small{font-size:15px}
  .secure h3{font-size:21px}.secure i{font-size:15px}.secure{gap:14px}
  .btn{height:42px;padding:0 16px;font-size:16px}
  .panel{margin-top:22px;border-radius:14px}
  .ph{height:auto;min-height:64px;flex-wrap:wrap;padding:12px 16px}
  .ph h2{font-size:20px}
  .ph .btn{height:40px;font-size:15px;padding:0 16px}
  .cols,.row{grid-template-columns:150px 1fr 100px 120px;min-width:600px;padding-left:14px;font-size:14px}
  .pill{font-size:14px;padding:3px 12px 3px 10px}
  .acts{margin-top:22px;gap:14px}
  .act{height:auto;min-height:84px;padding:14px 18px;gap:16px}
  .act img{width:48px;height:auto}.act b{font-size:20px}.act small{font-size:14px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px;padding:0 14px 18px}
  .tile{padding:12px;gap:10px}.tile img{width:36px;height:auto}.tile b{font-size:15px}.tile small{display:none}
  .grid,.feat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .feat-grid{padding:0 14px 18px}
  .product h3{font-size:14px}.p-body{padding:10px 12px 12px}
  .p-foot strong{font-size:18px}.p-foot .btn{height:38px;padding:0 10px;font-size:14px}
  .toolbar{gap:10px}.search{flex:1 1 100%}
  .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;max-width:100%}
  .chip{flex:none;height:38px;padding:0 16px}
  .sort{width:100%}.sort select{flex:1}
  dialog{padding:20px}
  .buy-top{flex-direction:column}
}
@media (max-width:360px){.grid,.feat-grid{grid-template-columns:1fr}.tiles{grid-template-columns:1fr}}
@media (min-width:1700px){.main{padding-left:56px;padding-right:56px}.grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}


/* ===== Pedidos y administración ===== */
.hero-nav[hidden]{display:none}
.ord-list{display:grid;gap:14px;padding:0 24px 24px}
.ord{border:1px solid #2f6fd0;border-radius:14px;padding:14px 16px;background:#0b1a3d}
.ord-h,.ord-f{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.ord small{color:var(--text-soft)}
.ord ul{margin:8px 0;padding-left:18px}
.ord-f{margin-top:8px}
.ord-deliv{margin:10px 0;padding:10px 12px;border-radius:10px;background:#0d3a2c;border:1px solid #14634a;white-space:pre-wrap;word-break:break-word;font-size:14px}
.pill.y{background:#3a2d0b;color:#f6b92b;border:1px solid #6b5216}
.adm-tabs{overflow-x:auto;margin-bottom:20px;scrollbar-width:none}
.adm-tabs .tab{flex:1 0 auto;padding:0 18px}
.adm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:6px}
.astat{padding:16px 20px;border-radius:16px;border:2px solid var(--blue-line);background:linear-gradient(135deg,#0e2a66,#081a42);color:#fff;box-shadow:0 0 18px #2f7bff44}
.astat small{display:block;color:var(--text-soft);font-size:14px}
.astat b{display:block;font-size:28px;font-weight:700;margin-top:2px}
.adm-bar{display:flex;flex-wrap:wrap;gap:12px;padding:0 24px 16px}
.adm-bar input,.adm-bar select,.acts-mini select,.adm-b input[type=date]{height:42px;padding:0 12px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 15px Poppins,Arial,sans-serif}
.adm-bar input{flex:1;min-width:220px}
.acts-mini{flex-wrap:wrap}
.acts-mini select{height:34px;font-size:13px;padding:0 8px}
.adm-row.u{grid-template-columns:1.8fr 1fr .6fr auto}
.adm-row.top{grid-template-columns:1fr auto}
.adm-row.notif-row{grid-template-columns:1fr auto;padding:10px 24px}
.adm-b{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;padding:12px 24px;border-bottom:1px solid #15306a}
.adm-b label{display:flex;align-items:center;gap:8px;font-size:15px}
.block{display:block}.muted{color:var(--text-soft);font-style:normal}
html[data-theme="light"] .ord{background:#fff;border-color:#bcd0f0}
html[data-theme="light"] .ord small{color:#4a5b80}
html[data-theme="light"] .ord-deliv{background:#dff7ec;border-color:#a6e3c8;color:#0b1a3d}
html[data-theme="light"] .pill.y{background:#fff3d6;color:#8a5a00;border-color:#f0d08a}
html[data-theme="light"] .adm-bar input,html[data-theme="light"] .adm-bar select,html[data-theme="light"] .acts-mini select,html[data-theme="light"] .adm-b input[type=date]{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
html[data-theme="light"] .adm-b{border-color:#dbe5f6}
@media (max-width:700px){
  .ord-list{padding:0 14px 18px}.adm-bar{padding:0 14px 14px}
  .adm-b{grid-template-columns:1fr;gap:8px;padding:12px 14px}
  .adm-row.u{grid-template-columns:1.6fr 1fr .6fr auto;min-width:560px}
  .adm-stats{grid-template-columns:1fr 1fr}
}

/* ===== Bolívares, Plan Pro y clientes ===== */
.pr{display:flex;flex-direction:column;line-height:1.15}
.pr strong{font-size:24px}
.pr small,.bs{font-size:13px;font-weight:500;color:var(--text-soft)}
.pr .was{font-size:13px;color:var(--text-soft);opacity:.8}
.amount + .bs{display:block;margin:-6px 0 10px;font-size:18px}
.rate-note{margin:0 0 14px;color:var(--text-soft);font-size:15px}
.nav img[src*="crown"]{object-fit:contain}
.pro-pad{padding:0 24px 24px}
.pro-list{margin:0 0 14px;padding-left:20px;line-height:1.7;color:var(--text-soft)}
.pro-price{margin:0 0 14px}.pro-price strong{font-size:34px}
.pro-stats{padding:0 24px 16px}
.pro-tag{font-style:normal;font-size:11px;font-weight:700;color:var(--navy-700);background:var(--gold);border-radius:8px;padding:1px 8px;margin-left:6px}
.pill.sm{font-size:12px;padding:2px 10px 2px 8px;gap:6px;margin-top:4px}.pill.sm i{width:8px;height:8px}
.adm-row.p{grid-template-columns:56px 1.6fr 1fr 1.2fr auto}
.adm-row.cl{grid-template-columns:1.3fr 1.2fr 1.1fr .8fr auto}
.cl-table{min-width:820px}
.thumb img{display:block;width:44px;height:44px;object-fit:cover;border-radius:8px;background:#071231}
.pf-prev{display:block;width:96px;height:96px;object-fit:cover;border-radius:10px;margin:0 0 14px;border:2px solid var(--gold)}
a.mini{display:inline-flex;align-items:center;text-decoration:none}
.cfg-form label{flex:1 1 220px;display:block;font-weight:500}
.cfg-form label input{margin-top:6px;width:100%}
html[data-theme="light"] .thumb img{background:#eef3fb}
html[data-theme="light"] .pro-tag{color:#0b1a3d}

/* ===== Inventario, datos de servicio y sonido ===== */
.adm-row.cl{grid-template-columns:1.1fr 1.6fr 1.3fr .8fr auto}
.adm-row.inv{grid-template-columns:1.1fr 1.6fr 1.2fr .9fr auto}
.cl-table{min-width:960px}
.inv-data{white-space:pre-line;word-break:break-word;font-size:14px}
.cl-data{display:block;white-space:pre-line;word-break:break-word;font-size:13px;color:var(--gold)}
.adm-row .acts-mini{flex-wrap:wrap}
dialog select{display:block;width:100%;margin-top:6px;height:46px;padding:0 14px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 16px Poppins,Arial,sans-serif}
dialog select:focus{outline:none;border-color:var(--gold)}
html[data-theme="light"] dialog select{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
html[data-theme="light"] .cl-data{color:#a86a00}

/* ===== Variantes, descripciones y renovaciones ===== */
.p-desc{margin:0;font-size:13px;line-height:1.35;color:var(--text-soft);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-desc-full{font-size:14px;margin:6px 0 0}
.pr .from{font-size:12px;text-transform:uppercase;letter-spacing:.4px}
.unit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 0}
#buyOpts{display:grid;gap:0 12px;grid-template-columns:1fr 1fr 1fr;margin:14px 0 4px}
#buyOpts label{margin-bottom:10px;font-size:14px}
#buyOpts select{height:42px;padding:0 8px;font-size:15px}
dialog{max-height:92vh;overflow:auto}
dialog textarea{display:block;width:100%;margin-top:6px;padding:10px 14px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 15px Poppins,Arial,sans-serif;resize:vertical}
dialog textarea:focus{outline:none;border-color:var(--gold)}
html[data-theme="light"] dialog textarea{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
@media (max-width:520px){#buyOpts{grid-template-columns:1fr}}

/* ----- Inventario de cuentas (administración) ----- */
.inv-top{gap:10px}
.inv-list{padding:0 24px 24px;display:grid;gap:16px}
.inv-acc{border:2px solid #2f6fd0;border-radius:16px;background:#071231;overflow:hidden}
.inv-acc.down{border-color:#6b2236}
.inv-h{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding:14px 18px;background:linear-gradient(135deg,#0e2a66,#081a42)}
.inv-h h3{margin:0;font-size:20px}
.inv-h small{display:block;color:var(--text-soft);font-size:13px}
.inv-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.inv-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 18px;padding:12px 18px;font-size:14px;border-bottom:1px solid #15306a}
.inv-meta span b{display:block;color:var(--text-soft);font-size:12px;font-weight:500}
.inv-meta code,.inv-meta .mono{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.inv-bar{height:8px;border-radius:6px;background:#15306a;overflow:hidden;margin:2px 0 0}
.inv-bar i{display:block;height:100%;background:linear-gradient(90deg,#22e58a,#f6b92b)}
.inv-acts{display:flex;flex-wrap:wrap;gap:8px;padding:12px 18px;border-bottom:1px solid #15306a}
.inv-slot{display:grid;grid-template-columns:.9fr 1.5fr 1.2fr auto;gap:12px;align-items:center;padding:10px 18px;border-bottom:1px solid #15306a;font-size:14px}
.inv-slot:last-of-type{border-bottom:0}
.inv-slot.free{opacity:.85}
.inv-slot small{display:block;color:var(--text-soft)}
.inv-slot .acts-mini{justify-content:flex-end}
.inv-warn{padding:8px 18px;color:#f6b92b;font-size:13px;border-bottom:1px solid #15306a}
.inv-hist{padding:8px 18px 14px;font-size:13px;color:var(--text-soft)}
.inv-hist summary{cursor:pointer;font-weight:500}
.inv-hist ul{margin:8px 0 0;padding-left:18px}
.inv-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
#invAccModal,#invCustModal,#invBulkModal{width:min(620px,94vw);max-height:92dvh;overflow:auto}
#invBulkModal code{display:block;margin-top:6px;font-size:12px;color:var(--gold);word-break:break-word}
#invBulkModal textarea{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
html[data-theme="light"] .inv-acc{background:#fff;border-color:#bcd0f0}
html[data-theme="light"] .inv-acc.down{border-color:#f3b8c0}
html[data-theme="light"] .inv-h{background:linear-gradient(135deg,#eaf1ff,#dce8ff);color:#0b1a3d}
html[data-theme="light"] .inv-meta,html[data-theme="light"] .inv-acts,html[data-theme="light"] .inv-slot,html[data-theme="light"] .inv-warn{border-color:#dbe5f6}
html[data-theme="light"] .inv-bar{background:#dbe5f6}
html[data-theme="light"] .inv-warn{color:#8a5a00}
@media (max-width:700px){
  .inv-list{padding:0 12px 18px}
  .inv-slot{grid-template-columns:1fr;gap:6px}
  .inv-slot .acts-mini{justify-content:flex-start}
  .inv-grid{grid-template-columns:1fr}
}
html[data-theme="light"] #invStats .astat small{color:#c9d8f7}

/* ===== Pantalla de carga ===== */
#splash{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:radial-gradient(ellipse at 50% 38%,#12307a 0%,#081a42 45%,#030917 100%);color:#fff;transition:opacity .6s ease,visibility .6s}
#splash.out{opacity:0;visibility:hidden;pointer-events:none}
.sp-glow{position:absolute;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#f6b92b33,transparent 68%);animation:spGlow 3s ease-in-out infinite}
.sp-logo{position:relative;width:190px;height:190px;display:grid;place-items:center}
.sp-logo img{position:relative;z-index:2;animation:spBeat 1.6s ease-in-out infinite;filter:drop-shadow(0 0 18px #f6b92b88)}
.sp-ring{position:absolute;inset:0;border-radius:50%;border:3px solid transparent;border-top-color:var(--gold);border-right-color:#f6b92b55;animation:spSpin 1.4s linear infinite;box-shadow:0 0 22px #f6b92b44}
.sp-ring.r2{inset:14px;border-top-color:transparent;border-bottom-color:#4da3ff;border-left-color:#4da3ff55;animation-duration:2.2s;animation-direction:reverse;box-shadow:0 0 18px #2f7bff44}
.sp-name{position:relative;font-size:38px;font-weight:700;letter-spacing:.5px;margin-top:8px}
.sp-name em{font-style:normal;color:var(--gold)}
.sp-tag{position:relative;font-size:15px;color:#a9bde6;font-style:italic;font-weight:500}
.sp-bar{position:relative;width:min(240px,64vw);height:5px;border-radius:5px;background:#ffffff1c;overflow:hidden;margin-top:18px}
.sp-bar span{display:block;height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));box-shadow:0 0 12px var(--gold);animation:spLoad 1.5s cubic-bezier(.3,.7,.2,1) forwards}
@keyframes spSpin{to{transform:rotate(360deg)}}
@keyframes spBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes spGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.15)}}
@keyframes spLoad{0%{width:0}60%{width:78%}100%{width:96%}}
#splash.done .sp-bar span{animation:none;width:100%;transition:width .25s}
@media (prefers-reduced-motion:reduce){.sp-ring,.sp-logo img,.sp-glow{animation:none}}

/* ===== Inicio de sesión renovado ===== */
#authModal{width:min(440px,94vw);padding:30px 28px 26px;border:1.5px solid #f6b92b99;border-radius:24px;
  background:linear-gradient(165deg,#12307acc,#071a44ee 55%,#050d22f2);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 0 0 1px #ffffff10 inset,0 24px 70px #000a,0 0 60px #f6b92b33;animation:authIn .45s cubic-bezier(.2,.8,.2,1)}
#authModal::backdrop{background:radial-gradient(ellipse at 50% 30%,#12307acc,#030917f2 70%);backdrop-filter:blur(8px)}
@keyframes authIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.auth-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:18px}
.auth-brand img{filter:drop-shadow(0 0 14px #f6b92b77);animation:spBeat 3s ease-in-out infinite}
.auth-brand b{font-size:28px;margin-top:6px}.auth-brand b em{font-style:normal;color:var(--gold)}
.auth-brand small{color:var(--text-soft);font-size:13px}
#authModal .tabs{background:#ffffff12;border-radius:14px;padding:5px}
#authModal .tab{font-size:13px;border-radius:11px}
#authModal #authText{text-align:center;margin:0 0 14px;font-size:14px}
#authModal label{font-size:14px;color:#cfdcff}
#authModal input{height:50px;border-radius:13px;background:#ffffff10;border:1.5px solid #ffffff2e;transition:border-color .2s,box-shadow .2s,background .2s}
#authModal input:focus{background:#ffffff18;border-color:var(--gold);box-shadow:0 0 0 4px #f6b92b22}
#authModal .modal-actions{flex-direction:column-reverse;gap:10px;margin-top:4px}
#authModal .modal-actions .btn{width:100%;height:50px;justify-content:center;font-size:16px}
#authModal #authOk{box-shadow:0 8px 22px #f6b92b44}
#authModal .modal-actions #authCancel{background:transparent;border-color:transparent;color:var(--text-soft);height:40px;font-size:14px}
.pw-wrap{position:relative;display:block}
.pw-wrap input{padding-right:52px}
.pw-eye{position:absolute;right:6px;bottom:6px;width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--text-soft);cursor:pointer;display:grid;place-items:center}
.pw-eye:hover{color:var(--gold)}
html[data-theme="light"] #authModal{background:linear-gradient(165deg,#fffffff2,#eaf1ffee);color:#0b1a3d;border-color:#f6b92bcc}
html[data-theme="light"] #authModal::backdrop{background:radial-gradient(ellipse at 50% 30%,#dce8ffd9,#0b1a3de6 80%)}
html[data-theme="light"] #authModal label{color:#2c3e66}
html[data-theme="light"] #authModal input{background:#fff;border-color:#bcd0f0;color:#0b1a3d}
html[data-theme="light"] #authModal .tabs{background:#e3ecfb}
html[data-theme="light"] .auth-brand small,html[data-theme="light"] #authModal .modal-actions #authCancel{color:#4a5b80}

/* ===== Instalar app ===== */
.install-btn{width:calc(100% - 28px);margin:0 14px 12px;justify-content:center}
.install-bar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;width:min(560px,94vw);display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:20px;border:1.5px solid #f6b92bcc;background:linear-gradient(160deg,#12307af2,#050d22f7);color:#fff;
  box-shadow:0 18px 50px #000a,0 0 40px #f6b92b33;backdrop-filter:blur(14px);animation:ibIn .5s cubic-bezier(.2,.8,.2,1)}
.install-bar[hidden]{display:none}
.install-bar img{border-radius:13px}
.install-bar div:nth-child(2){flex:1;min-width:180px}
.install-bar b{display:block;font-size:17px}.install-bar small{display:block;color:#b9c9ee;font-size:13px;line-height:1.35}
.ib-acts{display:flex;gap:8px;margin-left:auto}
@keyframes ibIn{from{opacity:0;transform:translate(-50%,30px)}to{opacity:1;transform:translate(-50%,0)}}
html[data-theme="light"] .install-bar{background:linear-gradient(160deg,#fff,#eaf1ff);color:#0b1a3d}
html[data-theme="light"] .install-bar small{color:#4a5b80}
@media (max-width:700px){.install-bar{bottom:78px}.ib-acts{width:100%}.ib-acts .btn{flex:1}}

/* ===== Mi cuenta ===== */
.avatar{display:inline-grid;place-items:center;flex:none;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,#ffc83d,#f0a416);color:#071231;font-weight:700;user-select:none}
.avatar img{display:block;width:100%;height:100%;object-fit:cover}
.avatar.sm{width:38px;height:38px;font-size:14px}
.avatar.md{width:46px;height:46px;font-size:16px;margin-bottom:8px}
.avatar.xl{width:112px;height:112px;font-size:38px;border:3px solid var(--gold)}
.tb-btn:has(.avatar){padding:0;overflow:hidden}
.acct-pad{padding:0 24px 24px}
.acct-body{display:flex;gap:32px;align-items:flex-start;flex-wrap:wrap;padding:0 24px 24px}
.acct-photo{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.acct-photo-acts{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.acct-photo-acts small{color:var(--text-soft);max-width:220px}
.acct-form{display:flex;flex-direction:column;gap:14px;padding:0 24px 24px;max-width:520px;flex:1;min-width:260px}
.acct-body .acct-form{padding:0}
.acct-form label{display:flex;flex-direction:column;gap:6px;font-size:15px;font-weight:500}
.acct-form input{height:46px;padding:0 14px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 16px Poppins,Arial,sans-serif}
.acct-form input[readonly]{opacity:.7;cursor:default}
.acct-form input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.acct-row{display:flex;gap:12px}
.acct-form .error{margin:0;min-height:0}
.acct-stats{padding:0 24px 24px}
.acct-since{font-size:20px;text-transform:capitalize}
html[data-theme="light"] .acct-form input{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
html[data-theme="light"] .avatar.xl{border-color:#e59a12}
html[data-theme="light"] .tb-btn:has(.avatar){background:#fff}

/* ===== Soporte ===== */
.acct-form select,.acct-form textarea{padding:0 14px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 16px Poppins,Arial,sans-serif}
.acct-form select{height:46px}
.acct-form textarea{padding:10px 14px;resize:vertical;min-height:96px}
.acct-form select:focus-visible,.acct-form textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.pill.n{background:#1a2540;color:#9fb0d6;border:1px solid #2a3a63}
details.tk>summary{display:flex;justify-content:space-between;align-items:center;gap:10px;cursor:pointer;list-style:none}
details.tk>summary::-webkit-details-marker{display:none}
details.tk>summary:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:8px}
.tk-title{display:flex;flex-direction:column;min-width:0}
.tk-title b{overflow-wrap:anywhere}
.tk-thread{display:grid;gap:8px;margin:14px 0 10px}
.tk-msg{max-width:88%;padding:8px 12px;border-radius:12px;background:#0d2352;border:1px solid #1f4aa0}
.tk-msg.me{justify-self:end;background:#0d3a2c;border-color:#14634a}
.tk-msg p{margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}
.tk-reply{display:flex;gap:10px;align-items:flex-end}
.tk-reply textarea{flex:1;min-height:44px;padding:9px 12px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 15px Poppins,Arial,sans-serif;resize:vertical}
.tk-reply textarea:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.tk-acts{display:flex;justify-content:flex-end;margin-top:10px}
html[data-theme="light"] .acct-form select,html[data-theme="light"] .acct-form textarea,html[data-theme="light"] .tk-reply textarea{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
html[data-theme="light"] .tk-msg{background:#eaf1fd;border-color:#bcd0f0}
html[data-theme="light"] .tk-msg.me{background:#dff7ec;border-color:#a6e3c8}
html[data-theme="light"] .pill.n{background:#e7ecf6;color:#4a5b80;border-color:#c9d4ea}

/* Favoritos */
.p-img{position:relative}
.fav-btn{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:1.5px solid var(--blue-line);background:#050d22cc;color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s}
.fav-btn:hover{border-color:var(--gold);transform:scale(1.08)}
.fav-btn.on{color:#ff4d6d;border-color:#ff4d6d;box-shadow:0 0 14px #ff4d6d88}
#favEmpty .btn{margin-left:12px}
html[data-theme="light"] .fav-btn{background:#ffffffe6;color:#4a5b80}
html[data-theme="light"] .fav-btn.on{color:#e0284a}

/* Recargas */
#rcModal{width:min(520px,94vw)}
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-bottom:14px}
.pay-opt{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;border-radius:14px;border:2px solid var(--blue-line);background:#0b2257;color:inherit;font:inherit;font-size:14px;cursor:pointer;transition:.15s}
.pay-opt img{width:40px;height:40px;object-fit:contain}
.pay-opt:hover{border-color:var(--gold)}
.pay-opt.on{border-color:var(--gold);box-shadow:0 0 16px #f6b92b88}
.pay-info{margin-bottom:14px;padding:12px 14px;border-radius:12px;border:1.5px dashed var(--gold)}
.pay-info pre{margin:6px 0 0;white-space:pre-wrap;word-break:break-word;font:inherit;font-size:15px}
.pay-prev{display:block;max-width:100%;max-height:220px;margin:0 0 14px;border-radius:10px;border:1.5px solid var(--blue-line)}
.pm-row{display:block;margin-bottom:12px}
.pm-row textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:inherit;resize:vertical}
html[data-theme="light"] .pay-opt{background:#f1f5fd}
html[data-theme="light"] .pm-row textarea{background:#fff;color:#0b1a3d}

.rc-amt{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px}
.rc-amt input{width:110px;height:36px;padding:0 10px;border-radius:8px;border:2px solid #2f6fd0;background:#071231;color:#fff}
html[data-theme="light"] .rc-amt input{background:#fff;color:#0b1a3d}

/* Reseñas */
.rv-sum{margin:2px 0 6px;font-size:14px;font-weight:600}
.rv-sum span,.rv-st{color:var(--gold)}
.rv-sum small{color:var(--text-soft);font-weight:400}
.rv-list{margin:10px 0;padding:10px 12px;border-radius:12px;border:1.5px solid var(--blue-line);max-height:180px;overflow:auto}
.rv-item{margin-top:8px}
.rv-item p{margin:2px 0 0;font-size:14px}
.rv-pick{display:flex;gap:6px;margin-bottom:14px}
.rv-s{font-size:34px;line-height:1;background:none;border:0;color:#5c6f99;cursor:pointer;padding:0 2px}
.rv-s.on{color:var(--gold)}
#rvModal textarea{display:block;width:100%;margin-top:6px;padding:10px 12px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:inherit;resize:vertical}
html[data-theme="light"] #rvModal textarea{background:#fff;color:#0b1a3d}

/* Pie de página (Inicio) */
.site-foot{margin-top:40px;padding:28px 28px 16px;border-radius:18px;border:2px solid #2f6fd0;background:linear-gradient(160deg,#0b2257,#050d22)}
.sf-cols{display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;gap:28px}
.sf-brand img{display:block;width:96px;height:auto;margin-bottom:10px}
.sf-brand p,.sf-note{margin:0;color:var(--text-soft);font-size:14px;line-height:1.5}
.sf-col{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.sf-col h4{margin:0 0 4px;font-size:16px;color:var(--gold)}
.sf-col>button{background:none;border:0;padding:2px 0;color:inherit;font:inherit;font-size:15px;cursor:pointer}
.sf-col>button:hover{color:var(--gold);text-decoration:underline}
.sf-wa{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;border:1.5px solid #25d366;color:inherit;text-decoration:none;font-weight:600;font-size:15px;transition:.15s}
.sf-wa:hover{background:#25d36622;box-shadow:0 0 14px #25d36655}
.sf-wa svg{width:26px;height:26px;color:#25d366;flex:none}
.sf-wa small{display:block;font-weight:400;color:var(--text-soft);font-size:13px}
.sf-pay{display:flex;flex-wrap:wrap;gap:8px}
.sf-pay img{width:34px;height:34px;object-fit:contain;padding:3px;border-radius:8px;background:#ffffff14}
.sf-bottom{margin-top:22px;padding-top:14px;border-top:1px solid var(--blue-line);text-align:center;color:var(--text-soft);font-size:13px}
html[data-theme="light"] .site-foot{background:linear-gradient(160deg,#fff,#e4ecfa)}
html[data-theme="light"] .sf-brand p,html[data-theme="light"] .sf-note,html[data-theme="light"] .sf-wa small,html[data-theme="light"] .sf-bottom{color:#4a5b80}
html[data-theme="light"] .sf-col h4{color:#b8860b}
html[data-theme="light"] .sf-pay img{background:#0b1a3d10}
@media (max-width:860px){.sf-cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.sf-cols{grid-template-columns:1fr}.site-foot{padding:20px 16px 14px}}

/* WhatsApp en Mi cuenta + etiqueta para el administrador */
.acct-hint{margin:0;color:var(--text-soft);font-size:15px;line-height:1.45}
.acct-note{color:var(--text-soft);font-size:13px;line-height:1.4;margin-top:-6px}
.wa-chip{display:inline-block;margin:4px 0 0;padding:2px 10px;border-radius:999px;border:1px solid #25d366;color:#25d366;font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.wa-chip:hover{background:#25d36622}
html[data-theme="light"] .wa-chip{color:#12803c;border-color:#12803c}
html[data-theme="light"] .acct-hint,html[data-theme="light"] .acct-note{color:#4a5b80}

/* Guía: quiénes somos, por qué elegirnos y cómo usar */
.g-chips{margin-bottom:6px}
.g-sec{scroll-margin-top:16px}
.g-body{padding:0 24px 24px;max-width:860px}
.g-body p,.g-steps p{margin:0 0 12px;line-height:1.6;font-size:16px}
.g-body p:last-child{margin-bottom:0}
.g-h3{margin:18px 0 8px;font-size:18px;color:var(--gold)}
.g-h3:first-child{margin-top:0}
.g-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;padding:0 24px 24px}
.g-card{display:flex;gap:14px;align-items:flex-start;transition:transform .2s,box-shadow .2s,border-color .2s;padding:16px 18px;border-radius:16px;border:2px solid var(--blue-line);background:linear-gradient(135deg,#0e2a66,#081a42);box-shadow:0 0 18px #2f7bff33}
.g-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 8px 24px #f6b92b33}
.g-card>div{min-width:0}
.g-ico{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;color:#1a1200;background:linear-gradient(180deg,#ffc83d,var(--gold-dark));box-shadow:0 0 14px #f6b92b88}
.g-ico svg{width:24px;height:24px}
.g-why .g-banner{--gb:url(../img/bg/banner-porque.webp)}
.g-banner.b-quienes{--gb:url(../img/bg/banner-quienes.webp)}
.g-banner.b-uso{--gb:url(../img/bg/banner-uso.webp)}
.g-banner.b-pasos{--gb:url(../img/bg/banner-pasos.webp)}
.g-banner.b-reporte{--gb:url(../img/bg/banner-reporte.webp)}
.g-banner{position:relative;height:150px;margin-bottom:18px;display:flex;align-items:center;padding:0 24px;overflow:hidden;border-radius:16px 16px 0 0;
  background:linear-gradient(90deg,#050d22cc 0%,#050d2288 40%,#050d2200 70%),var(--gb) right center/cover no-repeat #0a1f4d;border-bottom:1px solid #f6b92b66}
.g-banner h2{margin:0;font-size:30px;font-weight:700;color:#fff;text-shadow:0 2px 12px #000a}
.g-banner p{margin:6px 0 0;max-width:460px;font-size:16px;line-height:1.4;color:#e4ecff;text-shadow:0 1px 8px #000a}
.g-card b{display:block;margin-bottom:6px;font-size:17px;color:var(--gold)}
.g-card p{margin:0;font-size:15px;line-height:1.5;color:var(--text-soft)}
.g-dl{margin:0 0 14px;display:grid;gap:8px}
.g-dl>div{display:flex;gap:14px;padding:10px 14px;border-radius:12px;background:#ffffff0d;border:1px solid #2f6fd055}
.g-dl dt{flex:0 0 130px;font-weight:600;color:var(--gold)}
.g-dl dd{margin:0;color:var(--text-soft);line-height:1.45}
.g-steps{list-style:none;margin:0;padding:0 24px 24px;display:grid;gap:18px;counter-reset:none}
.g-steps>li{display:flex;gap:16px;align-items:flex-start;padding:18px;border-radius:16px;border:2px solid #2f6fd0;background:#0a1f4d99;scroll-margin-top:16px}
.g-num{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:linear-gradient(180deg,#ffc83d,var(--gold-dark));color:#071231;font-weight:700;font-size:20px}
.g-steps h3{margin:2px 0 8px;font-size:20px}
.g-steps ul,.g-steps ol,.g-list{margin:0 0 12px;padding-left:22px;line-height:1.6;font-size:16px}
.g-steps li li,.g-list li{margin:3px 0}
.g-steps>li>div{min-width:0;flex:1}
.g-tip{padding:12px 14px;border-radius:12px;border:1.5px dashed var(--gold);background:#f6b92b14}
.g-acts{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:14px}
.g-acts .btn{height:46px;padding:0 22px;font-size:16px}
html[data-theme="light"] .g-card:hover{border-color:#e0a100;box-shadow:0 8px 22px #f6b92b44}
html[data-theme="light"] .g-card{background:linear-gradient(135deg,#fff,#eaf1fc);border-color:#bcd0f0;box-shadow:0 4px 14px #2f7bff1a}
html[data-theme="light"] .g-card b,html[data-theme="light"] .g-h3,html[data-theme="light"] .g-dl dt{color:#b8860b}
html[data-theme="light"] .g-card p,html[data-theme="light"] .g-dl dd{color:#4a5b80}
html[data-theme="light"] .g-dl>div{background:#f1f5fc;border-color:#d5e0f3}
html[data-theme="light"] .g-steps>li{background:#fff;border-color:#bcd0f0}
html[data-theme="light"] .g-tip{background:#fff6dc}
html[data-theme="light"] .g-acts .btn:not(.gold){color:#0b1a3d}
@media (max-width:700px){
  .g-body{padding:0 16px 18px}.g-cards{padding:0 16px 18px;grid-template-columns:1fr}.g-banner{height:120px;padding:0 16px}.g-banner h2{font-size:24px}.g-banner p{font-size:14px}
  .g-steps{padding:0 16px 18px}.g-steps>li{flex-direction:column;gap:10px;padding:14px}
  .g-dl>div{flex-direction:column;gap:2px}.g-dl dt{flex:none}
  .g-chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
  .g-chips::-webkit-scrollbar{display:none}.g-chips .chip{flex:none}
}

/* Iconos de redes sociales (pie de página) */
.sf-social{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.soc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid transparent;padding:0;cursor:pointer;transition:.15s;box-shadow:0 2px 10px #0006}
.soc img{width:30px;height:30px;object-fit:contain;display:block}
.soc:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 0 16px #f6b92b88}
.soc.off{opacity:.6}
html[data-theme="light"] .soc{border-color:#d5e0f3;box-shadow:0 2px 8px #0b1a3d22}

/* Fondos: login, administración y Downloader */
#authModal::backdrop,html[data-theme="light"] #authModal::backdrop{background:linear-gradient(180deg,#030917a6,#030917e6),url(../img/bg/login.webp) center/cover no-repeat;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.adm-hero{position:relative;display:grid;place-items:center;text-align:center;min-height:230px;margin-bottom:8px;padding:20px 16px;border-radius:18px;border:2px solid #2f6fd0;overflow:hidden;
  background:#050d22 url(../img/bg/admin.webp) center top/cover no-repeat}
.adm-hero b{display:block;font-size:28px;font-weight:700;color:#fff;text-shadow:0 2px 12px #000}
.adm-hero small{display:block;margin-top:4px;font-size:15px;color:var(--text-soft);text-shadow:0 2px 8px #000}
@media (max-width:700px){.adm-hero{min-height:120px}.adm-hero b{font-size:21px}.adm-hero small{font-size:13px}}
.dl-hero{display:grid;align-items:end;min-height:200px;margin-bottom:6px;padding:26px 28px;border-radius:18px;border:2px solid #2f6fd0;overflow:hidden;
  background:linear-gradient(90deg,#050d22f2 8%,#050d2299 60%,#050d2255),url(../img/bg/descargas.webp) center/cover no-repeat}
.dl-hero h2{margin:0 0 8px;font-size:30px;color:#fff}
.dl-hero p{margin:0;max-width:560px;font-size:17px;line-height:1.5;color:#dbe6ff}
@media (max-width:700px){.dl-hero{min-height:160px;padding:18px 16px}.dl-hero h2{font-size:22px}.dl-hero p{font-size:15px}}

/* Tarjetas de códigos Downloader */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;padding:0 24px 18px}
.dl-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 16px;text-align:center;border-radius:18px;border:2px solid var(--blue-line);background:linear-gradient(135deg,#0e2a66,#081a42);box-shadow:0 0 18px #2f7bff33}
.dl-ico{width:112px;height:112px;object-fit:contain;border-radius:16px;background:#fff;padding:8px}
.dl-card h3{margin:0;font-size:20px}
.dl-code{width:100%;padding:12px 10px;border-radius:12px;border:2px dashed var(--gold);background:#050d22;color:var(--gold-light);font:700 26px/1.1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:2px;word-break:break-all;user-select:all}
.dl-code.pending{font:500 15px Poppins,Arial,sans-serif;letter-spacing:0;color:var(--text-soft);border-color:#2f6fd0;user-select:none}
.dl-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;width:100%}
.dl-acts .btn{height:42px;padding:0 18px;font-size:15px;display:inline-flex;align-items:center;text-decoration:none}
.dl-icon-link{width:100%;font-size:13px;color:var(--text-soft);text-decoration:underline}
.dl-icon-link:hover{color:var(--gold)}
.dl-note{margin:0;padding:0 24px 22px;color:var(--text-soft)}
.dl-adm-note{padding:0 24px;margin:0 0 12px}
.dl-adm{display:grid;gap:12px;padding:0 24px 18px}
.dl-adm-row{display:grid;grid-template-columns:40px 150px 1fr 1.6fr;gap:12px;align-items:end;padding:12px;border-radius:14px;border:1px solid #2f6fd055;background:#ffffff0a}
.dl-adm-row img{width:40px;height:40px;object-fit:contain;border-radius:8px;background:#fff;align-self:center}
.dl-adm-row b{align-self:center}
.dl-adm-row label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--text-soft)}
.dl-adm-row input{height:42px;padding:0 12px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 15px Poppins,Arial,sans-serif}
.dl-adm-row input:focus-visible{outline:3px solid var(--gold);outline-offset:1px}
.dl-adm-row .wide{grid-column:3 / 5}
@media (max-width:760px){.dl-grid{padding:0 16px 14px;grid-template-columns:1fr}.dl-note{padding:0 16px 18px}.dl-adm{padding:0 16px 14px}.dl-adm-note{padding:0 16px}
  .dl-adm-row{grid-template-columns:40px 1fr}.dl-adm-row label,.dl-adm-row .wide{grid-column:1 / 3}}
html[data-theme="light"] .dl-card{background:linear-gradient(135deg,#fff,#eaf1fc);border-color:#bcd0f0;box-shadow:0 4px 14px #2f7bff1a}
html[data-theme="light"] .dl-code{background:#fff6dc;color:#8a5a00;border-color:#e59a12}
html[data-theme="light"] .dl-code.pending,html[data-theme="light"] .dl-icon-link,html[data-theme="light"] .dl-note,html[data-theme="light"] .dl-adm-row label{color:#4a5b80}
html[data-theme="light"] .dl-acts .btn:not(.gold){color:#0b1a3d}
html[data-theme="light"] .dl-adm-row{background:#f6f9fe;border-color:#d5e0f3}
html[data-theme="light"] .dl-adm-row input{background:#fff;color:#0b1a3d;border-color:#bcd0f0}
@media (min-width:701px){.adm-tabs{flex-wrap:wrap;overflow-x:visible}}
.adm-hero small{color:#cfdcf5!important}

/* Equipo y roles */
.team-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;padding:0 24px}
.team-roles .adm-row{padding:10px 24px}
#tmList .adm-row{padding:10px 24px;grid-template-columns:1fr auto}
#tmErr{padding:0 24px}
@media (max-width:720px){#tmList .adm-row{grid-template-columns:1fr}#tmList .acts-mini{flex-wrap:wrap}}

/* Registro de actividad */
.act-bar{display:flex;flex-wrap:wrap;gap:10px;padding:0 24px 12px}
.act-bar input[type=search]{flex:1 1 200px}
.act-date{display:flex;align-items:center;gap:6px;font-size:14px}
.act-row{padding:10px 24px;grid-template-columns:1fr auto}
@media (max-width:720px){.act-row{grid-template-columns:1fr}}


/* ----- Servicios agotados ----- */
.sold-badge{position:absolute;top:10px;left:10px;z-index:2;padding:4px 12px;border-radius:10px;background:#d6303a;color:#fff;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;box-shadow:0 2px 10px #0006}
.product.soldout .p-img img{filter:grayscale(.85) brightness(.6)}
.product.soldout:hover{transform:none;border-color:var(--blue-line);box-shadow:0 0 22px #2f7bff55}
.btn.sold,.btn.sold:hover{background:#3a4560;border-color:#3a4560;color:#aab4cc;cursor:not-allowed;filter:none}
html[data-theme="light"] .btn.sold{background:#dfe5f2;border-color:#dfe5f2;color:#6b7896}
.sold-tag{font-style:normal;font-size:11px;font-weight:700;color:#fff;background:#d6303a;border-radius:8px;padding:1px 8px;margin-left:6px}
.sold-badge.part{background:#c77a00}
.avail{display:inline-flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;white-space:nowrap}
.avail input{width:18px;height:18px;accent-color:var(--gold)}

/* ---- Franja de canales (Inicio) ---- */
.ch-wrap{overflow:hidden;padding:0 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ch-strip{display:flex;width:max-content;animation:ch-scroll 55s linear infinite}
.ch-wrap:hover .ch-strip,.ch-wrap:focus-within .ch-strip{animation-play-state:paused}
.ch-track{display:flex;gap:16px;margin:0;padding:0 8px;list-style:none}
.ch-track li{flex:none;width:160px;height:80px;border-radius:14px;overflow:hidden;border:2px solid #2f6fd0;background:#fff;transition:transform .2s,border-color .2s,box-shadow .2s}
.ch-track li:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 0 18px #f6b92b66}
.ch-track img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes ch-scroll{to{transform:translateX(-50%)}}
@media (max-width:700px){.ch-track li{width:120px;height:60px;border-radius:12px}.ch-track{gap:12px}.ch-strip{animation-duration:45s}}
@media (prefers-reduced-motion:reduce){.ch-wrap{overflow-x:auto;-webkit-mask-image:none;mask-image:none}.ch-strip{animation:none}.ch-track[aria-hidden="true"]{display:none}}

/* ---- Pago con comprobante al comprar ---- */
.paybox{margin:0 0 14px;padding:12px 14px 4px;border-radius:14px;border:2px solid var(--blue-line)}
.paybox legend{padding:0 8px;font-weight:600}
.paybox .pm-radio{display:flex;align-items:center;gap:10px;margin-bottom:10px;cursor:pointer}
.paybox input[type=radio]{display:inline-block;width:18px;height:18px;margin:0;accent-color:#f6b92b}
.paybox .pay-detail{margin-top:6px}
.paybox .pay-detail small.muted{display:block;margin:0 0 12px}

/* ===== Banner de streaming en Inicio y Tienda ===== */
.head.has-banner{border-radius:18px;padding-left:24px;padding-right:24px;overflow:hidden;border:1px solid #f6b92b66;box-shadow:0 0 28px #f6b92b33;
  background:linear-gradient(90deg,#050d22f2 0%,#050d22d9 36%,#050d2288 66%,#050d2244 100%),url(../img/bg/banner-streaming.webp) center/cover no-repeat}
/* Banner propio por sección (el arte queda a la derecha, por eso se ancla ahí) */
.head.has-banner[data-banner="favoritos"]{--hb:url(../img/bg/banner-favoritos.webp)}
.head.has-banner[data-banner="pedidos"]{--hb:url(../img/bg/banner-pedidos.webp)}
.head.has-banner[data-banner="pro"]{--hb:url(../img/bg/banner-pro.webp)}
.head.has-banner[data-banner="soporte"]{--hb:url(../img/bg/banner-soporte.webp)}
.head.has-banner[data-banner="guia"]{--hb:url(../img/bg/banner-guia.webp)}
.head.has-banner[data-banner]:not([data-banner="streaming"]){
  background:linear-gradient(90deg,#050d22cc 0%,#050d2288 40%,#050d2200 70%),var(--hb) right center/cover no-repeat #0a1f4d}
.head.has-banner .swoosh,.head.has-banner .slogan{display:none}
.head.has-banner h1,html[data-theme="light"] .head.has-banner h1{color:#fff;text-shadow:0 2px 12px #000a}
.head.has-banner p,html[data-theme="light"] .head.has-banner p{color:#e4ecff;text-shadow:0 1px 8px #000a}
body.has-hero .banner-top{display:none}

@media (max-width:760px){
  .head.has-banner[data-banner]:not([data-banner="streaming"]){background:linear-gradient(90deg,#050d22e6 0%,#050d22b3 55%,#050d2255 100%),var(--hb) right center/cover no-repeat #0a1f4d}
}

/* ===== Animación de éxito (estilo Binance) ===== */
.okfx{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#030917b3;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .25s}
.okfx.show{opacity:1;pointer-events:auto}
.okfx-cv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.okfx-card{position:relative;width:min(340px,88vw);padding:30px 24px 24px;text-align:center;border-radius:20px;border:2px solid var(--gold);color:#fff;
  background:linear-gradient(160deg,#0f2a63,var(--navy-700));box-shadow:0 0 50px #f6b92b77;transform:translateY(60px) scale(.82);opacity:0}
.okfx.show .okfx-card{animation:okfxIn .55s cubic-bezier(.2,1.25,.4,1) forwards}
.okfx-card img{position:relative;width:120px;height:auto;margin:0 auto 4px;display:block;transform:scale(0)}
.okfx.show .okfx-card img{animation:okfxPop .6s .22s cubic-bezier(.2,1.5,.4,1) forwards}
.okfx-ring{position:absolute;left:50%;top:78px;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid #f6b92b;opacity:0}
.okfx.show .okfx-ring{animation:okfxRing .9s .3s ease-out forwards}
.okfx-card h3{margin:6px 0 4px;font-size:24px}
.okfx-card p{margin:0 0 14px;color:var(--text-soft);overflow-wrap:anywhere}
.okfx-card p[hidden]{display:none}
.okfx-card .btn{min-width:140px}
html[data-theme="light"] .okfx-card{color:#fff}
@keyframes okfxIn{to{transform:none;opacity:1}}
@keyframes okfxPop{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes okfxRing{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.3);opacity:0}}
@media (prefers-reduced-motion:reduce){.okfx.show .okfx-card,.okfx.show .okfx-card img{animation:none;transform:none;opacity:1}.okfx-ring{display:none}}

@media (prefers-reduced-motion:reduce){.g-card{transition:none}.g-card:hover{transform:none}}
@media (min-width:900px){.g-cards .g-card:last-child:nth-child(3n+1){grid-column:1/-1}}
@media (max-width:760px){.g-banner>div{max-width:62%}.g-banner h2{font-size:22px}}

/* ===== Guía: menú con íconos, pasos, reportes y WhatsApp ===== */
.g-body{padding-top:2px}
.g-dl{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.g-dl>div{align-items:center;gap:14px;padding:12px 14px;border-radius:14px;transition:transform .2s,border-color .2s,box-shadow .2s}
.g-dl>div:hover{transform:translateY(-2px);border-color:var(--gold);box-shadow:0 6px 18px #f6b92b2e}
.g-dimg{flex:none;width:44px;height:44px;object-fit:contain;border-radius:10px;background:#050d22}
.g-dl dt{flex:none;margin-bottom:2px;font-size:17px}
.g-uso-wrap,.g-body .g-tip{margin-top:6px}
.g-flow .g-steps{padding-top:2px;gap:20px}
.g-flow .g-steps>li{position:relative;border-left:4px solid var(--gold);background:linear-gradient(135deg,#0e2a66cc,#081a42cc);box-shadow:0 0 16px #2f7bff2e}
.g-flow .g-steps>li:not(:last-child)::after{content:"";position:absolute;left:38px;top:66px;bottom:-22px;width:2px;background:linear-gradient(#f6b92b,#f6b92b00);pointer-events:none}
.g-flow .g-num{box-shadow:0 0 14px #f6b92bcc;z-index:1}
.g-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.g-2col{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:14px}
.g-card-lg{padding:18px 20px}
.g-card-lg .g-h3{margin:0 0 8px;font-size:18px}
.g-card-lg .g-list{margin:0 0 10px}
.g-card-lg p{font-size:15px}
.g-rep .g-tip{margin:0 0 16px}
.g-contact{padding:16px 18px;border-radius:16px;border:2px solid #25d36688;background:linear-gradient(135deg,#0b2a2a,#081a42);box-shadow:0 0 18px #25d3662e}
.g-contact>b{display:block;margin-bottom:10px;font-size:17px}
.wa-ico{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#25d366;box-shadow:0 2px 10px #25d36666}
.wa-ico svg{width:26px;height:26px;color:#fff}
.sf-wa{padding:8px 14px 8px 8px;gap:12px}
.sf-wa svg{width:26px;height:26px;color:#fff}
html[data-theme="light"] .g-contact{background:linear-gradient(135deg,#f2fbf6,#eaf1fc);border-color:#25d36699}
html[data-theme="light"] .g-flow .g-steps>li{background:linear-gradient(135deg,#fff,#eaf1fc);box-shadow:0 4px 14px #2f7bff1a}
@media (max-width:760px){.g-dl{grid-template-columns:1fr}.g-flow .g-steps>li{padding:14px}.g-flow .g-steps>li:not(:last-child)::after{left:34px}.g-acts>*{flex:1 1 100%}.g-acts .sf-wa{justify-content:flex-start}}
@media (prefers-reduced-motion:reduce){.g-dl>div{transition:none}.g-dl>div:hover{transform:none}}
.g-card-lg b{display:inline;margin:0;font-size:inherit}
html[data-theme="light"] .g-card-lg b{color:inherit}
#g-uso .g-body,.g-rep{max-width:none}
@media (max-width:760px){
  .g-dl>div{flex-direction:row;gap:14px}
  .g-flow .g-steps>li{flex-direction:row;gap:12px}
  .g-flow .g-steps>li:not(:last-child)::after{display:none}
  .g-flow .g-num{width:36px;height:36px}
}
@media (max-width:760px){.g-banner{height:auto;min-height:120px;padding:14px 16px}}

/* Aviso del equipo clicable: abre la pestaña correspondiente */
.notif.go{cursor:pointer}
.notif.go:hover,.notif.go:focus-visible{background:#f6b92b22;outline:0}
.flash{animation:ctvflash 2.4s ease-out}
@keyframes ctvflash{0%,40%{box-shadow:0 0 0 3px #f6b92b;background:#f6b92b22}100%{box-shadow:0 0 0 0 transparent}}

/* ===== Temporadas (Inicio + Administración) ===== */
.season{--sc:#f6b92b;border-color:var(--sc);box-shadow:0 0 22px color-mix(in srgb,var(--sc) 35%,transparent);overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--sc) 26%,#081a42) 0%,#081a42f2 60%)}
.season-hero{display:flex;align-items:center;gap:18px;padding:22px 24px 18px;position:relative}
.season-emoji{font-size:54px;line-height:1;filter:drop-shadow(0 4px 10px #0008);animation:seFloat 3.2s ease-in-out infinite}
.season-txt{flex:1;min-width:0}
.season-txt h2{margin:0 0 4px;font-size:26px;line-height:1.2}
.season-txt p{margin:0;opacity:.88;font-size:15px}
.season-end{flex:none;padding:7px 14px;border-radius:20px;background:var(--sc);color:#0a1736;font-weight:600;font-size:13px;white-space:nowrap}
.season .feat-grid{padding-top:4px}
@keyframes seFloat{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.season-emoji{animation:none}}
@media (max-width:700px){.season-hero{display:grid;grid-template-columns:auto 1fr;align-items:center;padding:16px 16px 12px;gap:8px 12px}.season-emoji{font-size:38px}.season-txt h2{font-size:20px}.season-txt p{font-size:14px}.season-end{grid-column:1/-1;justify-self:start}}
html[data-theme="light"] .season{background:linear-gradient(135deg,color-mix(in srgb,var(--sc) 22%,#fff) 0%,#fffffff2 60%);box-shadow:0 6px 22px color-mix(in srgb,var(--sc) 30%,transparent)}

.se-list{display:grid;gap:18px;padding:0 24px 24px}
.se-card{border:2px solid #2f6fd0;border-radius:14px;padding:16px;background:#071231aa}
.se-head{display:flex;align-items:center;gap:10px}
.se-head b{font-size:18px;flex:1}
.se-emo{font-size:28px}
.se-pill{padding:4px 12px;border-radius:14px;font-size:12px;font-weight:600}
.se-pill.on{background:#1fa95b;color:#fff}
.se-pill.off{background:#4a5675;color:#fff}
.se-status{margin:6px 0 12px;opacity:.85;font-size:14px}
.se-modes{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.se-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;align-items:end}
.se-grid label,.se-dates{display:flex;flex-direction:column;gap:4px;font-size:13px;opacity:.95}
.se-grid .wide{grid-column:1/-1}
.se-grid input[type=text],.se-grid select,.se-grid input[type=number]{height:42px;padding:0 12px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;color:#fff;font:500 15px Poppins,Arial,sans-serif;min-width:0}
.se-grid input[type=color]{height:42px;width:100%;padding:2px;border-radius:10px;border:2px solid #2f6fd0;background:#071231;cursor:pointer}
.se-dates{display:grid;grid-template-columns:1fr 84px;gap:6px}
.se-dates span{grid-column:1/-1}
.se-prods{margin:14px 0 0;border:1.5px solid #2f6fd055;border-radius:12px;padding:8px 12px 12px}
.se-prods legend{padding:0 6px;font-size:13px}
.se-plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 12px;max-height:220px;overflow:auto}
.se-p{display:flex;align-items:center;gap:8px;font-size:14px;padding:4px 0;cursor:pointer}
.se-p input{width:18px;height:18px;accent-color:var(--gold)}
.se-acts{display:flex;gap:10px;align-items:center;margin-top:14px}
@media (max-width:700px){.se-list{padding:0 14px 18px}}
html[data-theme="light"] .se-card{background:#f4f8ffcc;border-color:#bcd0f0}
html[data-theme="light"] .se-grid input[type=text],html[data-theme="light"] .se-grid select,html[data-theme="light"] .se-grid input[type=number],html[data-theme="light"] .se-grid input[type=color]{background:#fff;color:#0b1a3d;border-color:#bcd0f0}

/* ===== Efecto nieve (temporadas) ===== */
.ctv-snow{position:fixed;inset:0;z-index:45;pointer-events:none;overflow:hidden}
.ctv-snow i{position:absolute;top:-12px;width:var(--sz);height:var(--sz);border-radius:50%;background:#fff;opacity:var(--o);box-shadow:0 0 6px #fff9;animation:snowFall var(--d) linear var(--dl) infinite;will-change:transform}
@keyframes snowFall{0%{transform:translate3d(0,-12px,0)}50%{transform:translate3d(var(--dx),55vh,0)}100%{transform:translate3d(calc(var(--dx) * -.6),108vh,0)}}
html[data-theme="light"] .ctv-snow i{background:#cfe6ff;box-shadow:0 0 5px #6aa7e8aa}
@media (prefers-reduced-motion:reduce){.ctv-snow{display:none}}

/* Plan Pro: selector de meses, avisos y modo solo lectura */
.pro-months{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.pro-months button{padding:8px 14px;border-radius:10px;border:1px solid rgba(128,128,128,.4);background:transparent;color:inherit;cursor:pointer;font-weight:600}
.pro-months button.on{background:#e5b84b;color:#1a1a1a;border-color:transparent}
.pro-note{margin:8px 0;padding:10px 12px;border-radius:10px;background:rgba(229,184,75,.14)}
#proClients.ro [data-cl-add],#proClients.ro [data-cl-edit],#proClients.ro [data-cl-del],#proClients.ro [data-cl-renew],#proClients.ro [data-inv-assign],#proClients.ro [data-inv-renew],#proClients.ro [data-inv-report]{opacity:.45}

/* Compartir (clientes del vendedor Pro) */
.mini.gold{background:linear-gradient(#ffd45e,#e59a12);color:#1b1200;border-color:transparent;display:inline-flex;align-items:center;list-style:none}
details.share{position:relative}details.share summary::-webkit-details-marker{display:none}
.share-menu{position:absolute;right:0;top:40px;z-index:30;width:270px;background:#0d1c44;border:1px solid #2a4a90;border-radius:12px;padding:6px;box-shadow:0 12px 30px #0009;display:flex;flex-direction:column;gap:2px}
.share-it{display:block;text-align:left;padding:9px 10px;border-radius:8px;border:0;background:transparent;color:#e8efff;font:500 13px Poppins,Arial,sans-serif;cursor:pointer;text-decoration:none}
.share-it b{display:block;font-weight:600}.share-it small{color:#9fb2d8;font-size:12px}
a.share-it:hover,button.share-it:hover{background:#13296a}.share-it.off,.share-off{opacity:.55;cursor:default;padding:9px 10px;font-size:13px;color:#cfdcf5}
html[data-theme="light"] .share-menu{background:#fff;border-color:#bcd0f0}html[data-theme="light"] .share-it{color:#0b1a3d}html[data-theme="light"] .share-it small{color:#4a5b80}html[data-theme="light"] a.share-it:hover,html[data-theme="light"] button.share-it:hover{background:#eef3fb}