/* ============================================================================
   Profile Type + rediseño de card  [MOCK, capa dev reversible]
   ----------------------------------------------------------------------------
   v3 (branch 5-8-26-figma) — colores y filtro alineados al Figma real de la
   diseñadora (ver r33-system/sembra-media/oasis-global/design/figma-review-2026-08-05.md),
   sobre la base del mock v2 (rama profile-type-mock-3-8-26):
     · 3 categorías con badges: Medio (celeste) / Creator=NCC (violeta) /
       Híbrido (ambos badges juntos), en card + tooltip + perfil.
     · Colores extraídos con grep fill=/stroke= de los SVG exportados del Figma
       (no hay Dev Mode todavía — ver "pendiente" abajo).
     · [SUPERSEDED 2026-08-12] "Texto del badge en gris neutro — así lo tiene el
       Figma": esto salía de los SVG exportados y de los PNG del 2026-08-05. El
       archivo VIVO tiene el texto COLOREADO. Ver el bloque de .pt-badge--*.
     · Se ELIMINAN las capturas de pantalla de las cards.
     · "Tipos de contenido" pasan a chips neutros con borde.
     · Sidebar: conteo dividido (medios vs NCC) + aclaración "of media outlets".
     · Filtro de categoría: radio single-select de 4 opciones (Figma), reemplaza
       el checkbox multiselect del mock v2 — ver profile-type.js.
   MOCK: el tipo se asigna por hash del nombre (sin backend). Lean hace el campo
   real. Reversible: quitar el <link>/<script> de base.html.
   [SUPERSEDED 2026-08-12] El "PENDIENTE: tipografía real (el SVG exporta el
   texto como paths) y sombras (no se encontró ninguna en los SVG)" quedó
   resuelto: la tipografía se leyó del archivo real vía MCP (2026-08-10) y la
   geometría/sombra se midieron nodo por nodo en el archivo VIVO (2026-08-12).
   El tooltip del Figma SÍ tiene sombra — la ausencia era pérdida de la
   exportación, como se sospechaba.
   ============================================================================ */

/* ---------- Badges de tipo de perfil ---------- */
.pt-badges {
  display: inline-flex;
  gap: 6px;
  vertical-align: middle;
  flex-wrap: wrap;
}

.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 11px/1 'Chivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: .01em;
  /* GEOMETRÍA MEDIDA EN EL ARCHIVO VIVO (2026-08-12, nodos 4:671 rect / 4:672
     texto / 4:675 ícono de la card "Tarjetas Project Oasis"):
       rect 88×21 · radius 7 · borde 0.5 inside
       texto 10px, empieza a 19px del borde izq del rect (o sea: 7px de padding
       + 10.13px de ícono + ~2px de gap)
       borde derecho del texto a 4px del borde derecho del rect
     El padding "más generoso" del round 4 salía de comparar contra los PNG
     exportados el 2026-08-05, que están desactualizados — el diseño real tiene
     el chip MÁS COMPACTO, no más suelto. Se revierte a los valores medidos.
     Escala: la card del Figma mide ~355px y la nuestra 320px (ratio 0.9), así
     que estos px son transferibles casi 1:1. OJO: los del TOOLTIP no lo son
     (frame de 500px contra ~330px reales) — por eso se mide sobre la card. */
  /* AJUSTE 2026-08-12 (segunda observación de Julián: "sigue faltando spacing en
     los chips"). Dato incómodo primero: medido contra el Figma, nuestro padding
     ya era LEVEMENTE MAYOR que el suyo (8/6 renderizados contra 6.8/4). Lo que
     hace que el nuestro se lea apretado no es el padding sino el TEXTO: el chip
     del Figma dice "Media outlets" (65px de texto) y el nuestro "Media" (33px),
     así que con el mismo padding absoluto la proporción aire/contenido cae a la
     mitad. Se suma aire horizontal como DESVIACIÓN DELIBERADA del Figma (no como
     corrección hacia él), manteniendo el alto en 21px que sí es el del diseño.
     La alternativa que cerraría la brecha sin desviarse —usar el texto del Figma,
     "Media outlets"/"Creators"— es una decisión de producto abierta (ver la lista
     de decisiones del entregable del día). */
  padding: 2px 10px 2px 8px;
  border-radius: 7px;
  white-space: nowrap;
  border: 0.5px solid transparent;
  background: #fff;
}
/* gap ícono→texto: ~2px en el Figma (era 7px acá, más del triple) */
.pt-badges .pt-badge { gap: 5px; }
.pt-badge i { font-size: 10px; line-height: 1; }

