/* ARCA del Tormes — catálogo de componentes migrados a capa.
   ============================================================================
   Fase 4 del plan de theme (docs/THEME-ARCA.md). Cada pieza de aquí sustituye
   COMPLETAMENTE a su versión anterior en el mismo movimiento: fragmento viejo
   retirado del fichero de origen, fragmento nuevo añadido aquí, en la capa
   `componentes`. Nunca se deja un lado sin capa y el otro con capa -- una
   regla sin capa gana siempre a una con capa aunque tenga menos
   especificidad (verificado en vivo, ver comentario en base.html sobre la
   Fase 3), así que migrar solo la mitad rebajaría la prioridad del
   fragmento migrado en silencio.
   ============================================================================ */

@layer componentes {

/* ── cat-record-banner ──────────────────────────────────────────────────
   Fusiona dos piezas que eran la misma estructura con dos nombres:
   .cat-economia-banner (open-context.css) y .cat-servicios__banner
   (open-context.css). No son duplicados accidentales -- economía usa
   verde (#1d4a35) y servicios usa navy (#244e63/#173746) a propósito, es
   una distinción de color real -- así que la fusión conserva ambos tonos
   como variante, no los borra. Estructura y comportamiento idénticos a
   los dos originales, verificado con captura y getComputedStyle antes de
   retirar las reglas viejas. */
.cat-record-banner {
  display: flex;
  align-items: center;
  gap: .9rem;
  cursor: pointer;
  list-style: none;
}
.cat-record-banner::-webkit-details-marker { display: none; }
.cat-record-banner__text {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .8rem;
  min-width: 0;
}
.cat-record-banner__text h3 {
  margin: 0;
  font: clamp(1.3rem, 2.4vw, 1.7rem) var(--cat-serif);
}
.cat-record-banner__count {
  flex-shrink: 0;
  color: #fff;
  border-radius: 999px;
  padding: .15rem .65rem;
  font-size: .8rem;
  font-weight: 700;
}
.cat-record-banner__link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 2.75rem;
  padding: .45rem .9rem;
  border: 1px solid;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease;
}

/* Variante comercio (verde) -- igual que .cat-economia-banner antes.
   El enlace vive FUERA del <summary> (dentro de .cat-economia__intro-row),
   así que su color no puede depender de ser descendiente de
   .cat-record-banner--comercio -- lleva la propia clase modificadora
   encima, selector compuesto, no descendiente.
   El margin propio del enlace (frente a la variante servicios, que no lo
   lleva) se conserva tal cual estaba: la caja original ya lo tenía dentro
   de .cat-economia__intro-row y quitarlo habría movido el enlace unos px. */
