:root {
  --aqua-deep:      var(--ocean);              /* #066EC8 */
  --aqua-soft:      var(--foam);               /* #c3eafd */
  --aqua-line:      var(--line);               /* rgba(10,58,84,.13) */
  --ink-soft:       var(--slate);              /* #456475 */
  --surface:        var(--white);              /* #ffffff */
  --r:              var(--radius);             /* 18px */

  /* Semitransparentes derivados de las variables institucionales */
  --paper-alpha:    rgba(247, 251, 252, .92);  /* --paper + opacidad — topbar */
  --mist-alpha:     rgba(235, 247, 255, .94);  /* --mist + opacidad — controls */
  --aqua-glow-1:    rgba(35, 210, 250, .12);   /* --aqua — eyebrow bg */
  --aqua-glow-2:    rgba(35, 210, 250, .22);   /* --aqua — eyebrow border */
  --tide-glow:      rgba(35, 165, 250, .28);   /* --tide — radial hero */
  --deep-hero-1:    rgba(5, 70, 128, .92);     /* --deep — capa hero */
  --deep-hero-2:    rgba(5, 70, 128, .78);     /* --deep mid */
  --deep-hero-3:    rgba(5, 70, 128, .45);     /* --deep fade */
  --white-chip-bg:  rgba(255, 255, 255, .08);  /* blanco transparente — chip bg */
  --white-chip-bd:  rgba(255, 255, 255, .18);  /* blanco transparente — chip border */
  --green-soft:     rgba(70, 165, 0, .10);     /* --green — badge open / availability bg */
  --green-border:   rgba(70, 165, 0, .28);     /* --green — badge open / availability border */

  /* Grises para card-disabled (sin equivalente en global.css) */
  --disabled-bg:     #f5f7f8;
  --disabled-border: #d8dee2;
  --disabled-text:   #6d7780;
  --disabled-bg-alt: #edf0f2;
  --disabled-bd-alt: #d7dde1;
}

/* ---------- topbar de catálogo (header sticky blanco) ---------- */
.cat-topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper-alpha);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
.cat-topbar .wrap {
  display: flex;
  align-items: center;
  gap: 22px;
  height: var(--header-height);
}

.crumb {
  font-size: .74rem;
  color: var(--slate);
  letter-spacing: .04em;
  display: flex;
  gap: 8px;
  align-items: center;
}
.crumb b { color: var(--ink); font-weight: 700; }

.topnav { margin-left: auto; display: flex; gap: 6px; }
.topnav a {
  font-size: .82rem;
  color: var(--slate);
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 10px;
  font-weight: 700;
}
.topnav a:hover { color: var(--ink); background: var(--foam); }
.topnav a.home { color: var(--ocean); font-weight: 800; }

/* ---------- eyebrow dentro del hero oscuro ---------- */
.cat-hero .eyebrow {
  color: var(--aqua);
  background: var(--aqua-glow-1);
  border-color: var(--aqua-glow-2);
}

/* ---------- hero ---------- */
.cat-hero {
  position: relative;
  overflow: hidden;
  color: var(--foam);

  background-image:
    linear-gradient(
      90deg,
      var(--deep-hero-1) 0%,
      var(--deep-hero-2) 48%,
      var(--deep-hero-3) 100%
    ),
    url("../../assets/images/carrusel/imgCarrusel2.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.cat-hero .wrap { padding: 54px 28px 64px; position: relative; z-index: 2; }
.cat-hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.2rem);
  font-weight: 700;
  color: var(--white);
  max-width: 18ch;
  margin-top: 12px;
  letter-spacing: -.02em;
}
.cat-hero p.lead { margin: 16px 0 0; max-width: 56ch; font-size: 1.04rem; color: var(--foam); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; }
.chip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--white-chip-bg);
  border: 1px solid var(--white-chip-bd);
  border-radius: 12px;
  padding: 9px 13px;
}
.chip .n { font-family: "Roboto"; font-weight: 700; font-size: 1.02rem; color: var(--white); }
.chip .l {
  font-family: "Roboto Mono", monospace;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--foam);
}
.hero-wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; line-height: 0; }
.hero-wave svg { display: block; width: 100%; height: 60px; }

