:root{
  --navy:#0F4A8A;
  --navy-deep:#0B3A6E;
  --cyan:#1C9AD6;
  --cyan-ink:#0C6FA0;
  --tint:#EAF5FC;
  --tint-strong:#DCEEFA;
  --line:#CFE4F4;
  --ink:#1B2733;
  --muted:#6B7B8C;
  --paper:#FFFFFF;
  --bg:#F4F8FB;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} }
html,body{margin:0;padding:0;}
body{
  font-family:'Segoe UI','Helvetica Neue',Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.4;
}
a{color:var(--navy);}
.muted{color:var(--muted);}
img{max-width:100%;}

/* ---------- TOPBAR ---------- */
.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:#FFFFFF;
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 4px rgba(15,74,138,0.06);
}
.topbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}
.topbar-logo{ height:42px; display:block; }
.brand-home{ background:none; border:none; padding:0; margin:0; cursor:pointer; line-height:0; border-radius:8px; transition:transform .1s ease; }
.brand-home:active{ transform:scale(.95); }
.topbar-search{
  flex:1;
  min-width:180px;
  position:relative;
}
.topbar-search input{
  width:100%;
  padding:9px 14px 9px 34px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:14px;
  background:var(--bg) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%236B7B8C" stroke-width="2"><circle cx="6.5" cy="6.5" r="5"/><line x1="10.5" y1="10.5" x2="15" y2="15"/></svg>') no-repeat 12px center;
}
.topbar-search input:focus{ outline:2px solid var(--cyan); background-color:#fff; }
.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 16px;
  border-radius:8px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .1s ease, background .15s ease;
}
.btn:active{ transform:scale(.96); }
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ background:var(--navy-deep); }
.btn-outline{ background:#fff; color:var(--navy); border-color:var(--line); }
.btn-outline:hover{ background:var(--tint); }
.btn-danger{ background:#B4232C; color:#fff; }
.btn-danger:hover{ background:#8F1B22; }
.btn-sm{ padding:5px 10px; font-size:12.5px; }
.link-quiet{ color:var(--muted); font-size:13px; text-decoration:none; }
.link-quiet:hover{ color:var(--navy); text-decoration:underline; }
@media (prefers-reduced-motion: reduce){ .btn, .btn:active{ transition:none; transform:none; } }

/* ---------- SUBBAR (quicknav, sticky under topbar) ---------- */
.subbar{
  position:sticky;
  top:var(--topbar-h, 63px);
  z-index:19;
  background:var(--bg);
  border-bottom:1px solid var(--line);
  box-shadow:0 4px 10px -8px rgba(15,74,138,0.25);
}
.subbar-inner{
  max-width:1100px;
  margin:0 auto;
  padding:10px 20px;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.quicknav{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex:1 1 auto;
}
.quicknav a{
  background:#fff;
  border:1px solid var(--line);
  color:var(--navy-deep);
  font-weight:600;
  font-size:12.5px;
  padding:6px 14px;
  border-radius:999px;
  text-decoration:none;
  transition:transform .1s ease, background .15s ease, color .15s ease;
}
.quicknav a:hover{ background:var(--tint); }
.quicknav a:active, .chip-home:active, .fab-top:active{ transform:scale(.93); }
.quicknav a.is-active{ background:var(--navy); color:#fff; border-color:var(--navy); }
.chip-home{
  flex:0 0 auto;
  background:#fff;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  transition:transform .1s ease, background .15s ease, color .15s ease;
}
.chip-home:hover{ background:var(--tint); color:var(--navy-deep); }
@media (prefers-reduced-motion: reduce){
  .quicknav a, .chip-home, .fab-top{ transition:none; }
  .quicknav a:active, .chip-home:active, .fab-top:active{ transform:none; }
}

/* ---------- STATS STRIP ---------- */
.stats-strip{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  padding-top:4px;
}
.stat-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px;
  box-shadow:0 1px 3px rgba(15,74,138,0.06);
}
.stat-card .num{ font-size:24px; font-weight:800; color:var(--navy-deep); font-variant-numeric:tabular-nums; }
.stat-card .label{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; font-weight:700; }
@media (max-width:640px){ .stat-card .num{ font-size:19px; } .stat-card{ padding:10px 12px; } }

/* ---------- FLOATING BACK-TO-TOP ---------- */
.fab-top{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:30;
  width:44px;
  height:44px;
  border-radius:50%;
  border:1px solid var(--line);
  background:var(--navy);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 24px -6px rgba(0,0,0,0.35);
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background .15s ease;
}
.fab-top.show{ opacity:1; pointer-events:auto; transform:translateY(0); }
.fab-top:hover{ background:var(--navy-deep); }
@media (prefers-reduced-motion: reduce){ .fab-top{ transition:none; } }

/* ---------- CONTENT ---------- */
.content{
  max-width:1100px;
  margin:0 auto;
  padding:18px 20px 60px;
}
.group-banner{
  margin:26px 0 12px;
  padding:12px 20px 16px;
  background:linear-gradient(90deg,var(--navy-deep) 0%, var(--navy) 60%, var(--cyan) 100%);
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  scroll-margin-top:var(--sticky-h, 118px);
  position:relative;
  overflow:hidden;
}
.group-banner::after{
  content:"";
  position:absolute; left:0; bottom:0; height:8px; width:calc(100% + 44px);
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0NCIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgNDQgOSI+PHBhdGggZD0iTTAgNSBRIDUuNSAwIDExIDUgVCAyMiA1IFQgMzMgNSBUIDQ0IDUgVjkgSDAgWiIgZmlsbD0iI2ZmZmZmZiIvPjwvc3ZnPg==");
  background-repeat:repeat-x; background-size:44px 9px; opacity:.5;
  animation:veloswim-wave 7s linear infinite; pointer-events:none;
}
@keyframes veloswim-wave{ from{ background-position-x:0; } to{ background-position-x:44px; } }
@media (prefers-reduced-motion: reduce){ .group-banner::after{ animation:none; } }
.group-banner:first-of-type{ margin-top:6px; }
.group-banner h2{
  color:#fff;
  margin:0;
  font-size:17px;
  letter-spacing:1.5px;
  font-weight:700;
  text-transform:uppercase;
}
.group-banner img{ height:34px; width:auto; }

table.cat{
  width:100%;
  border-collapse:collapse;
  margin-bottom:18px;
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 1px 3px rgba(15,74,138,0.06);
}
tr.cat-title{ cursor:pointer; user-select:none; }
tr.cat-title td{
  background:var(--tint-strong);
  color:var(--navy-deep);
  font-weight:700;
  font-size:13.5px;
  padding:9px 14px;
  border-left:4px solid var(--cyan);
}
tr.cat-title:hover td{ background:var(--tint); }
tr.cat-title .chevron{
  display:inline-block;
  font-size:10px;
  color:var(--muted);
  margin-right:7px;
  transform:rotate(90deg);
  transition:transform .2s ease;
}
table.cat.is-collapsed tr.cat-title .chevron{ transform:rotate(0deg); }
table.cat.is-collapsed.force-open tr.cat-title .chevron{ transform:rotate(90deg); }
tr.cat-title .cat-count{
  color:var(--muted);
  font-weight:600;
  font-size:12px;
  margin-left:4px;
}
table.cat.is-collapsed thead tr.col-head{ display:none; }
table.cat.is-collapsed tbody{ display:none; }
table.cat.force-open thead tr.col-head{ display:table-row; }
table.cat.force-open tbody{ display:table-row-group; }
@media (max-width:640px){
  table.cat.force-open thead tr.col-head{ display:block; }
  table.cat.force-open tbody{ display:block; }
}
tr.col-head th{
  background:#F6FBFE;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.5px;
  text-transform:uppercase;
  text-align:left;
  padding:7px 14px;
  border-bottom:1.4px solid var(--navy);
}
tr.col-head th.num{ text-align:right; }
tr.col-head th.actions{ text-align:right; width:1%; white-space:nowrap; }
tbody tr td{
  padding:8px 14px;
  border-bottom:1px solid var(--line);
  font-size:13.5px;
  vertical-align:middle;
}
tbody tr:nth-child(even) td{ background:var(--tint); }
tbody tr td{ transition:box-shadow .12s ease; }
tbody tr:hover td{ box-shadow:inset 3px 0 0 var(--cyan); }
tbody tr.no-match{ display:none; }
td.codigo{
  font-family:'Consolas','Courier New',monospace;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap;
}
td.nombre{ color:var(--ink); }
td.num{ white-space:nowrap; padding-left:10px; padding-right:16px; }
td.num .price{ display:flex; justify-content:space-between; align-items:baseline; font-variant-numeric:tabular-nums; }
td.num .cur{ opacity:0.75; font-weight:400; padding-right:2px; }
td.reg{ color:var(--navy-deep); font-weight:700; }
td.efec{ color:var(--cyan-ink); font-weight:700; }
td.actions{ text-align:right; white-space:nowrap; }

.category-empty{ padding:16px; color:var(--muted); font-style:italic; }
.empty-state{
  text-align:center;
  padding:60px 20px;
  color:var(--muted);
}

/* ---------- FOOTER ---------- */
.site-footer{
  text-align:center;
  padding:24px 20px 40px;
  color:var(--muted);
  font-size:12.5px;
}
.site-footer a{ color:var(--muted); }

@media (max-width: 640px){
  table.cat, thead, tbody, th, td, tr { display:block; }
  tr.col-head{ display:none; }
  tbody tr{ border-bottom:1px solid var(--line); padding:8px 0; }
  tbody tr td{ border:none; padding:3px 14px; }
  td.num .price{ justify-content:flex-start; gap:6px; }
  td.num::before{ content: attr(data-label); display:inline-block; min-width:110px; font-size:11px; color:var(--muted); text-transform:uppercase; }
}