.cat-record-banner--comercio .cat-record-banner__text h3 { color: #1d4a35; }
.cat-record-banner--comercio .cat-record-banner__count { background: #1d4a35; }
.cat-record-banner__link.cat-record-banner--comercio {
  margin: 1rem clamp(1.2rem, 3vw, 2rem) 0;
  border-color: #1d4a35;
  background: #eef4f2;
  /* !important real, no decorativo: sin capa, "a { color: ... }"
     (catalogo.css) le ganaba a este color pese a tener menos especificidad
     -- confirmado en vivo, verde sustituido por navy. Motivo: una regla
     sin capa gana siempre a una con capa para propiedades sin !important
     en ninguno de los dos lados (ver nota de la Fase 3 en base.html). */
  color: #1d4a35 !important;
}
.cat-record-banner__link.cat-record-banner--comercio:hover { background: #dcebe4; }
.cat-record-banner__link.cat-record-banner--comercio:focus-visible { outline: 3px solid #1d4a35; outline-offset: 2px; }

/* Variante servicios (navy) -- igual que .cat-servicios__banner antes.
   Mismo motivo: el enlace lleva la clase modificadora directamente. */
.cat-record-banner--servicios .cat-record-banner__text h3 { color: #173746; }
.cat-record-banner--servicios .cat-record-banner__count { background: #244e63; }
.cat-record-banner__link.cat-record-banner--servicios {
  border-color: #244e63;
  background: #eef2f5;
  /* Mismo motivo que en la variante comercio -- aquí coincide por casualidad
     con el navy de "a { color }", pero se fija igual para no depender de
     esa coincidencia si ese valor cambia algún día. */
  color: #173746 !important;
}
.cat-record-banner__link.cat-record-banner--servicios:hover { background: #dfe7eb; }
.cat-record-banner__link.cat-record-banner--servicios:focus-visible { outline: 3px solid #244e63; outline-offset: 2px; }

/* Los dos originales usaban puntos de corte moviles DISTINTOS (economia
   560px, servicios 40rem=640px) -- se conservan exactos, fusionarlos en
   uno solo habria cambiado el comportamiento real de uno de los dos entre
   560 y 640px. */
@media (max-width: 560px) {
  .cat-record-banner--comercio { flex-wrap: wrap; row-gap: .7rem; }
  .cat-record-banner--comercio h3 { flex-basis: 100%; font-size: 1.35rem; }
  /* Bug real senalado por el propietario (captura: oval gigante con el
     texto partido en dos lineas): flex-basis:100% estiraba el enlace a
     todo el ancho de la fila mientras conservaba border-radius:999px (la
     pastilla del catalogo), dando una forma de estadio en vez de un boton
     normal. Los botones-pastilla del catalogo real (.demo-cta,
     .demo-stats-action__btn) nunca se estiran a ancho completo -- se
     quitan flex-basis/text-align y se centra con margin-inline:auto,
     igual que hace .cat-record-banner--servicios en su propio breakpoint
     mas abajo. */
  .cat-record-banner__link.cat-record-banner--comercio { margin-inline: auto; }
}
@media (max-width: 40rem) {
  .cat-record-banner--servicios { flex-wrap: wrap; }
  .cat-record-banner__link.cat-record-banner--servicios { justify-content: center; }
}

/* cat-data-kpis (open-context.css) y cat-home-kpis (catalogo.css):
   revisados para fusionar como "banda de cifras duplicada" -- NO se
   fusionan. No es un duplicado accidental: usan marcado distinto (<dl>
   vs <article>) Y color opuesto a propósito -- home-kpis es blanco
   transparente, pensado para ir sobre el fondo oscuro del héroe de
   portada; data-kpis es rojo sobre crema, pensado para fondo claro. Son
   dos variantes legítimas del mismo concepto (clara/oscura), como ya
   propone el catálogo aprobado (kpi-band dorada / stats-action navy) --
   se documentan como dos fichas del catálogo, no se colapsan en una. */

/* ── cat-card ────────────────────────────────────────────────────────
   Pieza real del catalogo aprobado (ficha breve de una entidad).
   Sustituye a .cat-economia-card (open-context.css), primera de las
   ~20 variantes de tarjeta del sitio en migrarse. Mismo comportamiento
   y contenido que el original, solo con los nombres/colores del
   catalogo -- verificado con captura antes de retirar la version vieja. */
.cat-card {
  min-width: 0;
  border: 1px solid var(--cat-line);
  border-top: 3px solid var(--cat-gold);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--cat-surface), #f7f2e6);
  box-shadow: 0 2px 8px rgb(21 37 46 / 7%);
  transition: transform .18s ease, box-shadow .18s ease, border-top-color .18s ease;
}
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgb(18 46 59 / 16%); }
.cat-card__link { display: flex; flex-direction: column; height: 100%; min-width: 0; color: inherit; text-decoration: none; }
.cat-card__body { display: grid; align-items: start; gap: .3rem; flex: 1; min-width: 0; padding: 1rem; overflow-wrap: anywhere; }
.cat-card__title { margin: 0 0 .1rem; color: var(--cat-blue-deep); font-size: 1rem; font-weight: 700; }
/* Bug real confirmado contra el catalogo real (artifact, no la
   documentacion del proyecto): el eyebrow del catalogo es una PASTILLA
   (fondo, borde, radio 999px), con color por categoria de contenido
   (demo-card__eyebrow--comercio/--salud/...) -- aqui era texto plano de
   un unico color fijo, sin pastilla y sin variante. Se corrige la forma;
   las variantes de color por categoria quedan documentadas como
   pendientes (necesitan dato de categoria en las plantillas que aun no
   existe -- ver docs/THEME-ARCA.md). */
.cat-card__eyebrow {
  display: inline-block;
  justify-self: start;
  margin: 0 0 .1rem;
  padding: .2rem .6rem;
  border: 1px solid var(--cat-line);
  border-radius: 999px;
  background: #f7f2e6;
  color: var(--cat-blue-deep);
  font-weight: 700;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cat-card__text { display: block; color: var(--cat-ink-soft); font-size: .82rem; font-style: normal; }
/* Bug real confirmado: el CTA del catalogo es un boton-pastilla pequeño
   (radio 999px, navy/blanco, dorado al pasar el raton), dentro del
   cuerpo de la tarjeta -- aqui era una barra inferior a todo lo ancho,
   con un filete divisor propio y el color por defecto invertido
   (crema/navy en reposo, navy/blanco solo al pasar el raton). */
.cat-card__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: .3rem 1rem 1rem;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--cat-blue-deep);
  color: #fff;
  font-size: .74rem;
  font-weight: 700;
  transition: background .15s ease;
}
.cat-card:hover .cat-card__cta { background: var(--cat-gold); }
.cat-card__link:focus-visible { outline: 3px solid var(--cat-blue-deep); outline-offset: 2px; }

} /* fin @layer componentes */