/* ============================================================
   NA — Ficha de producto: datos enriquecidos
   (chips, secciones desplegables, tablas y FAQ)
   CMP · Septiembre 2026
   ============================================================

   QUE PINTA ESTE FICHERO
   El marcado de los tres shortcodes de `includes/shop/na-ficha-datos.php`:

     [na_fp_chips]     -> ul.na-fp-chips > li.na-fp-chip > span.na-fp-chip__et
     [na_fp_secciones] -> div.na-fp-acordeon > details.na-fp-det
                            > summary.na-fp-det__t + div.na-fp-det__c
                          + p.na-fp-fuente
     [na_fp_faq]       -> section.na-fp-faq > h2.na-fp-faq__t + varios details.na-fp-det

   Las tablas (`table.na-fp-tabla`) vienen dentro del HTML saneado de cada
   seccion, o sea siempre dentro de `.na-fp-det__c`.

   DE DONDE CUELGA TODO
   De las tres raices propias `.na-fp-chips`, `.na-fp-acordeon` y `.na-fp-faq`,
   que solo existen donde las imprime este modulo. Ninguna regla de aqui puede
   alcanzar el carrito, el checkout ni «mi cuenta», que comparten con la ficha
   las clases genericas de WooCommerce (`.form-row`, `.input-text`, `.button`).

   POR ESO NO HAY NI UN `!important` EN TODO EL FICHERO
   El marcado es propio y `.na-fp-acordeon .na-fp-det__t` (0-2-0) ya gana a
   cualquier clase suelta del tema (0-1-0). El acordeon usa `<details>/<summary>`
   y NO `<button>`, con lo que esquiva por completo la trampa de especificidad
   `.elementor-kit-369 button` (0-1-1), que ganaria a una clase suelta. Si algun
   dia hiciera falta un `!important` aqui, es senal de que algo mas esta pisando
   y hay que mirar QUE, no subir el arma.

   TIPOGRAFIA
   No se declara ni una `font-family`. El sitio ya sirve Nunito (cuerpo) y
   Fredoka (titulos) y conviven >=8 fuentes de icono: cualquier regla de familia
   que se escape de su ambito convierte los glifos en cuadritos.

   COLOR
   Todo por los tokens del kit de Elementor (post 369), CON respaldo literal por
   si la hoja se sirve antes de que el kit se imprima. El unico relleno solido
   con texto blanco es `na28600a` (#28600A, 7,59:1). `vamtam_accent_1` (#8dbd2f)
   es color de ACENTO —bordes, focos, filetes—: con texto blanco encima da 2,3:1
   y falla WCAG AA, asi que nunca se usa de fondo bajo texto.
   ============================================================ */


/* ------------------------------------------------------------
   Tokens locales
   ------------------------------------------------------------
   Se declaran en las tres raices del modulo —y no en `:root`— para que vivan y
   mueran con el bloque: no ensucian el ambito global ni pueden colisionar con
   los tokens de otro modulo de na-core. Los tres shortcodes son hermanos, no
   comparten envoltorio, de ahi que el bloque se repita en la lista. */
