:root{
  --ink:#1D1D1B; --ink2:#3A3F47; --mid:#5F6670; --light:#8D949E;
  --red:#E1111C; --red-d:#B70412; --red-s:#FBE7E8;
  --green:#0E8A62; --green-s:#DFF3EC; --amber:#BD7308; --amber-s:#FCF0DC; --bad:#C8352B; --bad-s:#FBE6E4;
  --canvas:#F1F2F4; --line:#E0E3E7; --card:#fff; --head:#EBEDF0;
  --bar:#3A3F47; --track:#E8EAED;
  --shadow:0 6px 24px rgba(35,38,43,.08); --soft:0 2px 10px rgba(35,38,43,.06);
}
*{box-sizing:border-box}
html{font-size:14px}
[hidden]{display:none!important}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:"Fira Sans","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
h1,h2,h3,p{margin:0}
.side{position:fixed;inset:0 auto 0 0;width:250px;background:var(--red);color:#fff;display:flex;flex-direction:column;z-index:20}
.brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.3);text-align:center}
.brand img{display:block;width:176px;max-width:100%;height:auto;margin:0 auto}
.brand small{display:block;margin-top:10px;color:#fff;font-size:11.5px;font-weight:500}
.nav{padding:12px 10px;display:flex;flex-direction:column;gap:3px;flex:1}
.nav button{all:unset;cursor:pointer;display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:#fff;font-weight:500;font-size:13.5px}
.nav button:hover{background:rgba(255,255,255,.16);color:#fff}
.nav button.on{background:var(--red-d);color:#fff;font-weight:700}
.nav button:focus-visible{outline:2px solid #fff;outline-offset:-2px}
.nav svg{width:18px;height:18px;flex:none}
.foot{padding:14px 20px;font-size:12.5px;color:#fff;border-top:1px solid rgba(255,255,255,.3);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.fl{display:inline-flex;align-items:center;justify-content:center;gap:7px}.fl svg{width:15px;height:15px;flex:none}
.foot button{all:unset;display:inline-flex;align-items:center;gap:7px;cursor:pointer;color:#fff;font-weight:600;font-size:12.5px}
.foot button:hover{text-decoration:underline}.foot button:focus-visible{outline:2px solid #fff;outline-offset:2px}
main{padding-left:250px;min-height:100vh}
.wrap{max-width:1420px;margin:0 auto;padding:22px 26px 44px}
.pre{display:flex;gap:8px;align-items:flex-start;background:var(--amber-s);color:#7A4A05;border-radius:10px;padding:9px 13px;font-size:12.5px;margin-bottom:14px}
.filters{position:sticky;top:0;z-index:10;background:var(--canvas);padding:6px 0 12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.seg{display:flex;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:11px;padding:3px}
.seg button{all:unset;cursor:pointer;padding:7px 13px;border-radius:8px;font-weight:600;font-size:13px;color:var(--mid)}
.seg button.on{background:var(--ink);color:#fff}
.seg button:focus-visible,.chip:focus-visible{outline:2px solid var(--red)}
select,.search{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 11px;font-size:13px;min-width:0}
select{max-width:240px}
.search{flex:1 1 220px;max-width:340px}
.count{margin-left:auto;font-size:12.5px;color:var(--mid)}
.count b{color:var(--ink)}
h1{font-size:23px;font-weight:700}
.sub{color:var(--mid);font-size:13px;margin-top:2px}
.head{margin:6px 0 14px}
.grid{display:grid;gap:14px}
.g4{grid-template-columns:repeat(auto-fit,minmax(205px,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);padding:18px}
.card h2{font-size:15px;font-weight:600}
.card .note{font-size:12px;color:var(--mid);margin-top:2px}
.tile{text-align:center}
.tile small{font-size:11.5px;font-weight:600;color:var(--mid);text-transform:uppercase;letter-spacing:.04em}
.tile b{display:block;font-size:30px;font-weight:700;line-height:1.15;margin-top:3px;font-variant-numeric:tabular-nums}
.tile>span{font-size:12px;color:var(--mid)}
.section{margin-top:16px}
/* Fichas de área */
.results{background:#fff;border-radius:14px;box-shadow:var(--shadow);padding:18px}
.ficha{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.ficha header{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--head);padding:10px 16px}
.ficha h3{font-size:14px;font-weight:700}
.ficha h3 span{font-weight:500;color:var(--mid);font-size:12px;margin-left:5px}
.pill{display:inline-block;min-width:62px;text-align:center;border-radius:99px;padding:3px 11px;background:#fff;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums}
.it{display:grid;grid-template-columns:minmax(0,1fr) 112px 52px 12px;gap:14px;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.item:first-of-type>.it{border-top:0}
.it p{font-size:12.8px;line-height:1.38}
.it p b{color:var(--red-d);font-weight:700;margin-right:3px}
.it .solo{display:inline-block;font-size:10px;font-weight:700;color:var(--mid);background:var(--canvas);border-radius:99px;padding:0 7px;margin-left:4px;white-space:nowrap}
.bar{height:8px;background:var(--track);border-radius:9px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:9px;background:var(--bar)}
.val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;font-size:13.5px}
.ok{color:var(--green)} .warn{color:var(--amber)} .low{color:var(--bad)}
.b-ok{background:var(--green)!important} .b-warn{background:var(--amber)!important} .b-low{background:var(--bad)!important}
.times{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 16px;border-top:1px solid var(--line);background:#FAFAFB;font-size:12px;color:var(--mid);margin-top:auto}
.times b{color:var(--ink)}
.empty{padding:20px;color:var(--mid);font-size:13px;text-align:center}
summary.it{cursor:pointer;list-style:none}summary.it::-webkit-details-marker{display:none}
summary.it:hover{background:#FAFAFB}summary.it:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.cv{width:8px;height:8px;border-right:2px solid var(--mid);border-bottom:2px solid var(--mid);rotate:-45deg;transition:rotate .15s;justify-self:center}
.item[open] .cv{rotate:45deg}
.quien{padding:4px 16px 12px;background:#FAFAFB;border-top:1px dashed var(--line)}
.quien h4{margin:9px 0 5px;font-size:12px;font-weight:700;color:var(--ink2)}.quien h4.low{color:var(--bad)}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.suc-chip{background:#fff;border:1px solid var(--line);border-radius:99px;padding:1px 9px;font-size:11.5px}
.low+.chips .suc-chip{background:var(--red-s);border-color:#F3C4C7;color:#8F0A12;font-weight:600}
.dareas{border:1px solid var(--line);border-radius:10px;overflow:hidden}
.dareas .it{padding:8px 12px;grid-template-columns:minmax(0,1fr) 80px 52px 12px}
.qs{list-style:none;margin:0;padding:4px 12px 10px;background:#FAFAFB;border-top:1px dashed var(--line)}
.qs li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:8px;align-items:start;padding:5px 0;font-size:12.5px;line-height:1.38}
.res{border-radius:6px;text-align:center;font-weight:700;font-size:11px;padding:1px 0}.res.si{background:var(--green-s);color:#0A6B4C}.res.no{background:var(--bad-s);color:#A72A21}
.mpie{margin-top:14px;padding:12px 18px}.mpie .leyenda{margin:0 0 5px;justify-content:center}.mpie .note{text-align:center}
.tcards{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tcard{text-align:center}.tpar{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 9px}
.sc{text-align:center}.sc .row,.sc .ft{justify-content:center}
.jus{display:block;font-style:normal;margin-top:3px;padding:4px 8px;background:#fff;border-left:3px solid var(--bad);border-radius:4px;color:var(--ink2);font-size:12px}
.anillo-b p{font-size:12px;font-weight:600;color:var(--mid);margin-top:6px}
.anillo{position:relative;width:118px;height:118px;margin:0 auto}.anillo svg{display:block;width:100%;height:100%;rotate:-90deg}
.anillo circle{fill:none;stroke-width:9}.anillo .f{stroke:var(--line)}.anillo .a{stroke:var(--mid);stroke-linecap:round;stroke-dasharray:100;animation:aro .9s ease both}
.anillo>div{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.anillo b{font-size:25px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}.anillo small{font-size:10.5px;color:var(--mid)}
@keyframes aro{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.tblo{margin-top:9px;padding-top:8px;border-top:1px solid var(--line)}.tblo>span{font-size:12px;font-weight:700}
.tdos{display:grid;grid-template-columns:1fr 1fr;margin-top:2px}.tdos small{display:block;margin:0;font-size:11px;color:var(--mid)}.tdos b{font-size:16px;font-variant-numeric:tabular-nums}
/* Mapa */
table{border-collapse:collapse;width:100%}
.heat th{font-size:12px;color:var(--mid);text-align:center;padding:6px;font-weight:600}
.heat th:first-child,.heat td:first-child{text-align:left}
.heat td{padding:3px;text-align:center;font-size:13px}
.heat td:first-child{font-weight:600;padding-right:12px;white-space:nowrap}
.comp{min-width:420px}.csuc{max-height:480px;overflow:auto}.csuc thead th{position:sticky;top:0;background:#fff;z-index:1}.csuc .comp tr:last-child td{border-top:0;padding-top:3px}.csuc td:first-child{white-space:normal}.comp tr:last-child td{border-top:1px solid var(--line);padding-top:7px}
.comp .dif{font-weight:700;font-variant-numeric:tabular-nums;color:var(--mid)}.comp .dif.sube{color:var(--green)}.comp .dif.baja{color:var(--bad)}
.heat span{display:block;border-radius:7px;padding:6px 4px;font-weight:700;font-variant-numeric:tabular-nums}
.h-ok{background:var(--green-s);color:#0A6B4C}.h-warn{background:var(--amber-s);color:#8E5606}.h-low{background:var(--bad-s);color:#A72A21}.h-na{background:var(--canvas);color:var(--light);font-weight:500!important}
.rk{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12.7px}
.rk:first-of-type{border:0}
.rk p{flex:1;min-width:0;color:var(--ink)}
.rk p b{color:var(--ink);font-weight:700}
/* Ventanillas */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.chip{all:unset;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:99px;padding:7px 14px;font-weight:600;font-size:13px;color:var(--mid)}
.chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.chip small{opacity:.7;margin-left:3px;font-size:12px}
.vstat{display:flex;gap:12px;align-items:center}
.vstat .win{width:30px;height:38px;flex:none}
.win{display:inline-block;width:27px;height:27px;flex:none;stroke-width:1.6}
.win.f{color:var(--green)}
.win.p{color:var(--amber)}
.win.p .pers{fill:currentColor;stroke:none}
.win.o{color:#AEB4BC}
.win.x{color:#C4C9D0;stroke-dasharray:3 3}
.stack{display:flex;height:26px;border-radius:8px;overflow:hidden;margin-top:12px;background:var(--track)}
.stack i{display:flex;align-items:center;justify-content:center;color:#fff;font-style:normal;font-size:12px;font-weight:700;min-width:0;overflow:hidden}
.legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:12px;color:var(--mid);margin-top:10px}
.legend span{display:flex;align-items:center;gap:6px}
.legend .win{width:17px;height:17px}
.suc{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:10px;margin-top:12px}
.sc{background:#fff;border-radius:12px;box-shadow:var(--soft);padding:12px 13px}
.sc h3{font-size:13px;font-weight:600;line-height:1.25}
.sc small{font-size:11px;color:var(--mid)}
.sc .row{display:flex;flex-wrap:wrap;gap:3px;margin:9px 0 7px}
.sc .ft{display:flex;justify-content:center;gap:8px;font-size:11.5px;color:var(--mid)}
.sc .ft b{color:var(--ink)}
.flag{color:var(--amber);font-weight:600}
/* Verbatims */
.vs{display:grid;grid-template-columns:190px minmax(0,1fr);gap:0;background:#fff;border-radius:14px;box-shadow:var(--soft);overflow:hidden;margin-top:12px}
.vroot{background:#fff;color:var(--ink);padding:16px;border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.vroot h3{font-size:15px;font-weight:700;line-height:1.25}
.vroot small{display:block;margin-top:4px;color:var(--ink);font-size:11.5px;font-weight:700}
.vroot em{display:inline-block;font-style:normal;margin-top:9px;background:var(--canvas);padding:2px 9px;border-radius:99px;font-size:11px;font-weight:700}
.vtree{position:relative;padding:12px 14px 12px 34px}
.vtree::before{content:"";position:absolute;left:18px;top:24px;bottom:30px;width:2px;background:var(--line)}
.vn{position:relative;margin:7px 0}
.vn::before{content:"";position:absolute;left:-16px;top:18px;width:16px;height:2px;background:var(--line)}
.vn::after{content:"";position:absolute;left:-20px;top:14px;width:10px;height:10px;border-radius:50%;background:var(--c);border:2px solid #fff}
.vc{border-left:4px solid var(--c);border-radius:10px;background:#FAFAFB;padding:9px 13px}
.vc span{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--c)}
.vc p{font-size:13.2px;line-height:1.5;margin-top:1px;overflow-wrap:anywhere}
.more{display:block;margin:16px auto 0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px 16px;font-weight:600;cursor:pointer}
/* Metodología */
.mcard{position:relative}
.mcard i{position:absolute;right:16px;top:12px;font-style:normal;font-size:12px;font-weight:700;color:var(--light)}
.mcard h3{font-size:15px;font-weight:700;margin-top:0}
.mcard div{font-size:13px;line-height:1.55;color:var(--ink2);margin-top:4px}
.mcard ul{margin:4px 0;padding-left:17px}
.tb th{font-size:12px;text-align:right;color:var(--mid);padding:7px 8px;border-bottom:2px solid var(--line)}
.tb td{font-size:13px;text-align:right;padding:7px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tb th:first-child,.tb td:first-child{text-align:left}
.scale{display:flex;gap:10px;align-items:center;background:var(--canvas);padding:9px 11px;border-radius:10px;font-size:13px;margin-top:7px}
.scale b{min-width:82px;text-align:center;padding:2px 8px;border-radius:99px}
/* Animaciones */
.dig{display:inline-block;height:1em;line-height:1em;overflow:hidden;vertical-align:-.08em}
.dig>span{display:block;transition:transform .85s cubic-bezier(.2,.9,.25,1)}
.tile{transition:transform .18s ease,box-shadow .18s ease;will-change:transform}
.tile.inc{box-shadow:0 12px 30px rgba(29,29,27,.14)}
.bar i,.stack i{transform-origin:left;animation:crece .8s cubic-bezier(.2,.9,.25,1) both}
.stack i:nth-child(2){animation-delay:.12s}.stack i:nth-child(3){animation-delay:.24s}
.win{animation:sube .35s ease both}
.vs,.ficha,.sc{animation:entra .4s ease both}
@keyframes crece{from{transform:scaleX(0)}}
@keyframes sube{from{opacity:0;transform:translateY(5px)}}
@keyframes entra{from{opacity:0;transform:translateY(8px)}}
.toasts{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:50}
.toast{background:var(--ink);color:#fff;padding:10px 15px;border-radius:11px;box-shadow:var(--shadow);font-size:13px;font-weight:500;animation:entra .3s ease both;transition:opacity .3s,transform .3s}
.toast.fuera{opacity:0;transform:translateY(8px)}
/* Login */
.login{height:100vh;min-height:620px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);background:#fff}
.lfoto{position:relative;overflow:hidden;background:#fff}
.lfoto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 42%}
.lfoto::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,16,19,.5) 0%,rgba(15,16,19,.08) 20%,rgba(15,16,19,0) 50%,rgba(15,16,19,.82) 100%)}
.lfoto::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(255,255,255,0) 55%,#fff 95%)}
.ltag{position:absolute;z-index:2;left:7%;top:40px;display:flex;align-items:center;gap:9px;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.ltag::before{content:"";width:22px;height:2px;background:var(--red)}
.lcap{position:absolute;z-index:2;left:7%;width:min(64%,430px);bottom:36px;color:#fff}
.lcap h2{font-family:"Fira Sans","Segoe UI",system-ui,sans-serif;font-size:clamp(30px,3.2vw,44px);font-weight:700;line-height:1.1}
.lcap p{margin-top:13px;font-size:14.5px;line-height:1.5}
.lcap ul{list-style:none;margin:17px 0 0;padding:14px 0 0;display:flex;gap:14px;border-top:1px solid rgba(255,255,255,.3);font-size:13px;font-weight:600}
.lcap li+li{padding-left:14px;border-left:1px solid rgba(255,255,255,.35)}
.lpanel{position:relative;z-index:2;background:#fff;margin-left:-1px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px 40px 118px}
.lpre{position:absolute;top:32px;right:40px;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:99px;padding:4px 12px;font-size:11.5px;color:var(--ink2)}
.lpre i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.lform{width:100%;max-width:380px}
.lform h1{font-family:"Fira Sans","Segoe UI",system-ui,sans-serif;font-size:32px;font-weight:600;text-align:center}
.lform .sub{text-align:center;font-size:14px;line-height:1.45;margin:6px 0 24px;color:var(--ink2)}
.lform label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px}
.lform input{display:block;width:100%;border:1px solid #D5D9DF;border-radius:6px;padding:12px 13px;font-size:14px;background:#fff}
.lform input::placeholder{color:var(--light)}
.lform input:focus{outline:2px solid var(--red);outline-offset:-1px;border-color:var(--red)}
#lcorreo{margin-bottom:16px}
.lfila{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.lolvido{all:unset;cursor:pointer;font-size:12.5px;color:var(--ink2);text-decoration:underline}
.lolvido:hover{color:var(--red-d)}.lolvido:focus-visible,.lclave button:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.lclave{position:relative}.lclave input{padding-right:74px}
.lclave button{all:unset;position:absolute;right:12px;top:50%;translate:0 -50%;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--ink2)}
.lerr{min-height:19px;margin:7px 0;color:var(--bad);font-size:12.5px;font-weight:600}.lerr.info{color:var(--ink2);font-weight:500}
.lbtn{display:block;width:100%;border:0;border-radius:6px;background:var(--red);color:#fff;font-weight:700;font-size:14px;padding:13px;cursor:pointer;transition:background .15s,transform .1s}
.lbtn:hover{background:var(--red-d)}.lbtn:active{transform:scale(.985)}.lbtn:disabled{opacity:.6;cursor:default}
.lbtn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.lseg{display:flex;gap:9px;align-items:flex-start;margin-top:16px;font-size:12.5px;line-height:1.4;color:var(--mid)}.lseg svg{width:14px;height:14px;flex:none;margin-top:2px}
.llogos{position:absolute;left:40px;right:40px;bottom:24px;display:flex;align-items:center;justify-content:center;gap:24px;padding-top:22px;border-top:1px solid var(--line)}
.llogos i{width:1px;height:38px;background:var(--line)}.lcid{width:92px;height:auto}.ldav{width:140px;height:auto}
.lform.no{animation:niega .42s ease}
@keyframes niega{20%{transform:translateX(-9px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}
/* Mapa */
:root{--s-ok:#0E8A62;--s-warn:#F4BE12;--s-low:#D42A1F;--tierra:#E4E7EB}
.leyenda{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 14px;font-size:12.5px;color:var(--ink2)}
.ley{display:inline-flex;align-items:center;gap:6px}.ley svg{width:17px;height:17px}.ley b{font-weight:700;color:var(--ink)}
.ley em{font-style:normal;font-weight:700;background:var(--head);border-radius:99px;padding:0 8px;font-variant-numeric:tabular-nums}
.mapas{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.1fr) minmax(0,1.1fr);gap:14px;align-items:start}
.mapas.uno{grid-template-columns:minmax(0,1fr)}
.mpanel header{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}
.mpanel .pill{background:var(--canvas)}
.mpais{display:block;width:100%;height:auto;max-height:420px;overflow:visible}
.grande .mpais{max-height:640px}
.tierra{fill:var(--tierra);stroke:#fff;stroke-width:1.1;stroke-linejoin:round;vector-effect:non-scaling-stroke;transition:fill .15s}.tierra:hover{fill:#D6DAE0}
.pt{cursor:pointer;outline:none}.pt .hit{fill:transparent}
.m{stroke:#fff;stroke-width:1.6;paint-order:stroke}
.n-ok .m{fill:var(--s-ok)}.n-warn .m{fill:var(--s-warn);stroke:#7A4A05;stroke-width:1.2}.n-low .m{fill:var(--s-low)}
.pt .m{animation:mpop .32s cubic-bezier(.2,1.5,.5,1) both;animation-delay:var(--d);transition:scale .14s}
.pt:hover .m,.pt:focus-visible .m,.pt.sel .m{scale:1.35}
.pt.sel .m,.pt:focus-visible .m{stroke:var(--ink);stroke-width:2.2}
.pt.fuera{opacity:.16;cursor:default;pointer-events:none}
@keyframes mpop{from{opacity:0;scale:.2}}
.mtip{position:fixed;z-index:60;background:var(--ink);color:#fff;border-radius:9px;padding:7px 10px;font-size:12px;display:flex;flex-direction:column;gap:1px;max-width:240px;pointer-events:none;box-shadow:var(--shadow)}
.mtip span{color:#D5D8DD}.mtip b{color:#fff}
.mlista{margin-top:8px;max-height:330px;overflow:auto}
.mfila{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;width:100%;padding:6px 8px;border-radius:8px;font-size:13px}
.mfila svg{width:16px;height:16px}.mfila b{font-variant-numeric:tabular-nums}
.mfila:hover{background:var(--canvas)}.mfila.sel{background:var(--head)}.mfila:focus-visible{outline:2px solid var(--red);outline-offset:-2px}
.dcab{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.dcab .pill{flex:none}
.mnota{font-size:12px;color:var(--mid);margin-top:10px}
@media (max-width:1250px){.mapas{grid-template-columns:minmax(0,1fr)}.mpais{max-height:480px}}
@media (max-width:820px){}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-width:820px){.login{height:auto;min-height:100vh;grid-template-columns:minmax(0,1fr);grid-template-rows:300px auto}.lfoto::after{display:none}.ltag{left:16px;top:18px}.lcap{left:16px;right:16px;width:auto;bottom:14px}.lcap h2{font-size:28px}.lcap p{font-size:13px;margin-top:6px}.lcap ul{margin-top:9px;padding-top:9px}.lpanel{margin-left:0;padding:18px 16px 26px}.lpre{position:static;margin-bottom:16px}.llogos{position:static;width:100%;margin-top:22px;padding-top:16px}.foot{padding:8px 16px;flex-direction:row;gap:12px;align-items:center}.foot small{display:none}.brand{padding:14px 16px}}
@media (max-width:1050px){.g2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:820px){
  .side{position:static;width:auto}
  .nav{flex-direction:row;overflow-x:auto;padding:8px}
  .nav button{white-space:nowrap}
  main{padding-left:0}
  .wrap{padding:14px 16px 32px}
  .it{grid-template-columns:minmax(0,1fr) 46px 12px}
  .it .bar{display:none}
  .vs{grid-template-columns:minmax(0,1fr)}
  .filters{position:static}
  .count{margin-left:0;width:100%}
  .search{max-width:none}
}
@media print{.side,.filters,.pre{display:none}main{padding:0}.card,.ficha,.vs{box-shadow:none;break-inside:avoid}}

.mgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mgrid{grid-template-columns:minmax(0,1fr)}}

/* Ficha de encabezado · Resumen (Opción B) — Mystery Shopper Davivienda
   Requiere las fuentes:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700&display=swap">
*/

.ms-hero {
  position: relative;
  min-height: 232px;
  border-radius: 14px;
  overflow: hidden;
  background: #16181B;
  box-shadow: 0 6px 24px rgba(35, 38, 43, 0.12);
  font-family: "Fira Sans","Segoe UI",system-ui,sans-serif;
}

.ms-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%; /* deja el logo de Davivienda completo */
  display: block;
}

.ms-hero__velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(22, 24, 27, 0.94) 0%,
    rgba(22, 24, 27, 0.78) 36%,
    rgba(22, 24, 27, 0.12) 47%,
    rgba(22, 24, 27, 0) 56%);
}

.ms-hero__contenido {
  position: relative;
  min-height: 232px;
  box-sizing: border-box;
  max-width: 680px;
  padding: 32px 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}

.ms-hero__antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #FFFFFF;
}

.ms-hero__antetitulo::before {
  content: "";
  display: block;
  width: 24px;
  height: 2px;
  background: #E1111C; /* rojo Davivienda */
}

.ms-hero__titulo {
  margin: 0;
  font-family: "Fira Sans","Segoe UI",system-ui,sans-serif;
  font-weight: 700;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.ms-hero__texto {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #E8E6E1;
}

.ms-hero__paises {
  display: flex;
  flex-wrap: wrap;
  margin: 6px 0 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
}

.ms-hero__paises li {
  font-size: 14px;
  font-weight: 500;
  color: #FFFFFF;
  padding-right: 18px;
  margin-right: 18px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.ms-hero__paises li:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: 0;
}

/* Celular */
@media (max-width: 640px) {
  .ms-hero__contenido { padding: 28px 22px; }
  .ms-hero__titulo { font-size: 30px; }
  .ms-hero__velo { background: rgba(22, 24, 27, 0.78); }
}

/* Foto nocturna: anclada a la derecha y fundida con el fondo oscuro */
.ms-hero__img{inset:0 0 0 auto;width:auto;max-width:none;height:100%;object-fit:cover;object-position:50% 50%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 16%);mask-image:linear-gradient(90deg,transparent 0%,#000 16%)}
.ms-hero__texto{max-width:470px}
@media (max-width: 640px){.ms-hero__img{inset:0;width:100%;-webkit-mask-image:none;mask-image:none;object-position:12% 40%}}
.ms-hero{background:#030304}
@media (min-width: 641px) and (max-width: 1350px){.ms-hero__img{height:80%;top:10%;bottom:auto}}

/* Resumen: mejor evaluados + oportunidad de mejora en la misma tarjeta */
.rks{margin-top:6px}
/* Mejor evaluados y oportunidad de mejora: dos fichas apiladas en la misma columna */
.pila{display:flex;flex-direction:column;gap:14px;min-width:0}.pila>.card{flex:1}
/* Logo de CID Gallup, sutil, sobre el usuario en el menú lateral */
.cidmarca{margin-top:auto;display:flex;justify-content:center;padding:0 20px 12px}
.cidmarca img{width:74px;height:auto;opacity:.72}
@media (max-width:820px){.cidmarca{display:none}}
/* Agencias digitales */
.dcom{margin:4px 0 10px;padding:8px 11px;border-left:3px solid var(--line);border-radius:4px;background:var(--canvas);font-size:12.5px;line-height:1.45;color:var(--ink2)}
.dcom b{color:var(--ink)}