/* Colores del badge — REALINEADOS 2026-08-12 contra el archivo Figma VIVO
   (no contra los PNG exportados el 2026-08-05, que hoy sabemos desactualizados:
   ver design/2026-08-12-anexo-tecnico-comparacion-figma.md §segunda pasada).
   Card "Tarjetas Project Oasis" (node 11:193, muestreado a 112% de zoom):
   fill #E2F4FD, borde e ícono #31519F, y el TEXTO va coloreado, no gris — el
   "texto gris" del comentario de arriba salía de los SVG exportados viejos.
   Contraste verificado: #31519F sobre #E2F4FD = 6.62:1 (WCAG AA ✅). */
.pt-badge--media {
  color: #31519F !important;
  border-color: #31519F !important;
  background: #E2F4FD !important;
}
.pt-badge--media i { color: #31519F; }
/* Creator: fill y borde exactos del Figma (#F6F3FF / #7C6FF6). El TEXTO se
   oscurece a #5D4DF4 — mismo hue, 10% menos luminosidad — porque el #7C6FF6
   del Figma sobre su propio fill da 3.51:1 y WCAG AA pide 4.5:1 para 11px;
   #5D4DF4 da 5.0:1. Desviación consciente y mínima, anotada como pregunta
   para Carol (no se cambia el borde, que es lo que se percibe como color). */
.pt-badge--ncc {
  color: #5D4DF4 !important;
  border-color: #7C6FF6 !important;
  background: #F6F3FF !important;
}
.pt-badge--ncc i { color: #7C6FF6; }

/* ---------- Chip "Hybrid" simple (tercera variante, 2026-08-20) ----------
   La más chica de las tres opciones de HYBRID BADGE: una palabra, mismo
   ícono de combinación, en el color mezclado — sin corte diagonal ni solapa,
   para comparar contra la pill combinada (más informativa, más ancha). */
.pt-badge--hybrid-label {
  border-color: #5660CA !important;
  color: #5660CA !important;
  background: #ECEEFB !important;
}
.pt-badge--hybrid-label i { color: #5660CA; }

/* ---------- Pill combinada de híbrido (alternativa, 2026-08-20) ----------
   UN badge en vez de los 2 chips separados de arriba — fondo "cortado en
   diagonal" (transición dura, no degradé, para que se lea como un corte y no
   como una mezcla de color) y borde en el mismo #5660CA que ya usa el
   switcher CARD → bordermix (design-experiments.js §HYBRID_MIX). Toggle:
   switcher HYBRID BADGE ("Chips separados" / "Pill combinada"),
   `data-de-hybridbadge` en <html>, resuelto en profile-type.js §makeBadges. */
.pt-badge--hybrid-combo {
  /* Borde MARCADAMENTE del color mezclado — pedido de Julián 2026-08-20 (la
     variante "centro" no tiene chapita propia que cargue el color, así que
     el borde es el único elemento que lo lleva; 0.5px como el resto de los
     badges se perdía). */
  border-color: #5660CA !important;
  border-width: 1.5px !important;
  color: #5660CA !important;
  /* Corte diagonal DURO (50/50, sin transición) — pedido de Julián 2026-08-20:
     sin costura de color en el borde del corte, solo los dos tintes
     "chocando" en diagonal. La costura del intento anterior se sacó. */
  background-image: linear-gradient(135deg, #E2F4FD 0%, #E2F4FD 50%, #F6F3FF 50%, #F6F3FF 100%);
  background-color: transparent !important;
}
.pt-badge__plus {
  font-weight: 700;
  color: #605D5D;
  margin: 0 1px;
}

/* ---------- Ícono de combinación (fa-layer-group, switcher HYBRID ICON) ---------- */
.pt-badge__combo-icon { display: inline-flex; align-items: center; justify-content: center; }
.pt-badge__combo-icon--center {
  color: #5660CA;
  font-size: 10px;
  margin: 0 4px;
}

/* ---------- Variante "left": SOLAPA a borde-a-borde (reescrito 2026-08-20) ----------
   Primer intento = una chapita chica ADENTRO del pill: Julián lo corrigió,
   "el color tiene que OCUPAR la pill, no un recuadro interior". Ahora es una
   franja sólida del color mezclado que llega hasta los 4 bordes del pill
   (arriba/abajo/izquierda) — se logra con márgenes negativos verticales que
   cancelan el padding del `.pt-badge` base (2px arriba/abajo) + `padding-left: 0`
   en el pill (a la izquierda NO va margen negativo — ver nota abajo) más
   `overflow:hidden` en el pill para que las esquinas de la solapa (rectas)
   no se salgan del border-radius del pill. El texto sigue con el padding
   normal a la derecha. */
.pt-badge--hybrid-combo-flap {
  overflow: hidden;
  padding-left: 0;
  /* El corte diagonal del pill base (línea 130) se computa sobre el 50% del
     ANCHO TOTAL — flap + texto. Con el flap de 28px sumado, ese 50% cae
     lejos del "+" (pedido de Julián 2026-08-20: "la diagonal debe ir a
     donde está el +"). Se apaga acá y se mueve a `.pt-badge__flap-text`
     (ver abajo), calculado SOLO sobre el ancho del texto — mucho más cerca
     del "+", que separa las dos palabras casi a la mitad de esa franja.
     `padding-right: 0` también: el texto ahora carga su propio padding
     derecho (ver `.pt-badge__flap-text`), si no quedaba un borde blanco del
     pill base asomando después de "Creator". */
  padding-right: 0;
  background-image: none;
}
/* ⚠️ Causa REAL del "ícono descentrado" (diagnosticado 2026-08-20 midiendo
   píxeles de un screenshot a TAMAÑO REAL, sin transform ni font-size grande):
   el flexbox y el glyph estaban PERFECTOS (gaps medidos: 9px/9px horizontal,
   4.69/4.70 vertical). El bug era `margin-left: -8px`: se escribió para
   cancelar el `padding-left: 8px` del `.pt-badge` base, pero la variante
   `.pt-badge--hybrid-combo-flap` YA pone `padding-left: 0` → doble descuento.
   El flap quedaba 7px AFUERA del borde izquierdo del pill, clipeado invisible
   por su `overflow: hidden`: de los 28px del flap solo se veían ~21, y el
   ícono (centrado sobre los 28 completos) quedaba ~3.5px a la izquierda del
   centro óptico de la franja VISIBLE. Fix: margin-left 0 (el padding-left: 0
   del pill ya lleva el flap al borde).
   Lección de medición: los dos intentos de "agrandar para ver mejor"
   (transform:scale(4) y font-size:60px) dieron lecturas falsas porque ambos
   cambian la geometría relativa flap/clip/ícono — un ícono de 60px desborda la
   caja y ya no reproduce el layout real. Para juzgar centrado en cajas chicas:
   screenshot del elemento al tamaño real + zoom del PNG + medir gaps con
   getBoundingClientRect y píxeles de tinta — nunca escalar el DOM. */
.pt-badge__flap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 28px;
  margin: -2px 6px -2px 0;
  background: #5660CA;
  color: #fff;
  font-size: 10px;
}
.pt-badge__flap-text {
  display: inline-flex;
  align-items: stretch;
  white-space: nowrap;
  /* `height: 100%` NO funciona acá — `.pt-badge` (el padre flex) no tiene
     altura explícita, es `auto` por contenido, y un % contra `auto` se
     ignora. El flap de al lado se estira bien porque usa `align-self:
     stretch` (se estira contra el CROSS-SIZE de la fila flex, no contra un
     porcentaje) — mismo mecanismo acá. Bug real 2026-08-20: sin esto el
     texto quedaba ~11px de alto contra el pill de ~17-21px, dejando tiras
     sin pintar arriba/abajo — "relleno raro" reportado por Julián. */
  align-self: stretch;
  margin: -2px 0;
  padding: 0 10px 0 0;
}
/* Cada mitad es color SÓLIDO (no gradiente), anclada por estructura DOM
   exactamente al lado del "+" — ver el comentario de arriba de
   `hybridComboBadgeHTML()` en profile-type.js sobre por qué el gradiente al
   50% no servía en una caja tan ancha y baja. */
.pt-badge__half { display: inline-flex; align-items: center; }
.pt-badge__half--media { background: #E2F4FD; padding-left: 2px; }
.pt-badge__half--ncc { background: #F6F3FF; padding-right: 2px; }

/* ---------- Card: sin imagen, badge arriba del título ---------- */
/* Escopado a body.homepage: sin esto, pegaba también en la página de Advanced Search
   (ecosystem_page.html, body.ecosystem) — que no pidió sacar las imágenes de sus cards
   (efecto colateral no pedido, cazado en review adversarial 2026-08-06). */
body.homepage .card__image { display: none !important; }

/* Alineación con el resto del contenido de la card (2026-08-12, señalado por
   Julián: "el chip ahí está evidentemente mal"). `.card__content` no tiene
   padding propio: el sangrado de 10px lo ponen `.card__header` y `.stat` cada
   uno por su lado, y `.pt-badges` —que insertamos nosotros— quedaba PEGADO al
   borde izquierdo de la card (x = 1px del borde, contra 11px del título).
   En el Figma el badge arranca alineado con el título, no contra el borde.
   Se replica el mismo 10px que ya usan los hermanos, en vez de inventar uno.

   ⚠️ `display: flex`, NO `block`: `.pt-badges` trae `gap: 6px` y el gap solo
   aplica en contenedores flex/grid. Con `block` los dos badges de una card
   híbrida (Media + Creator) quedaban PEGADOS —`profile-type.js` los concatena
   sin whitespace entre medio, así que no hay ni un espacio de texto que los
   separe— y encima el mismo componente rendía distinto según el contexto
   (tooltip y perfil siguen inline-flex y sí respetaban el gap). Regresión
   introducida y cazada en el review adversarial del 2026-08-12. */
.card__content .pt-badges {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
  /* margin-top 16px (era 2px): el chip quedaba a 3px del borde superior de la
     card. En el Figma respira ~19px (medido sobre la card de "Tarjetas Project
     Oasis" a 112% de zoom). Pedido de Julián 2026-08-12: "le falta spacing
     arriba del chip". */
  margin: 16px 0 10px;
}

/* ---------- "Tipos de contenido" como chips neutros (adiós colores saturados) ---------- */
.card .stat__value .stat__colors,
.card .stat__value [class*="stat__colors"] {
  display: inline-block;
  background: #F7F8F9 !important;
  color: #4F5459 !important;
  border: 1px solid #D9DEE3 !important;
  /* radius: Figma real (node 4:455 etc.) es 7px, no pill — ver
     design/decisiones-tipografia-figma-2026-08-10.md */
  border-radius: 7px;
  padding: 4px 10px !important;
  margin: 2px 5px 2px 0 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
  /* El `font-weight: 600 !important` que estaba acá era LETRA MUERTA en la home:
     `body.homepage .card .stat__value .stat__colors` de figma-typography.css
     tiene más especificidad y lo pisa con el shorthand `font:` (que resetea el
     peso a 400). Cazado en el review adversarial 2026-08-12. Se elimina en vez
     de subir la especificidad: el Figma pide Regular, no semibold. */
}

/* ---------- Tooltip del mapa: badges ARRIBA del nombre ----------
   ⚠️ Tercer intento, y el diagnóstico correcto: el problema NUNCA estuvo en el
   badge, estaba en el PADRE. `.cardtooltip__header` es `display:flex;
   flex-direction:row` en el SCSS del core, así que `.pt-badges` y el <a> que
   envuelve título+subtítulo son dos flex items EN FILA — y ningún `display`
   que le pongas al hijo cambia eso. Los dos intentos anteriores
   (`inline-flex`→`flex` en el hijo) no podían funcionar.
   Lección: "dos cosas en la misma línea" tiene dos causas posibles — el hijo es
   inline, o el padre es flex-row. Medir el padre ANTES de tocar el hijo cuesta
   30 segundos; asumir costó dos rondas. Ver el anexo técnico del 2026-08-12. */
.cardtooltip .cardtooltip__header {
  flex-direction: column;
  align-items: flex-start;
}
.cardtooltip__header .pt-badges {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 7px;
}

/* ---------- Perfil individual: badges bajo el título ---------- */
.medium__header .pt-badges { margin: 8px 0 4px; }

/* ---------- Sidebar: conteo NCC + aclaración de org-type ---------- */
.pt-ncc-count-row { margin-top: 4px; }
.pt-ncc-number {
  font-weight: 800;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  color: #6D28D9;
}
.pt-clarif {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: .7;
  margin-top: 2px;
  font-style: italic;
}

/* ---------- Filtro de categoría (radio single-select, 4 opciones — modelo del Figma) ---------- */
.pt-filter {
  /* Es un <fieldset> real (a11y) — resetear el appearance nativo del browser
     (border/padding/min-width) para que se comporte como el div de antes. */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 4px 2px 12px;
  margin: 0 0 4px;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, .07);
  min-width: 0;
}
.pt-filter__label {
  /* Es un <legend> real (a11y). Estilo = el "Category:" del Figma EN
     (node 12:1499): bold, notorio, en el cyan de marca — no el label chiquito
     gris que tenía antes (round 4, pedido de Julián: ocupar el lugar y el
     estilo del Category del Figma, manteniendo el texto "Profile type"). */
  display: block;
  width: 100%;
  padding: 0;
  /* (el layout inline —label a la izquierda de las pills, como el Figma— se
     resuelve en el @media de abajo; acá abajo de 576px va apilado) */
  font: 700 18px/1.3 'Chivo', system-ui, sans-serif;
  /* 2026-08-12: el cyan #36C2F2 venía de la composición ES. El "Category:" del
     Figma VIVO en la composición EN es #509ECF (muestreado a 158% de zoom,
     883 px). ⚠️ A11y: #509ECF sobre el panel lavanda (#D3DCF4) da 2.15:1 —
     mejora sobre el 1.51:1 del cyan anterior pero sigue por debajo del 4.5:1
     de WCAG AA (18px bold NO califica como "large text", que empieza en
     18.66px bold). El índigo #31519F daría 5.45:1 sin salirse de la familia.
     Se aplica el valor del Figma y se sube el dato a las preguntas para Carol
     en vez de decidirlo unilateralmente. */
  color: #509ECF;
  margin-right: 8px;
}
/* Breakpoint 1024, no 576 (corregido 2026-08-12 tras la auditoría responsive):
   `.pt-filter` se inyecta dentro de `#search-box-form`, que el core esconde con
   `display:none` hasta `lg` (`_homepage.scss:513-516`). O sea que entre 576 y
   1023px esta regla no tenía dónde aplicar — era código muerto que además hacía
   creer que el filtro era responsive en ese rango.
   ⚠️ Hallazgo de producto, no de CSS: en 576-1023px **no hay filtro de tipo de
   perfil en absoluto** (ni el nuevo ni uno equivalente) porque toda la barra de
   búsqueda está oculta. Anotado como pregunta para Nahue — si se espera que
   funcione en tablet, hay que exponer el bloque, no mover este breakpoint. */
@media (min-width: 1024px) {
  /* El label va A LA IZQUIERDA de las pills, en la misma línea, como el
     "Category:" del Figma (pedido de Julián 2026-08-12). No alcanzaba con
     `width: auto`: `.pt-filter` es un <fieldset> con `display: flex` y el
     `.pt-filter__label` es su <legend> — y **un legend renderizado no es un
     flex item** (el spec lo saca del flujo normal de la caja del fieldset),
     así que siempre se quedaba en su propia línea aunque midiera 107px de
     ancho. `float: left` lo devuelve al flujo como caja flotante y las pills
     fluyen a su derecha. Verificado en runtime: label x=37, primera pill
     x=172, misma línea.
     El `line-height` iguala la altura de una pill para que el texto quede
     centrado con ellas (el float no participa del `align-items: center` del
     flex), y el `margin-top` negativo compensa lo que queda abajo.
     Recalibrado 2026-08-21: medido con getBoundingClientRect (no a ojo) tras
     los cambios de checkbox/badges — centro del label vs. centro real de la
     píldora daba delta de +2px (label 2px más arriba), la altura de pill
     vigente hoy es ~37.6px, no los ~32px de cuando se fijó -4px/28px la
     primera vez. Recalibrado a esos dos números; si vuelve a desalinearse
     tras otro cambio de tamaño de pill, medir de nuevo — no reajustar a ojo. */
  .pt-filter__label {
    float: left;
    width: auto;
    margin: -1px 14px 0 0;
    line-height: 38px;
  }
}
.pt-filter__opt {
  /* Figma real (node 12:1239/1231/1245/1232, leído vía MCP 2026-08-10): las 4
     opciones se ven TODAS igual — mismo fill celeste pálido, sin borde, sin
     distinguir "seleccionado" por color. La selección la marca solo el radio
     circle. Se agrega peso 700 en .is-on como refuerzo de accesibilidad (Ley 10
     del destilado: un solo indicador chiquito de 13px no alcanza como único
     medio de distinguir estado) — no está en el Figma, es una mejora nuestra
     que no cambia la geometría/color, ver decisiones-tipografia-figma-2026-08-10.md. */
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  padding: 4px 10px 4px 8px;
  border-radius: 7px;
  border: none;
  background: #F0FAFF;
  color: #605D5D;
  font: 400 14px/1.4 'Chivo', system-ui, sans-serif;
  transition: opacity .12s ease;
}
/* accent del radio: #549ECF en el Figma vivo (node del pill "All", 158%) — se
   usa el #509ECF del core, que es el mismo color a un dígito de distancia y ya
   es token del sitio. Antes: #36C2F2 (cyan de la composición ES). */
.pt-filter__opt input { accent-color: #509ECF; margin: 0; cursor: pointer; }
.pt-filter__opt i { font-size: 12px; }
/* Selección: solo radio + peso — sin atenuar las no-seleccionadas (el Figma
   muestra las 4 pills idénticas y plenas; el opacity .7 anterior las hacía
   ver "lavadas" sobre el fondo lavanda, round 4). */
.pt-filter__opt.is-on { font-weight: 700; }

/* ---------- Color por tipo (pedido de Julián 2026-08-20) ----------
   Se desvía a propósito del Figma ("las 4 pills se ven todas igual") para que
   cada opción del filtro tenga el MISMO color que su tag/badge en las cards
   (.pt-badge--media/.pt-badge--ncc arriba) — así se lee sin depender del ícono
   ni del texto. Aplica a radio Y checkbox por igual: en radio no hay +/= (no
   hay nada que combinar, es elección única), pero el color-coding igual aclara
   qué es cada opción, así que se porta sin condición de modo. "All" (solo
   existe en modo radio) no tiene color propio — sigue el celeste plano de
   `.pt-filter__opt` base, porque no representa un tipo, representa "todos".
   Híbrido: mismo patrón de rayas diagonales 45° que `design-experiments.js`
   ya usa para el borde "mezcla tejida" de las cards (`stripeFor()`, variante
   border2) — reusar el lenguaje visual en vez de inventar uno nuevo. */
.pt-filter__opt[data-type="media"] {
  background: #E2F4FD;
  border: 1px solid #31519F;
  color: #31519F;
}
.pt-filter__opt[data-type="ncc"] {
  background: #F6F3FF;
  border: 1px solid #7C6FF6;
  color: #5D4DF4;
}
.pt-filter__opt[data-type="hybrid"] {
  background-image: repeating-linear-gradient(45deg, #E2F4FD 0 6px, #F6F3FF 6px 12px);
  border: 1px solid #5660CA;
  color: #5660CA;
}

/* ---------- "+" entre opciones de checkbox (AND/OR aclarado por tooltip) ----------
   Mismo mecanismo de hover/focus que .pt-hint (comparte .pt-filter__wrap), así
   que hereda delay/zona/click del switcher de diseño sin código nuevo. */
.pt-filter__plus-wrap { align-items: center; }
.pt-filter__plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 700 14px/1 'Chivo', system-ui, sans-serif;
  color: #605D5D;
  background: #F0F0F0;
  cursor: help;
}
.pt-filter__plus:focus-visible { outline: 2px solid #31519F; outline-offset: 2px; }

/* ---------- "=" + resultado combinado ----------
   El resultado va APILADO A LA DERECHA del "=" (columna centrada), no en su
   propia fila de ancho completo — pedido de Julián 2026-08-20 tras ver la
   primera versión, donde el wrap del fieldset separaba el "=" de sus chips.
   `.pt-filter__combine-result` es el wrapper que los mantiene juntos como
   una sola unidad si el fieldset hace wrap por falta de ancho. */
.pt-filter__combine-result {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.pt-filter__eq {
  font: 700 16px/1 'Chivo', system-ui, sans-serif;
  color: #605D5D;
}
.pt-filter__result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.pt-result-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px 3px 7px;
  border-radius: 20px;
  font: 700 12px/1.3 'Chivo', system-ui, sans-serif;
}
.pt-result-chip[data-type="media"] { background: #E2F4FD; color: #31519F; }
.pt-result-chip[data-type="ncc"] { background: #F6F3FF; color: #5D4DF4; }
.pt-result-chip[data-type="hybrid"] {
  background-image: repeating-linear-gradient(45deg, #E2F4FD 0 6px, #F6F3FF 6px 12px);
  color: #5660CA;
}
.pt-result-empty {
  font: 400 13px/1.3 'Chivo', system-ui, sans-serif;
  font-style: italic;
  opacity: .65;
}

/* Switcher COMBINE (design-experiments.js): apaga el +/= entero sin tocar el
   color-coding de las opciones — permite comparar "solo color" vs "color +
   aclaración explícita" mirando el sitio. */
html[data-de-combine="off"] .pt-filter__plus-wrap,
html[data-de-combine="off"] .pt-filter__eq,
html[data-de-combine="off"] .pt-filter__result {
  display: none;
}

/* Switcher RESULT STYLE (design-experiments.js, condicional a COMBINE=on):
   variante "círculos" — los chips del resultado pierden el nombre y quedan
   como círculos con SOLO el ícono, en fila horizontal centrada en vez de la
   columna apilada default. El JS no cambia (mismo markup siempre — ver
   profile-type.js §updateCombinePreview); esto solo esconde el label y
   reacomoda el layout por CSS, mismo patrón que el resto del switcher. */
html[data-de-resultstyle="circles"] .pt-filter__result {
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
html[data-de-resultstyle="circles"] .pt-result-chip {
  width: 26px;
  height: 26px;
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 50%;
}
html[data-de-resultstyle="circles"] .pt-result-chip__label {
  display: none;
}

/* ---------- Tooltip explicativo de cada opción del filtro ----------
   NO se usa `title=""`: el tooltip nativo no aparece con foco de teclado, no se
   puede estilar, tarda ~1s y los lectores de pantalla lo tratan de forma
   inconsistente. Acá el texto vive en un <span> con `id`, referenciado desde el
   input con `aria-describedby` (el lector de pantalla lo anuncia como
   descripción del control) y se muestra en `:hover` Y en `:focus-within`, así
   que también aparece navegando con Tab. */
/* El wrapper es el ancla de posicionamiento y el que escucha el hover — el
   <span> del hint NO puede vivir dentro del <label>, porque el accessible name
   del input sale de todo el texto visible de su label envolvente y el lector de
   pantalla terminaba leyendo la explicación dos veces. */
.pt-filter__wrap {
  position: relative;
  display: inline-flex;
}

.pt-hint {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 50;
  width: max-content;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #31519F;
  color: #fff;
  font: 400 12px/1.4 'Chivo', system-ui, sans-serif;
  text-align: left;
  white-space: normal;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  /* Sin delay al OCULTARSE: que desaparezca al toque. El delay va solo en la
     regla de :hover/:focus-within (abajo) para que aparezca "cuando se nota que
     alguien se quedó mirando", no apenas el mouse pasa de largo. */
  transition: opacity .12s ease, transform .12s ease, visibility .12s;
  pointer-events: none;
}
/* Flechita */
.pt-hint::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 14px;
  border: 5px solid transparent;
  border-top-color: #31519F;
}
/* Delay de aparición. `--pt-hint-delay` lo setea el switcher de diseño (grupo
   DELAY) en <html>; default 500ms.
   Por qué hay delay y no aparece instantáneo: el popup es para quien NO entiende
   la opción y se queda mirándola. Si salta apenas el mouse pasa por arriba,
   molesta a quien ya sabe lo que hace y encima genera ruido visual barriendo la
   fila. Es el mismo motivo por el que el tooltip nativo del browser tiene delay
   (~1s) — el problema del nativo nunca fue el delay, era todo lo demás.
   NO se aplica al foco de teclado: quien llega con Tab está pidiendo la ayuda
   explícitamente, hacerlo esperar es castigo puro. */
.pt-filter__wrap:hover .pt-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: var(--pt-hint-delay, 500ms);
}

/* ZONA = "solo el ícono": el hover de toda la opción deja de disparar y solo lo
   hace el pasar por el ícono (o por la cajita del checkbox). Menos invasivo para
   quien ya sabe qué hace el filtro; a cambio, menos descubrible. */
html[data-de-hintzone="icon"] .pt-filter__wrap:hover .pt-hint {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0ms;
}
html[data-de-hintzone="icon"] .pt-filter__opt:has(i:hover) ~ .pt-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: var(--pt-hint-delay, 500ms);
}
/* FIX 2026-08-20: había un tercer selector acá, `.pt-filter__opt:has(input:hover)`,
   que reventaba el modo "solo el ícono" — un `<input>` DENTRO de un `<label>`
   reporta `:hover` como true en TODO el área del label (confirmado en runtime:
   `input.matches(':hover')` daba `true` con el mouse sobre el TEXTO, lejos del
   checkbox real de 13px), así que esa cláusula terminaba re-activando el hover
   de "toda la opción" — exactamente lo que este modo tenía que apagar. Se saca
   entera; el ícono solo (`i:hover`) alcanza y es fiable. También se sacó
   `.pt-filter__opt i:hover ~ .pt-hint`, que nunca podía matchear: `.pt-hint` es
   hermano de `.pt-filter__opt` (el `<label>`), NO de `i` (que vive un nivel más
   adentro) — el combinador `~` exige hermanos directos. */

/* CLICK = "se oculta": clickear una opción esconde su tooltip AL INSTANTE
   (display:none, no una transición de opacidad — así ninguna otra regla de
   :hover/:focus-within puede "ganarle" a mitad de camino) y se re-habilita
   recién cuando el mouse sale de ESA opción puntual (profile-type.js, evento
   `mouseleave` con capture por-wrap) — la próxima vez que la pasés por arriba
   vuelve a aparecer normal. Reescrito 2026-08-20: la versión anterior usaba
   opacity/visibility con !important, que competía con la regla de
   :focus-within (sin !important, no podía ganar) y con el guardado "global"
   del mouseleave del fieldset entero — funcionaba, pero era frágil y el pedido
   real de Julián era más simple: "clickear apaga, así de directo". */
.pt-hint--muted {
  display: none !important;
}
/* La última opción queda cerca del borde derecho: se ancla a la derecha para no
   desbordar el viewport. */
.pt-filter__wrap:last-of-type .pt-hint { left: auto; right: 0; }
.pt-filter__wrap:last-of-type .pt-hint::after { left: auto; right: 14px; }

/* Reduced motion: sin transición */
@media (prefers-reduced-motion: reduce) {
  .pt-badge, .pt-filter__opt { transition: none; }
  .pt-hint { transition: none; }
}

/* ---------- Empty-state del filtro (2026-08-12) ----------
   Aparece cuando el filtro de tipo de perfil deja la grilla sin cards. El texto
   lo decide profile-type.js §renderEmptyState — son DOS mensajes distintos según
   el caso, porque uno solo mentiría (ver el comentario ahí). */
.pt-empty {
  grid-column: 1 / -1;
  margin: 8px 0 32px;
  padding: 28px 24px;
  background: #fff;
  border: 1px solid #4D4D4D;
  border-radius: 10px;
  color: #4F5459;
  font: 400 16px/1.5 'Chivo', Arial, Helvetica, sans-serif;
  text-align: center;
}