/* Cotiza2 · capa de diseño sobre index.html (verde botica, dorado y crema del brand kit).
   Va después del <style> de la página: solo cambia cómo se ve, no qué hace. */
:root{
  --r:14px;
  --f-head:"Lora",Georgia,"Times New Roman",serif;
  --sh1:0 1px 2px rgba(13,53,39,.06);
  --sh2:0 1px 2px rgba(13,53,39,.05),0 14px 34px -16px rgba(13,53,39,.24);
  --mejor-bg:linear-gradient(180deg,#edf6f0,#ddefe4);--mejor-ln:#3c8c62;--mejor-tx:#12603d;--estrella:#b8801c;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6);
  --mejor-bg:linear-gradient(180deg,rgba(230,190,92,.16),rgba(230,190,92,.08));--mejor-ln:#c8942e;--mejor-tx:#f1d27f;--estrella:#e6be5c}}
:root[data-theme="dark"]{
  --sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 1px 2px rgba(0,0,0,.3),0 14px 34px -16px rgba(0,0,0,.6);
  --mejor-bg:linear-gradient(180deg,rgba(230,190,92,.16),rgba(230,190,92,.08));--mejor-ln:#c8942e;--mejor-tx:#f1d27f;--estrella:#e6be5c}

/* ---------- base ---------- */
html{padding-top:0;background:#0d3527}
body{min-height:100vh;background:radial-gradient(1100px 420px at 50% -160px,color-mix(in srgb,var(--oro2) 22%,transparent),transparent 70%),var(--bg);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.wrap{padding:22px 16px 96px;gap:16px}
::selection{background:color-mix(in srgb,var(--oro2) 45%,transparent)}

/* ---------- barra ---------- */
.bar{top:0;padding-top:env(safe-area-inset-top,0px);box-shadow:0 10px 24px -16px rgba(0,0,0,.55)}
.bar::after{height:1px;background:linear-gradient(90deg,transparent,#e6be5c 25%,#e6be5c 75%,transparent);opacity:.55}
.bar-in{padding:12px 20px}
.brand-logo{filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}

/* ---------- controles ---------- */
.btn{border-radius:10px;padding:8px 14px;box-shadow:var(--sh1);transition:border-color .15s,background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.sm{border-radius:9px;padding:6px 11px;font-size:12.5px}
.btn.pri{background:linear-gradient(180deg,#1f6a4f,#0d3527);color:#f3ede0}
.btn.x{box-shadow:none}
input,select,textarea{border-radius:10px}
select{-webkit-appearance:none;appearance:none;height:36px;padding:0 32px 0 12px;font-weight:500;background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23759086' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;box-shadow:var(--sh1);cursor:pointer}
details>summary{color:var(--accent)}
details.mf>summary.btn{height:36px}
.chip{padding:7px 13px;font-size:13px;color:var(--muted);box-shadow:var(--sh1);transition:background .15s,border-color .15s,color .15s}
.chip:hover{border-color:var(--accent);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--verde);border-color:var(--verde);color:#f3ede0}
.chip[aria-pressed=true] .c{color:#e6be5c}
.chip .c{opacity:.9}
.tag{padding:4px 4px 4px 12px}
.pill{padding:2px 9px;font-size:11.5px}
.p-mut{background:var(--sunk)}
.hint{line-height:1.45}
.lk{color:var(--ink);font-size:13.5px;line-height:1.3}
.lk:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.alerta{border-radius:14px}

/* pestañas del comparador como control segmentado */
.chips:has(> [data-ctab]){flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:4px;padding:4px;background:var(--sunk);border-radius:14px;margin:0 0 14px!important}
.chips:has(> [data-ctab])::-webkit-scrollbar{display:none}
.chip[data-ctab]{border:0;box-shadow:none;background:transparent;white-space:nowrap;border-radius:10px;padding:8px 13px}
.chip[data-ctab][aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--sh2)}
.chip[data-ctab][aria-pressed=true] .c{color:var(--accent)}

/* ---------- comparador ---------- */
#secComp{background:none;border:0;box-shadow:none;padding:0;gap:14px}
#compRes{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;box-shadow:var(--sh2);min-width:0}
.ctrls{padding:0 2px}

.hero{position:relative;overflow:hidden;isolation:isolate;border-radius:24px;padding:30px 28px 26px;display:grid;gap:20px;color:#f3ede0;
  background:radial-gradient(700px 260px at 92% -30%,rgba(230,190,92,.26),transparent 62%),radial-gradient(130% 150% at 0% 0%,#1d6047,#0d3527 62%);
  box-shadow:0 26px 50px -30px rgba(13,53,39,.75),inset 0 1px 0 rgba(255,255,255,.06)}
.hero::after{content:"";position:absolute;z-index:-1;right:-50px;top:-30px;width:300px;height:300px;background:url(marca/cotiza2-icono-app.svg) center/contain no-repeat;opacity:.08;transform:rotate(-8deg);pointer-events:none}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:#e6be5c}
.hero h2{font-family:var(--f-head);font-size:clamp(27px,4.2vw,40px);font-weight:700;line-height:1.08;letter-spacing:-.01em;margin:8px 0 10px;color:#fff8ea}
.hero-t p{margin:0;max-width:62ch;color:rgba(243,237,224,.78);font-size:14.5px}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.kpi{display:flex;flex-direction:column;gap:4px;min-width:0;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(230,190,92,.22)}
.kpi b{font-size:28px;font-weight:700;line-height:1.1;color:#e6be5c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi b:not(.num){font-family:var(--f-head);font-size:22px;line-height:1.3}
.kpi span{font-size:12.5px;line-height:1.35;color:rgba(243,237,224,.72)}
.buscador{display:flex;flex-wrap:wrap;gap:10px}
.bq,.hero .labbox{position:relative;display:flex;align-items:center;min-width:0}
.bq{flex:2 1 300px}
.hero .labbox{flex:1 1 220px}
.bq>svg,.hero .labbox>svg{position:absolute;left:15px;z-index:1;color:#1b5a43;pointer-events:none}
.hero input[type=search]{width:100%;height:52px;padding:0 16px 0 44px;border-radius:14px;border:1px solid transparent;background:#fffdf7;color:#0d3527;font-size:16px;box-shadow:0 8px 20px -10px rgba(0,0,0,.5)}
.hero input[type=search]::placeholder{color:#7d8c83}
.hero input[type=search]:focus{border-color:#e6be5c;box-shadow:0 0 0 4px rgba(230,190,92,.35)}
.hero .sug{color:var(--ink)}
.hero-tags{gap:8px}
.hero-tags .tag{background:rgba(230,190,92,.16);color:#f3ede0;border-color:rgba(230,190,92,.55)}
.btn.ghost{background:transparent;color:#f3ede0;border-color:rgba(243,237,224,.35);box-shadow:none}
.btn.ghost:hover{border-color:#e6be5c}

/* duelo entre droguerías */
.rank>div{border-radius:14px;background:var(--surface);box-shadow:var(--sh1)}

/* tabla */
th{font-size:10.5px;letter-spacing:.08em;padding:10px 8px}
td{padding:10px 8px;border-bottom-color:color-mix(in srgb,var(--line) 75%,transparent)}
.cmp-main tbody tr:not(.det):hover>td{background:color-mix(in srgb,var(--sunk) 55%,transparent)}
.cmp-main tbody tr:not(.det):hover>td.celda.mejor{background:var(--mejor-bg)}
.celda{min-width:112px;border-radius:12px}
.c-final{font-size:16px}
.celda.mejor{background:var(--mejor-bg);box-shadow:inset 0 0 0 1.5px var(--mejor-ln)}
.celda.mejor .c-final,:root[data-theme="dark"] .celda.mejor .c-final{color:var(--mejor-tx);font-size:20px}
.c-mej,:root[data-theme="dark"] .c-mej{color:var(--estrella);font-size:10px;letter-spacing:.12em}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .celda.mejor .c-final{color:var(--mejor-tx)}:root:not([data-theme="light"]) .c-mej{color:var(--estrella)}}
.c-add{border-radius:999px;font-size:11.5px;padding:3px 10px}
.celda .hint,.c-tag,.c-mej,.c-lista,.c-add{font-family:var(--f-body)}
@media (hover:hover){.cmp-main .c-add{opacity:0;transition:opacity .15s}.cmp-main tr:hover .c-add,.cmp-main .c-add.hecho,.cmp-main .c-add:focus-visible{opacity:1}}
tr.det>td{background:var(--sunk)}
.det-g{gap:18px}
.tw{border-radius:12px}

/* ---------- teléfono: cada producto es una tarjeta con sus droguerías de la más barata a la más cara ---------- */
@media (max-width:700px){
  .wrap{padding:14px 12px 96px}
  .bar-in{padding:10px 14px}
  .brand-logo{height:38px;width:38px}
  .brand-name{height:22px}
  .hero{padding:22px 18px 18px;border-radius:20px;gap:16px}
  .hero::after{width:200px;height:200px;right:-60px;top:-40px}
  .hero-t p{font-size:13.5px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi{padding:11px 12px}
  .kpi:last-child{grid-column:1/-1}
  .kpi b{font-size:22px}
  .kpi b:not(.num){font-size:18px}
  .kpi span{font-size:11.5px}
  .hero input[type=search]{height:48px}
  .ctrls select#cOrd{flex:1 1 200px}
  #compRes{padding:12px;border-radius:18px}
  .cmp-main,.cmp-main>tbody{display:block}
  .cmp-main>thead{display:none}
  .cmp-main>tbody>tr:not(.det){display:flex;flex-wrap:wrap;gap:6px;padding:14px 2px 16px;border-bottom:1px solid var(--line)}
  .cmp-main>tbody>tr:not(.det)>td{display:block;border:0;padding:0}
  .tw table.cmp-main>tbody>tr>td.pn{flex:1 1 0;order:-2;min-width:0;max-width:none;position:static;background:none;box-shadow:none}
  .cmp-main>tbody>tr>td.pn .lk{font-size:15px}
  .cmp-main>tbody>tr>td.cver{order:-1}
  .cmp-main>tbody>tr:not(.det)>td.cdif,.cmp-main>tbody>tr:not(.det)>td.vacia,.cmp-main td.celda>.c-mej,.cmp-main td.celda>.c-add{display:none}
  /* cada droguería en una línea: nombre a la izquierda, precio a la derecha */
  .cmp-main>tbody>tr:not(.det)>td.celda{flex-basis:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--sunk);text-align:right;min-width:0}
  .cmp-main td.celda::before{content:attr(data-d);grid-column:1;grid-row:1/span 4;font-family:var(--f-body);font-weight:600;font-size:13.5px;color:var(--ink);text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cmp-main td.celda.mejor::before{content:"★ " attr(data-d);color:var(--mejor-tx)}
  .cmp-main td.celda>*{grid-column:2}
  .cmp-main>tbody>tr:not(.det)>td.celda.mejor{background:var(--mejor-bg)}
  .cmp-main td.celda.mejor .c-final{font-size:19px}
  .cmp-main td.celda.o0{order:0}.cmp-main td.celda.o1{order:1}.cmp-main td.celda.o2{order:2}.cmp-main td.celda.o3{order:3}.cmp-main td.celda.o4{order:4}
  .cmp-main td.celda.o5{order:5}.cmp-main td.celda.o6{order:6}.cmp-main td.celda.o7{order:7}.cmp-main td.celda.o8{order:8}.cmp-main td.celda.o9,.cmp-main td.celda.sin{order:9}
  /* portada más compacta: primero el buscador, las cifras en una fila */
  .hero-t p{display:none}
  .hero h2{margin:6px 0 0}
  .buscador{order:1}
  .hero-tags{order:2}
  .kpis{order:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kpi,.kpi:last-child{grid-column:auto;padding:10px;border-radius:12px}
  .kpi b,.kpi b:not(.num){font-size:17px}
  .kpi span{font-size:10.5px}
  .ctrls #xComp{display:none}
  .ctrls select#cOrd{flex:1 1 0;min-width:0}
  #compRes>.row:first-child{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-12px!important;padding-inline:12px}
  #compRes>.row:first-child>.hint{display:none}
  .kpi b:not(.num){white-space:normal;font-size:14px;line-height:1.15;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  #compRes>.row:first-child .chip{flex:none;white-space:nowrap}
  .cmp-main>tbody>tr.det{display:block}
  .cmp-main>tbody>tr.det>td{display:block;padding:12px}
  .det-g{grid-template-columns:1fr!important}
}

/* ---------- login ---------- */
.cx-login{display:grid;place-items:center;overflow:hidden;isolation:isolate;padding:max(20px,env(safe-area-inset-top)) 16px max(20px,env(safe-area-inset-bottom));
  background:radial-gradient(60% 50% at 85% 0%,rgba(230,190,92,.20),transparent 70%),radial-gradient(70% 60% at 0% 100%,rgba(27,90,67,.9),transparent 70%),linear-gradient(160deg,#0f3d2d,#0a2a1f 55%,#061a13);color:#f3ede0}
/* luces que se mueven despacio */
.cx-login::before,.cx-login::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(60px);pointer-events:none}
.cx-login::before{width:480px;height:480px;left:-140px;top:-160px;background:radial-gradient(circle,rgba(230,190,92,.30),transparent 65%);animation:cxOrbe 16s ease-in-out infinite alternate}
.cx-login::after{width:560px;height:560px;right:-200px;bottom:-220px;background:radial-gradient(circle,rgba(59,143,104,.45),transparent 65%);animation:cxOrbe 20s ease-in-out infinite alternate-reverse}
@keyframes cxOrbe{to{transform:translate(90px,60px) scale(1.15)}}
/* chispas doradas que suben */
.cx-fx{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.cx-fx i{position:absolute;bottom:-12px;width:5px;height:5px;border-radius:50%;background:#e6be5c;box-shadow:0 0 10px 2px rgba(230,190,92,.55);opacity:0;animation:cxChispa 11s linear infinite}
.cx-fx i:nth-child(1){left:8%;animation-delay:0s}.cx-fx i:nth-child(2){left:18%;animation-delay:3.5s;width:3px;height:3px}
.cx-fx i:nth-child(3){left:29%;animation-delay:7s}.cx-fx i:nth-child(4){left:41%;animation-delay:1.8s;width:3px;height:3px}
.cx-fx i:nth-child(5){left:53%;animation-delay:5.2s}.cx-fx i:nth-child(6){left:64%;animation-delay:9s;width:4px;height:4px}
.cx-fx i:nth-child(7){left:73%;animation-delay:2.6s}.cx-fx i:nth-child(8){left:82%;animation-delay:6.4s;width:3px;height:3px}
.cx-fx i:nth-child(9){left:90%;animation-delay:4.4s}.cx-fx i:nth-child(10){left:96%;animation-delay:8.2s;width:3px;height:3px}
@keyframes cxChispa{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:.9}70%{opacity:.6}100%{transform:translateY(-105vh) translateX(40px);opacity:0}}

.cx-card{position:relative;z-index:1;width:min(410px,100%);display:flex;flex-direction:column;gap:14px;padding:34px 28px 24px;border-radius:28px;color:#f3ede0;
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.035));border:1px solid rgba(230,190,92,.28);
  box-shadow:0 50px 90px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  animation:cxEntra .8s cubic-bezier(.16,1,.3,1) both}
@keyframes cxEntra{from{opacity:0;transform:translateY(26px) scale(.96);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.cx-card::before{display:none}
.cx-top{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:4px}
.cx-ico{position:relative;display:block;width:84px;height:84px;border-radius:22px;overflow:hidden;animation:cxPop .9s .15s cubic-bezier(.34,1.56,.64,1) both,cxFlota 5s 1.2s ease-in-out infinite;box-shadow:0 18px 30px -12px rgba(0,0,0,.7)}
.cx-ico::after{content:"";position:absolute;inset:-40%;background:linear-gradient(115deg,transparent 40%,rgba(255,240,200,.65) 50%,transparent 60%);transform:translateX(-100%);animation:cxBrillo 4.5s 1.1s ease-in-out infinite}
@keyframes cxPop{from{opacity:0;transform:scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes cxFlota{50%{transform:translateY(-5px)}}
@keyframes cxBrillo{0%{transform:translateX(-100%)}35%,100%{transform:translateX(100%)}}
.cx-logo{width:84px;height:84px;max-width:none;margin:0;display:block;filter:none}
.cx-wm{width:150px;height:auto;display:block;animation:cxSube .7s .3s cubic-bezier(.16,1,.3,1) both}
.cx-lema{margin:0;font-size:10.5px;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:#e6be5c;animation:cxLema 1s .45s cubic-bezier(.16,1,.3,1) both}
@keyframes cxSube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes cxLema{from{opacity:0;letter-spacing:.05em}to{opacity:1;letter-spacing:.32em}}
.cx-card .fld{animation:cxSube .6s cubic-bezier(.16,1,.3,1) both}
.cx-card .fld:nth-of-type(1){animation-delay:.5s}.cx-card .fld:nth-of-type(2){animation-delay:.58s}
.cx-card .fld label{color:rgba(230,190,92,.85);letter-spacing:.14em;font-size:10.5px}
.cx-card .fld input{width:100%;height:50px;padding:0 16px;font-size:16px;border-radius:14px;color:#f3ede0;background:rgba(6,26,19,.45);border:1px solid rgba(243,237,224,.16);transition:border-color .2s,box-shadow .2s,background .2s}
.cx-card .fld input::placeholder{color:rgba(243,237,224,.32)}
.cx-card .fld input:focus{outline:none;border-color:#e6be5c;background:rgba(6,26,19,.65);box-shadow:0 0 0 4px rgba(230,190,92,.18)}
.cx-card .fld input:-webkit-autofill{-webkit-text-fill-color:#f3ede0;-webkit-box-shadow:0 0 0 40px #0c3123 inset;caret-color:#f3ede0}
.cx-pw{position:relative;display:block}
.cx-pw input{padding-right:48px!important}
.cx-ojo{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:10px;background:transparent;color:rgba(243,237,224,.55);cursor:pointer}
.cx-ojo:hover,.cx-ojo[aria-pressed=true]{color:#e6be5c}
.cx-err{color:#ff9d8f;min-height:1.2em;margin:-2px 0 0;font-size:13px;text-align:center}
/* botón dorado con brillo */
#cxBtn,#cxNBtn{position:relative;overflow:hidden;height:52px;border:0;border-radius:14px;font-size:15.5px;font-weight:700;letter-spacing:.02em;color:#0d3527;justify-content:center;
  background:linear-gradient(180deg,#f2d17a,#d9a841 55%,#c8942e);box-shadow:0 14px 26px -12px rgba(200,148,46,.75),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s,box-shadow .2s,filter .2s;animation:cxSube .6s .66s cubic-bezier(.16,1,.3,1) both}
#cxBtn::after,#cxNBtn::after{content:"";position:absolute;top:0;bottom:0;width:60%;left:-80%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .6s}
#cxBtn:hover::after,#cxNBtn:hover::after{left:120%}
#cxBtn:hover,#cxNBtn:hover{filter:brightness(1.05);box-shadow:0 18px 32px -12px rgba(200,148,46,.9),inset 0 1px 0 rgba(255,255,255,.45)}
#cxBtn:active{transform:translateY(1px) scale(.99)}
#cxBtn.cargando{color:transparent;pointer-events:none}
#cxBtn.cargando::before{content:"";position:absolute;width:22px;height:22px;border-radius:50%;border:2.5px solid rgba(13,53,39,.25);border-top-color:#0d3527;animation:cxGira .7s linear infinite}
@keyframes cxGira{to{transform:rotate(360deg)}}
#cxBtn.listo{background:linear-gradient(180deg,#5fc28f,#2f8f60);color:#fff}
.cx-mal{animation:cxSacude .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes cxSacude{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(4px)}30%,50%,70%{transform:translateX(-8px)}40%,60%{transform:translateX(8px)}}
.cx-login.cx-sale{animation:cxSale .55s cubic-bezier(.7,0,.84,0) forwards}
.cx-login.cx-sale .cx-card{animation:cxSaleCard .5s cubic-bezier(.7,0,.84,0) forwards}
@keyframes cxSale{to{opacity:0;visibility:hidden}}
@keyframes cxSaleCard{to{transform:scale(1.06) translateY(-10px);opacity:0;filter:blur(4px)}}
/* acceso de prueba (solo en la demo) */
.cx-demobox{display:none;align-items:center;gap:6px 10px;flex-wrap:wrap;padding:11px 12px 11px 14px;border-radius:14px;background:rgba(230,190,92,.10);border:1px dashed rgba(230,190,92,.45);font-size:13px;animation:cxSube .6s .75s cubic-bezier(.16,1,.3,1) both}
html.demo .cx-demobox{display:flex}
.cx-dk{flex-basis:100%;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#e6be5c}
.cx-cred{flex:1 1 auto;color:rgba(243,237,224,.85)}
.cx-cred b{font-family:var(--f-num);color:#fff8ea;background:rgba(6,26,19,.5);padding:1px 7px;border-radius:6px;font-weight:600}
.cx-usar{border:0;border-radius:10px;padding:7px 14px;font:inherit;font-weight:700;font-size:13px;color:#0d3527;background:#e6be5c;cursor:pointer;transition:transform .15s,filter .15s}
.cx-usar:hover{filter:brightness(1.06);transform:translateY(-1px)}
.cx-demo{margin:2px 0 0;text-align:center;font-size:13px;color:rgba(243,237,224,.65)}
html.demo .cx-demo{display:none}
.cx-demo a{color:#e6be5c;font-weight:700;text-decoration:none;border-bottom:1.5px solid rgba(230,190,92,.5)}
#cxNueva strong{color:#fff8ea}
#cxNueva .hint{color:rgba(243,237,224,.7);text-align:center}
.cx-user{padding:5px 6px 5px 14px;font-size:12.5px;box-shadow:var(--sh2)}
html:not(.demo) .demo-tag{display:none}
@media (prefers-reduced-motion:reduce){.cx-login *,.cx-login::before,.cx-login::after{animation:none!important}}
@media (max-width:480px){.cx-card{padding:28px 20px 20px;border-radius:24px}}

/* ---------- apartados: Comparador · Datos · Usuarios ---------- */
.vistas{gap:4px;padding:4px;margin:0;background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh1);width:max-content;max-width:100%}
.vista{border:0;background:transparent;color:var(--muted);border-radius:12px;padding:9px 16px;font-size:14px}
.vista:hover{color:var(--ink)}
.vista[aria-pressed=true]{background:var(--verde);color:#f3ede0}
:root[data-theme="dark"] .vista[aria-pressed=true]{background:var(--oro2);color:#0d3527}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .vista[aria-pressed=true]{background:var(--oro2);color:#0d3527}}

/* secciones de Datos y Usuarios */
#secListas,#secParetos,#secClientes{border-radius:20px;padding:20px;box-shadow:var(--sh2)}
#secListas h2,#secParetos h2,#secClientes h2{font-family:var(--f-head);font-size:21px;font-weight:700}
#secListas .btn.pri,#secParetos .btn.pri,#secClientes .btn.pri{padding:8px 16px}
#secClientes .alerta{background:var(--sunk);border-color:var(--line)}
#secClientes .alerta input{height:38px}
@media (max-width:700px){
  .vistas{width:auto}
  .vista{flex:1 1 0;padding:9px 10px;font-size:13.5px;text-align:center}
  #secListas,#secParetos,#secClientes{padding:16px 14px;border-radius:18px}
  #secClientes .alerta input,#secClientes .alerta label{width:100%!important;flex:1 1 100%}
}

.cx-ir{height:46px;padding:0 20px;border:0;border-radius:12px;font-weight:700;color:#0d3527;background:linear-gradient(180deg,#f2d17a,#c8942e);box-shadow:0 12px 24px -12px rgba(200,148,46,.8)}