/* Comparador PUC — hoja de estilo compartida por las matrices Cooperativa y Grupo. */
:root{
  --ink:#0c2e27; --deep:#0e4d45; --deep2:#0a3a34; --mint:#3fd6a8; --mint-soft:#d7f4ea;
  --cream:#f6f3ec; --card:#fffdf8; --line:#e3ddd0; --muted:#5d6f6a;
  --pos:#0e9f6e; --pos-bg:#e2f6ee; --neg:#d6552f; --neg-bg:#fbe9e1; --amber:#e8a13c;
  --shadow:0 1px 0 rgba(12,46,39,.04),0 10px 30px -12px rgba(12,46,39,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Manrope',sans-serif;background:var(--cream);color:var(--ink);line-height:1.5;
  background-image:radial-gradient(circle at 12% -5%,rgba(63,214,168,.10),transparent 40%),radial-gradient(circle at 92% 0%,rgba(14,77,69,.07),transparent 35%);
  background-attachment:fixed;min-height:100vh}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
header{padding:30px 0 22px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:13px}
.logo{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;overflow:hidden;background:transparent}
.logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand h1{font-family:'Manrope';font-weight:800;font-size:1.18rem;letter-spacing:-.02em}
.brand .url{font-size:.78rem;color:var(--muted);font-weight:600}
.tag{margin-left:auto;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--deep);background:var(--mint-soft);padding:7px 13px;border-radius:999px;border:1px solid rgba(14,77,69,.12)}
.matrix-nav{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.matrix-nav a{font-size:.8rem;font-weight:700;text-decoration:none;color:var(--muted);background:var(--card);border:1px solid var(--line);padding:9px 16px;border-radius:999px;transition:.2s}
.matrix-nav a:hover{color:var(--deep);border-color:var(--mint)}
.matrix-nav a.on{background:var(--deep);color:#fff;border-color:var(--deep);box-shadow:var(--shadow)}
.hero{padding:46px 0 18px}
.hero .eyebrow{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.2em;color:var(--deep);margin-bottom:14px}
.hero h2{font-family:'Fraunces';font-weight:900;font-size:clamp(2rem,5vw,3.3rem);line-height:1.02;letter-spacing:-.02em;max-width:16ch}
.hero h2 em{font-style:italic;color:var(--deep)}
.hero p{margin-top:18px;max-width:62ch;color:var(--muted);font-size:1.03rem}
.matrix-pill{margin-top:22px;display:inline-flex;align-items:center;gap:10px;font-size:.83rem;font-weight:600;color:var(--ink);background:var(--card);border:1px solid var(--line);padding:9px 15px;border-radius:999px;box-shadow:var(--shadow)}
.matrix-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 4px rgba(63,214,168,.25)}
.matrix-pill .dot.load{background:var(--amber);box-shadow:0 0 0 4px rgba(232,161,60,.25);animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
.matrix-pill b{font-family:'JetBrains Mono';color:var(--deep)}
.stage{margin:34px 0 10px}
.drop{background:var(--card);border:2px dashed var(--line);border-radius:20px;padding:48px 30px;text-align:center;cursor:pointer;transition:.25s;position:relative;overflow:hidden}
.drop.disabled{opacity:.5;pointer-events:none}
.drop:hover,.drop.drag{border-color:var(--mint);background:linear-gradient(180deg,#fff,var(--mint-soft));transform:translateY(-1px)}
.drop .ic{width:62px;height:62px;border-radius:16px;background:var(--mint-soft);display:grid;place-items:center;margin:0 auto 16px;border:1px solid rgba(14,77,69,.1)}
.drop .ic svg{width:30px;height:30px;color:var(--deep)}
.drop h3{font-family:'Fraunces';font-weight:600;font-size:1.35rem;margin-bottom:6px}
.drop p{color:var(--muted);font-size:.92rem}
.drop .browse{color:var(--deep);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fname{margin-top:14px;font-family:'JetBrains Mono';font-size:.82rem;color:var(--deep);font-weight:600}
.config{display:none;margin-top:18px;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;box-shadow:var(--shadow);gap:26px;flex-wrap:wrap;align-items:flex-end}
.config.show{display:flex}
.cfg-group label{display:block;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:7px}
.cfg-group select{font-family:'Manrope';font-weight:600;font-size:.9rem;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--ink);cursor:pointer;min-width:190px}
.cfg-group select:focus{outline:2px solid var(--mint)}
.run{margin-left:auto;font-family:'Manrope';font-weight:800;font-size:.92rem;background:var(--deep);color:#fff;border:none;padding:13px 26px;border-radius:12px;cursor:pointer;transition:.2s;box-shadow:var(--shadow)}
.run:hover{background:var(--deep2);transform:translateY(-1px)}
.note{font-size:.8rem;color:var(--muted);margin-top:12px;display:flex;gap:7px;align-items:flex-start}
.note svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--amber)}
#results{display:none;margin:42px 0 60px}
#results.show{display:block;animation:fade .5s ease}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .lab{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:8px}
.kpi .val{font-family:'Fraunces';font-weight:900;font-size:1.85rem;letter-spacing:-.02em;line-height:1}
.kpi .sub{font-size:.76rem;color:var(--muted);margin-top:6px;font-weight:500}
.kpi.feature{background:linear-gradient(140deg,var(--deep),var(--deep2));color:#fff;grid-column:span 2}
.kpi.feature .lab{color:rgba(255,255,255,.7)}
.kpi.feature .val{font-size:2.6rem}
.kpi.feature .sub{color:rgba(255,255,255,.75)}
.kpi.feature .spark{position:absolute;right:-10px;bottom:-14px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(63,214,168,.4),transparent 65%)}
.kpi .val.pos{color:var(--pos)} .kpi .val.neg{color:var(--neg)}
@media(max-width:620px){.kpi.feature{grid-column:span 1}.kpi.feature .val{font-size:2rem}}
.bar-wrap{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:22px;box-shadow:var(--shadow)}
.bar-wrap h4{font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:12px}
.bar{height:30px;border-radius:9px;display:flex;overflow:hidden;background:var(--cream)}
.bar .seg{height:100%;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;white-space:nowrap;transition:width .8s ease}
.bar .seg.pos{background:linear-gradient(90deg,#13b07a,var(--pos))}
.bar .seg.neg{background:linear-gradient(90deg,var(--neg),#e8744f)}
.bar-leg{display:flex;gap:20px;margin-top:11px;font-size:.78rem;color:var(--muted);font-weight:600}
.bar-leg span{display:flex;align-items:center;gap:6px}
.bar-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.tbl-head{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.tbl-head h3{font-family:'Fraunces';font-weight:600;font-size:1.45rem}
.search{margin-left:auto;display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 13px}
.search input{border:none;background:none;font-family:'Manrope';font-size:.88rem;color:var(--ink);width:170px}
.search input:focus{outline:none}
.search svg{width:15px;height:15px;color:var(--muted)}
.export{font-family:'Manrope';font-weight:700;font-size:.82rem;background:var(--mint-soft);color:var(--deep);border:1px solid rgba(14,77,69,.15);padding:9px 16px;border-radius:10px;cursor:pointer;transition:.2s}
.export:hover{background:var(--mint);color:#06231e}
.tbl-scroll{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.86rem}
thead th{background:#0e4d45;color:#fff;font-weight:700;text-align:right;padding:13px 14px;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;white-space:nowrap;user-select:none}
thead th:first-child,thead th:nth-child(2){text-align:left}
thead th:hover{background:#0a3a34}
thead th .ar{opacity:.4;font-size:.7rem}
thead th.sorted .ar{opacity:1}
tbody td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
tbody td:first-child{font-family:'JetBrains Mono';font-weight:600;color:var(--deep);text-align:left}
tbody td:nth-child(2){text-align:left;color:var(--ink);font-weight:500}
tbody tr:hover{background:var(--mint-soft)}
tbody tr:last-child td{border-bottom:none}
.chip{font-family:'JetBrains Mono';font-weight:600;font-size:.82rem;padding:3px 9px;border-radius:7px;display:inline-block}
.chip.pos{background:var(--pos-bg);color:var(--pos)} .chip.neg{background:var(--neg-bg);color:var(--neg)}
tfoot td{padding:14px;background:#f0ece2;font-weight:800;text-align:right;border-top:2px solid var(--deep)}
tfoot td:first-child{text-align:left;font-family:'Manrope'}
.unmatched{font-size:.82rem;color:var(--muted);margin-top:16px;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.unmatched b{color:var(--ink)}
footer{padding:30px 0 50px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;text-align:center}
.hidden{display:none!important}