/* ============================================================================
   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; }

/* ---------- 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 los 4px que quedaban abajo. */
  .pt-filter__label {
    float: left;
    width: auto;
    margin: -4px 14px 0 0;
    line-height: 28px;
  }
}
.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; }

/* ---------- 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 i:hover ~ .pt-hint,
html[data-de-hintzone="icon"] .pt-filter__opt:has(i:hover) ~ .pt-hint,
html[data-de-hintzone="icon"] .pt-filter__opt:has(input:hover) ~ .pt-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: var(--pt-hint-delay, 500ms);
}

/* CLICK = "se oculta": al tildar la opción, la explicación llega tarde (ya
   decidiste) y encima tapa el resultado del filtro. `.pt-hint--muted` lo pone
   el JS al hacer click y se limpia cuando el mouse sale de la opción. */
.pt-filter__wrap .pt-hint--muted {
  opacity: 0 !important;
  visibility: hidden !important;
  transition-delay: 0ms !important;
}
.pt-filter__wrap:focus-within .pt-hint {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0ms;
}
/* 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; }
}