.na-fp-chips,
.na-fp-acordeon,
.na-fp-faq {
	--na-fp-verde: var( --e-global-color-na28600a, #28600a );
	--na-fp-acento: var( --e-global-color-vamtam_accent_1, #8dbd2f );
	--na-fp-titulo: var( --e-global-color-vamtam_accent_2, #002842 );
	--na-fp-borde: var( --e-global-color-vamtam_accent_7, #e6e6e6 );
	--na-fp-superficie: var( --e-global-color-vamtam_accent_8, #f5f5f5 );

	/* Radio unico del modulo. Un solo valor —y no tres— es lo que hace que
	   chips, acordeon y tablas se lean como una pieza y no como un collage.
	   La pildora es la excepcion declarada (999px). */
	--na-fp-radio: 10px;

	/* Tokens copiados del widget `toggle` del tema, MEDIDOS en la pagina (no los
	   que declara Elementor: el kit dice Fredoka 18px y lo que se pinta de
	   verdad es Nunito 14/700). El acordeon tiene que ser indistinguible de el,
	   porque ahora viven uno al lado del otro en el mismo bloque. */
	--na-fp-tog-titulo: #2e3031;
	--na-fp-tog-titulo-activo: #000;
	/* SUBIDO de 14px a 16px (sept 2026, a peticion del usuario: «letra mas grande
	   en el detalle de producto»). Este token gobierna DOS cosas: el titulo del
	   desplegable (`.na-fp-det__t`) y TODO el cuerpo de Descripcion, secciones y
	   Envios (`.na-fp-det__c`) — son sus dos unicos consumidores en el proyecto.
	   Se deja de ser «indistinguible del toggle del tema» a proposito: el toggle
	   ya no esta en la plantilla (lo sustituyo [na_fp_secciones]), asi que no hay
	   vecino con el que empatar y manda la legibilidad del texto largo. */
	--na-fp-tog-tam: 16px;
	--na-fp-tog-aire: 25px;
	--na-fp-tarjeta-radio: 18px;
	--na-fp-tarjeta-lados: 40px;
}


/* ------------------------------------------------------------
   Chips de datos (Especie, Etapa, Presentacion…)
   ------------------------------------------------------------ */

/* Lista sin vinetas: son etiquetas, no una enumeracion que se lea en vertical.
   `flex-wrap` es obligatorio: en movil cuatro chips no caben en una linea y sin
   el envolvieran o provocarian scroll lateral de la pagina. */
.na-fp-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
	/* El widget vive en una columna flex de Elementor: sin el ancho explicito la
	   lista se encoge al contenido y los chips quedan sueltos a media linea. */
	width: 100%;
}

/* PILDORA QUE SE AJUSTA AL TEXTO, no un circulo.
   El error ya se cometio en `.onsale` (ver la cabecera de `na-oferta-badge.css`:
   ancho y alto fijos + `border-radius:50%` y el texto asomando por los lados) y
   no se repite: `inline-flex` + `width:auto` dejan que el chip mida lo que mide
   su contenido, y el radio de 999px redondea las puntas sea cual sea ese ancho.
   `width` se fija explicitamente porque el `li` de algunas hojas del tema llega
   con un ancho heredado. */
.na-fp-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	width: auto;
	max-width: 100%;
	margin: 0;
	padding: 6px 14px;
	border: 1px solid var( --na-fp-borde );
	border-radius: 999px;
	background: var( --na-fp-superficie );
	color: var( --na-fp-titulo );
	/* 13px -> 14px: sube con el cuerpo, pero se queda UN PASO por debajo de el
	   (16px). El chip es un dato-etiqueta, no prosa: si iguala al cuerpo deja de
	   leerse como pildora accesoria y compite con el titulo del producto. */
	font-size: 14px;
	line-height: 1.45;
	/* El valor puede ser largo («Aves psitacidas grandes (guacamaya, cacatua,
	   loro gris)»): se deja partir en dos lineas dentro de la pildora antes que
	   forzar el desborde con `nowrap`. */
	overflow-wrap: anywhere;
}

/* La etiqueta es lo que da sentido al dato; va en el verde de marca y en negrita
   para que se distinga del valor sin necesitar un separador grafico. Aqui el
   verde es TEXTO sobre superficie clara, no relleno: contraste de sobra. */
.na-fp-chip__et {
	color: var( --na-fp-verde );
	font-size: 11px;
	font-weight: 700;
	/* Versalita: separa etiqueta de valor por JERARQUIA, no con un separador
	   grafico, y baja el peso visual de la pildora, que competia con el titulo
	   del producto justo encima. */
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
}


/* ------------------------------------------------------------
   Acordeon de secciones — <details> / <summary>
   ------------------------------------------------------------
   Mecanica nativa del navegador: cero JS, accesible por defecto (rol, foco y
   teclado ya vienen dados) y sin `<button>`, que es lo que evita la trampa de
   `.elementor-kit-369 button`. */

/* TARJETA. El toggle del tema (Detalles / Descripcion / Envios) es una tarjeta
   blanca de radio 18px, 40px de aire lateral y 30px abajo. Acordeon y FAQ son
   ahora sus vecinos dentro del mismo contenedor de Elementor, asi que copian esa
   caja al milimetro o se leen como tres sistemas distintos apilados. */
.na-fp-acordeon,
.na-fp-faq {
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 0 var( --na-fp-tarjeta-lados ) 30px;
	border-radius: var( --na-fp-tarjeta-radio );
	background: var( --e-global-color-vamtam_accent_5, #fff );
}

/* Los items se apilan compartiendo un unico filete horizontal: sin cajas
   sueltas, sin lineas verticales. El primero recupera su borde superior para
   que el bloque quede cerrado por arriba y por abajo. */
/* El filete lo lleva el TITULO cuando esta cerrado y el CUERPO cuando esta
   abierto — asi lo hace el toggle del tema. Ponerlo en el `<details>` duplicaria
   la linea al abrir. */
.na-fp-det {
	border-bottom: 0;
}

/* El titulo del desplegable.
   `list-style: none` retira el triangulo nativo en Firefox y en los navegadores
   modernos; la regla `::-webkit-details-marker` de mas abajo hace lo propio en
   los WebKit antiguos (Safari), que ignoran la primera. Se necesitan las dos.
   `padding-right` reserva el hueco del chevron propio para que un titulo largo
   no se le meta debajo. */
.na-fp-det__t {
	position: relative;
	display: block;
	padding: var( --na-fp-tog-aire ) 0;
	border-bottom: 1px solid var( --na-fp-borde );
	color: var( --na-fp-tog-titulo );
	font-size: var( --na-fp-tog-tam );
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}

/* Abierto: el filete pasa al cuerpo y el titulo se oscurece. */
.na-fp-det[open] > .na-fp-det__t {
	border-bottom: 0;
	color: var( --na-fp-tog-titulo-activo );
}

.na-fp-det__t::-webkit-details-marker {
	display: none;
}

/* Chevron propio, dibujado con dos bordes de un cuadrado girado 45 grados: no
   depende de ninguna fuente de icono (los glifos de `theme-icons` no sobreviven
   al paso por la terminal) ni de ningun SVG externo, y hereda el color. */
/* MAS / MENOS de la fuente `theme-icons`, los mismos glifos que usa el toggle:
   `vamtam-theme-plus` = \e909 y `vamtam-theme-minus` = \e925. Se escriben por
   codigo y nunca pegando el caracter: los glifos de icono no sobreviven al paso
   por la terminal. La familia ya la registra el tema, no hace falta @font-face. */
.na-fp-det__t::after {
	content: "\e909";
	float: right;
	width: 14px;
	color: var( --na-fp-tog-titulo-activo );
	font-family: theme-icons;
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-align: right;
}

.na-fp-det[open] > .na-fp-det__t::after {
	content: "\e925";
}

.na-fp-det__t:hover {
	color: var( --na-fp-tog-titulo-activo );
}

/* Foco visible SIEMPRE: se sustituye el outline del navegador, nunca se quita a
   secas. Mismo patron que `na-rastreo.css`. */
.na-fp-det__t:focus-visible {
	outline: 2px solid var( --na-fp-acento );
	outline-offset: 2px;
}

/* EL CONTENEDOR QUE HACE SCROLL.
   `overflow-x: auto` aqui —y no en la tabla— es lo que garantiza que una tabla
   ancha se desplace DENTRO de su seccion y la pagina no tenga nunca scroll
   lateral. `max-width: 100%` evita que el contenido estire al padre flex/grid
   de Elementor, que es como se cuela el desbordamiento pese al `overflow`. */
/* EL ELEMENTO QUE ANIMA.
   `overflow: hidden` es lo que permite recortar mientras la altura transiciona;
   por eso el scroll horizontal de las tablas NO puede vivir aqui y baja a
   `.na-fp-det__i`. El `padding` tambien se muda: si se quedase en `__c`, al
   animar hasta 0px seguiria ocupando 20px y el cierre no llegaria a cero. */
.na-fp-det__c {
	max-width: 100%;
	overflow: hidden;
	padding: 0;
	border-bottom: 1px solid var( --na-fp-borde );
	font-size: var( --na-fp-tog-tam );
	line-height: 1.6;
	transition: height 0.26s ease;
}

/* Sin JS no hay `height` en linea y esta regla no estorba; con JS es el envoltorio
   cuyo alto se mide. Aqui si vive el scroll de las tablas anchas. */
.na-fp-det__i {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 20px;
}

/* Quien pide menos movimiento no recibe transicion; el JS ademas se aparta y
   deja el comportamiento nativo del `<details>`. */
@media ( prefers-reduced-motion: reduce ) {

	.na-fp-det__c {
		transition: none;
	}
}

.na-fp-det__c > *:first-child {
	margin-top: 0;
}

.na-fp-det__c > *:last-child {
	margin-bottom: 0;
}

.na-fp-det__c ul,
.na-fp-det__c ol {
	margin: 0 0 1em;
	padding-left: 1.4em;
}

.na-fp-det__c li {
	margin-bottom: 0.4em;
}

/* Los `h3`/`h4` que trae el HTML de la ficha son subtitulos DENTRO de una
   seccion ya titulada: se dejan por debajo del `summary` para no competir. */
.na-fp-det__c h3,
.na-fp-det__c h4 {
	margin: 1.2em 0 0.5em;
	color: var( --na-fp-titulo );
	/* 16px -> 17px. NO es un ajuste estetico: al subir el cuerpo a 16px estos
	   subtitulos quedaban EXACTAMENTE al tamano del parrafo y dejaban de leerse
	   como subtitulo (solo los distinguia el peso del `h`). 17px devuelve el
	   escalon minimo perceptible sin acercarlos al `summary` de la seccion, que
	   es el rotulo que manda en el bloque y tambien mide 16px pero en 700. */
	font-size: 17px;
}


/* El pie de "Ultima actualizacion / Fuente" ya no se pinta (la meta se sigue
   guardando y editando desde la pestana Ficha NA, solo que no se renderiza), asi
   que aqui no queda ninguna regla que lo estile. */


/* ------------------------------------------------------------
   Tablas de datos (ficha tecnica, analisis garantizado, transicion)
   ------------------------------------------------------------ */

/* `min-width` deliberado: por debajo de ~460px una tabla de datos se vuelve
   ilegible al comprimirse. Antes que dejarla romperse, se le permite ser mas
   ancha que el hueco y que `.na-fp-det__c` la desplace. */
.na-fp-det__c table.na-fp-tabla {
	width: 100%;
	min-width: 460px;
	margin: 0 0 1em;
	border-collapse: collapse;
	/* 14px -> 15px, un escalon por debajo del cuerpo (16px) a proposito: una
	   tabla de datos densa se lee mejor algo mas pequena que la prosa.
	   Sin riesgo de desborde: el `min-width` sigue en 460px y quien hace scroll
	   es `.na-fp-det__i`, asi que la letra mayor solo provoca mas salto de linea
	   dentro de la celda, nunca scroll lateral de la pagina. En movil se queda en
	   13px (ver el bloque de 767px). */
	font-size: 15px;
}

/* Cabecera con relleno solido: unico sitio del modulo con texto blanco, y por
   eso va en `na28600a` (7,59:1) y nunca en `accent_1` (2,3:1, falla WCAG AA). */
.na-fp-det__c table.na-fp-tabla th {
	padding: 10px 12px;
	border: 0;
	background: var( --na-fp-verde );
	color: #fff;
	font-weight: 600;
	text-align: left;
	vertical-align: middle;
}

.na-fp-det__c table.na-fp-tabla td {
	padding: 10px 12px;
	border: 0;
	border-top: 1px solid var( --na-fp-borde );
	color: var( --na-fp-titulo );
	text-align: left;
	vertical-align: top;
}

/* Filas alternas: sustituyen a las lineas verticales para guiar la lectura
   horizontal en tablas de varias columnas. */
.na-fp-det__c table.na-fp-tabla tbody tr:nth-child( even ) td {
	background: var( --na-fp-superficie );
}

/* Tabla de dos columnas etiqueta/valor: la primera celda hace de etiqueta
   cuando la fila empieza por `th` (`scope="row"`). Fondo claro, no el verde de
   cabecera, que solo corresponde a la fila de encabezado. */
.na-fp-det__c table.na-fp-tabla tbody th {
	width: 40%;
	background: var( --na-fp-superficie );
	color: var( --na-fp-titulo );
	border-top: 1px solid var( --na-fp-borde );
}


/* ------------------------------------------------------------
   Preguntas frecuentes
   ------------------------------------------------------------
   Mismo componente `.na-fp-det` del acordeon; aqui solo se aporta el titulo del
   bloque y su separacion. Mismo lenguaje visual, no un sistema nuevo. */

/* El titulo de FAQ es un rotulo de bloque, no un reclamo: al tamano anterior
   competia con el H1 del producto.
   `.na-fp-faq h2.na-fp-faq__t` (0-2-1) y no la clase suelta (0-1-0): el kit de
   Elementor define la tipografia de los encabezados y se carga DESPUES, asi que
   con la clase sola pintaba a 42px. Misma familia de trampa que
   `.elementor-kit-369 button`: subir especificidad antes que tirar de
   `!important`. */
.na-fp-faq h2.na-fp-faq__t {
	margin: 0;
	padding: var( --na-fp-tog-aire ) 0 0;
	color: var( --na-fp-titulo );
	/* 15px -> 16px: acompana la subida del cuerpo y del `summary`, con el que
	   comparte fila visual.
	   OJO, DESAJUSTE HEREDADO NO CORREGIDO: el bloque movil de mas abajo pone
	   este mismo titulo a 19px, o sea MAYOR que en escritorio, lo cual invierte
	   la escala. Parece un descuido de la version anterior (probablemente quedo
	   del tamano de antes de bajar el titulo). No se toca aqui porque lo pedido
	   fue subir tamanos, no reordenar el movil; el valor coherente seria 17px. */
	font-size: 16px;
	line-height: 1.3;
}


/* ------------------------------------------------------------
   Movil — corte unico del proyecto (767px)
   ------------------------------------------------------------
   Mismo breakpoint que el panel de filtros y las tarjetas. Aqui NO se cambia
   ninguna estructura: solo se reduce el aire y el tamano de letra. La tabla
   sigue siendo tabla y se desplaza dentro de `.na-fp-det__c`; la pagina nunca
   hace scroll lateral. */
@media ( max-width: 767px ) {

	.na-fp-chip {
		padding: 4px 12px;
		/* 12px -> 13px: mantiene el mismo escalon de -1px respecto a escritorio
		   (14px) que tenia antes respecto a los 13px. El chip envuelve
		   (`flex-wrap` + `overflow-wrap: anywhere`), asi que 1px mas no puede
		   provocar scroll lateral. */
		font-size: 13px;
	}

	/* El toggle del tema afloja a 20px de aire lateral en tablet y movil; la
	   tarjeta del acordeon hace lo mismo para que sigan alineados. */
	.na-fp-acordeon,
	.na-fp-faq {
		padding: 0 20px 20px;
	}

	.na-fp-det__t {
		padding: 18px 0;
	}

	.na-fp-det__i {
		padding-bottom: 18px;
	}

	.na-fp-det__c table.na-fp-tabla {
		/* Se afloja el minimo respecto a escritorio: con 13px de letra y menos
		   padding la tabla ya es legible mas estrecha, y cuanto menor sea el
		   minimo menos desplazamiento manual necesita el lector. */
		min-width: 380px;
		font-size: 13px;
	}

	.na-fp-det__c table.na-fp-tabla th,
	.na-fp-det__c table.na-fp-tabla td {
		padding: 8px 10px;
	}

	.na-fp-faq__t {
		font-size: 19px;
	}
}

/* -------------------------------------------------------------------------
 * Productos sin ficha: ocultar el bloque de Elementor que se queda vacio.
 *
 * El contenedor con [na_fp_secciones] y [na_fp_faq] vive en la plantilla para
 * TODOS los productos. Si los shortcodes no pintan nada sigue ocupando ~41 px
 * (su padding mas el gap del .e-con-inner) y deja un hueco visible entre el
 * resumen y los productos relacionados. La clase del body la pone
 * na-ficha-datos.php via `body_class`.
 *
 * OJO: Elementor 4.2 NO pinta `_css_classes` en el contenedor (el ajuste esta
 * guardado en _elementor_data y aun asi la clase no llega al DOM), asi que la
 * regla se cuelga tambien del id de elemento, que si esta:
 * `.elementor-element-530c837`. Si algun dia se recrea ese contenedor hay que
 * actualizar el selector -- su id esta anotado en
 * docs/plan-fichas-producto-enriquecidas.md, seccion "Change IDs de Elementor".
 * ---------------------------------------------------------------------- */
body.na-fp-sin-ficha .na-fp-bloque,
body.na-fp-sin-ficha .elementor-element-530c837 {
	display: none !important;
}