/* ---------- controls (sticky) ---------- */
.controls {
  position: sticky;
  top: var(--header-height);
  z-index: 40;
  background: var(--mist-alpha);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.controls .wrap { padding: 18px 28px 14px; }
.searchrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.search { flex: 1; min-width: 240px; position: relative; }
.search input {
  width: 100%;
  font-family: "Roboto", sans-serif;
  font-size: .96rem;
  padding: 12px 14px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: var(--ink);
}
.search input:focus {
  outline: 2px solid var(--aqua);
  outline-offset: 1px;
  border-color: var(--aqua);
}
.search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); opacity: .5; }
.selects { display: flex; gap: 10px; flex-wrap: wrap; }
.selects select {
  font-family: "Roboto", sans-serif;
  font-size: .88rem;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  cursor: pointer;
}
.selects select:focus {
  outline: 2px solid var(--aqua);
  outline-offset: 1px;
  border-color: var(--aqua);
}
.catbar { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px; }
.catchip {
  font-family: "Roboto Mono", monospace;
  font-size: .74rem;
  letter-spacing: .02em;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: .15s;
}
.catchip .swatch { width: 9px; height: 9px; border-radius: 50%; }
.catchip:hover { border-color: var(--ocean); }
.catchip.active { color: var(--white); border-color: transparent; }
.statusrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.count { font-family: "Roboto Mono", monospace; font-size: .82rem; color: var(--slate); }
.count b { color: var(--ink); font-weight: 700; }
.clear {
  font-family: "Roboto Mono", monospace;
  font-size: .76rem;
  color: var(--ocean);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 8px;
}
.clear:hover { background: var(--foam); }
.clear[hidden] { display: none; }

/* ---------- grid + cards ---------- */
.catalog { padding: 34px 0 56px; }
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 20px;
}
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.card:hover {
  transform: translateY(-3px);
  border-color: var(--ocean);
  box-shadow: var(--shadow);
}
.card .toprow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.code {
  font-family: "Roboto Mono", monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--slate);
}
.badges { display: flex; gap: 7px; align-items: center; }
.b-open {
  font-family: "Roboto Mono", monospace;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.b-status {
  font-family: "Roboto Mono", monospace;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.b-status.nuevo {
  color: var(--ocean);
  background: var(--foam);
  border: 1px solid var(--aqua-line);
}
.b-status.actualizado {
  color: var(--slate);
  background: var(--mist);
  border: 1px solid var(--line);
}
.cat {
  font-family: "Roboto Mono", monospace;
  font-size: .68rem;
  letter-spacing: .03em;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
}
.cat .swatch { width: 8px; height: 8px; border-radius: 50%; }
.card h3 { font-size: 1.08rem; line-height: 1.2; color: var(--rust); }
.card .desc { color: var(--slate); font-size: .9rem; margin: 0; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag {
  font-family: "Roboto Mono", monospace;
  font-size: .66rem;
  color: var(--ocean);
  background: var(--foam);
  border: 1px solid var(--aqua-line);
  padding: 3px 8px;
  border-radius: 999px;
}
.cmeta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: "Roboto Mono", monospace;
  font-size: .68rem;
  color: var(--slate);
  border-top: 1px solid var(--line);
  padding-top: 13px;
  margin-top: auto;
}
.cmeta span { display: inline-flex; align-items: center; gap: 5px; }
.cmeta .dot { color: var(--tide); }
.go {
  font-family: "Roboto Mono", monospace;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ocean);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  transition: gap .15s;
}
.card:hover .go { gap: 10px; }

.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty svg { opacity: .4; margin-bottom: 14px; }
.empty h3 { font-size: 1.15rem; color: var(--ink); margin-bottom: 6px; }


/* ---------- disponibilidad del dataset ---------- */
.b-availability {
  font-family: "Roboto Mono", monospace;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.b-availability.ready {
  color: var(--green);
  background: var(--green-soft);
  border: 1px solid var(--green-border);
}

.b-availability.development {
  color: var(--disabled-text);
  background: var(--disabled-bg-alt);
  border: 1px solid var(--disabled-bd-alt);
}

/* Dataset sin acceso todavía */
.card-disabled {
  cursor: not-allowed;
  background: var(--disabled-bg);
  border-color: var(--disabled-border);
  box-shadow: none;
  filter: grayscale(.75);
  opacity: .72;
}

.card-disabled:hover {
  transform: none;
  border-color: var(--disabled-border);
  box-shadow: none;
}

.card-disabled .go {
  color: var(--disabled-text);
}

.card-disabled:hover .go {
  gap: 6px;
}

.card-disabled .cat,
.card-disabled .tag {
  opacity: .78;
}

@media(max-width: 760px) {
  .topnav, .crumb { display: none; }
  .grid { grid-template-columns: 1fr; }
  .controls { top: var(--header-height); }
}
@media(prefers-reduced-motion: reduce) { .card { transition: none; } }

.cat-topbar .nav-links {
  margin-left: auto;
}