/* =============================================================
   AspiradoraLab — PROTOTIPO de iconografía + jerarquía (aislado)
   =============================================================
   Se carga SOLO en 3 páginas de prueba:
     - categorias.html
     - categoria-aspiradoras-sin-cable.html
     - aspiradora-arena-gato.html

   Aislamiento: todo selector va prefijado por body[data-icons="proto"],
   que solo existe en el <body> de esas 3 páginas. Es un prototipo
   DISTINTO e independiente del prototipo visual anterior
   (body[data-proto="visual"], assets/css/aspiradoralab-visual-prototype.css):
   ambos pueden convivir en la misma página (arena-gato.html los lleva los
   dos) sin pisarse, porque no comparten ningún selector.

   Objetivo: (1) iconos SVG propios reutilizables vía <use> a símbolos
   embebidos en cada página (sin sprite externo, sin librerías, sin JS);
   (2) distinguir visualmente FAMILIA (icono con anillo, como el logo)
   de CASO ESPECÍFICO (icono sin anillo, más pequeño).
   ============================================================= */

body[data-icons="proto"] {
  /* -----------------------------------------------------------
     Símbolos SVG: <use> hereda el color de texto vía currentColor,
     así que un mismo símbolo sirve para versión "familia" (más
     grande, con anillo) y "caso" (más pequeña, sin anillo) sin
     duplicar paths.
     ----------------------------------------------------------- */
}

/* Contenedor del icono de FAMILIA: pictograma + anillo, igual que el
   logo (anillo de acento + centro sólido). El anillo es lo que dice
   "esto es una familia", no el dibujo interior. */
body[data-icons="proto"] .icon-family {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--surface); border: 1.5px solid var(--accent-dark);
  color: var(--accent-dark);
}
body[data-icons="proto"] .icon-family svg { width: 26px; height: 26px; }

/* Contenedor del icono de CASO: mismo lenguaje de trazo, sin anillo,
   más pequeño y con relleno plano — para que nunca se confunda con
   una familia aunque comparta forma de pictograma. */
body[data-icons="proto"] .icon-case {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-dark);
}
body[data-icons="proto"] .icon-case svg { width: 16px; height: 16px; }

/* -----------------------------------------------------------
   Bloque "familia" (categorias.html): cabecera clicable (icono +
   nombre + frase) y, debajo, los casos específicos como chips
   dentro de la MISMA tarjeta — visualmente "pertenecen" a la
   familia sin necesitar una tarjeta propia ni un clic adicional.
   ----------------------------------------------------------- */
body[data-icons="proto"] .problem-family-grid {
  display: grid; gap: 1.1rem; grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  body[data-icons="proto"] .problem-family-grid { grid-template-columns: repeat(2, 1fr); align-items: start; }
}
body[data-icons="proto"] .problem-family {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-l);
  padding: 1.3rem 1.4rem; scroll-margin-top: calc(var(--header-h) + 1rem);
}
body[data-icons="proto"] .problem-family-head {
  display: flex; gap: 1rem; align-items: flex-start; text-align: left;
}
body[data-icons="proto"] .problem-family-head h3 { font-size: 1.05rem; margin-bottom: .25rem; }
body[data-icons="proto"] .problem-family-head:hover h3 { color: var(--accent-dark); }
body[data-icons="proto"] .problem-family-head .desc { font-size: .86rem; color: var(--ink-soft); }
body[data-icons="proto"] .problem-cases {
  display: flex; flex-wrap: wrap; gap: .55rem;
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border);
}
body[data-icons="proto"] .problem-case {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .35rem .8rem .35rem .35rem; border-radius: 999px;
  background: var(--surface-2); font-size: .84rem; font-weight: 600; color: var(--ink);
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
body[data-icons="proto"] .problem-case:hover { background: var(--accent-soft); color: var(--accent-dark); }

/* -----------------------------------------------------------
   "Dónde estoy" — chip de contexto en páginas de caso (arena de
   gato): muestra familia → caso actual con los mismos iconos,
   para orientar sin repetir headings ni añadir un diagrama nuevo.
   ----------------------------------------------------------- */
body[data-icons="proto"] .context-trail {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-bottom: 1rem; font-size: .82rem; font-weight: 600; color: var(--ink-soft);
}
body[data-icons="proto"] .context-trail a {
  display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-soft);
}
body[data-icons="proto"] .context-trail .icon-case { width: 22px; height: 22px; }
body[data-icons="proto"] .context-trail .icon-case svg { width: 13px; height: 13px; }
body[data-icons="proto"] .context-trail a:hover { color: var(--accent-dark); }
body[data-icons="proto"] .context-trail .sep { color: var(--ink-faint); }

/* -----------------------------------------------------------
   Iconos dentro de .tool-card (sin-cable.html, sección "¿Qué te
   preocupa de verdad?"): el contenedor .tool-card .icon ya existe
   en styles.css (52px, fondo accent-soft) — aquí solo se asegura
   que el SVG interior (ahora un pictograma propio vía <use>) se
   vea nítido a ese tamaño.
   ----------------------------------------------------------- */
body[data-icons="proto"] .tool-card .icon svg { width: 26px; height: 26px; }

@media (prefers-reduced-motion: reduce) {
  body[data-icons="proto"] * { transition: none !important; }
}