/* NME · Lector de etiquetas (lote 49). Tokens del tema nme-tienda, con respaldo si el tema no los da. */
.nme-le {
	--le-azul: var(--wp--preset--color--azul, #224e66);
	--le-azul-h: var(--wp--preset--color--azul-hover, #1a3d51);
	--le-tq: var(--wp--preset--color--turquesa, #5eacb5);
	--le-tqt: var(--wp--preset--color--turquesa-texto, #287580);
	--le-hueso: var(--wp--preset--color--hueso, #f3f6f8);
	--le-hueso2: var(--wp--preset--color--hueso-2, #e9eff3);
	--le-filete: var(--wp--preset--color--filete, #d3dee5);
	--le-ff: var(--wp--preset--color--filete-fuerte, #7c95a4);
	--le-tinta: var(--wp--preset--color--tinta, #10212b);
	--le-tinta2: var(--wp--preset--color--tinta-2, #4d6372);
	--le-error: #a3261b;
	--le-inter: var(--wp--preset--font-family--inter, Inter, system-ui, sans-serif);
	--le-pop: var(--wp--preset--font-family--poppins, Poppins, system-ui, sans-serif);
	--le-etq: 500 var(--wp--preset--font-size--etiqueta, .75rem)/1.4 var(--le-inter);
	color: var(--le-tinta);
	counter-reset: nme-sec;
}
.nme-le *, .nme-le *::before, .nme-le *::after { box-sizing: border-box; }
.nme-le p, .nme-le figure, .nme-le ol, .nme-le ul, .nme-le dl, .nme-le dd, .nme-le h3 { margin: 0; }
.nme-le .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.nme-le:not(.is-js) .nme-le__js { display: none; }

/* Entrada */
.nme-le__entradilla { max-width: 60ch; font-size: var(--wp--preset--font-size--entradilla, 1.125rem); font-weight: 300; line-height: 1.55; color: var(--le-tinta2); }
.nme-le .nme-le__privacidad { max-width: 72ch; margin-top: 16px; }
.nme-le .nme-le__enlace { margin-top: 16px; color: var(--le-tinta); font-size: .9375rem; }
.nme-le .nme-le__enlace:empty { margin: 0; border: 0; padding: 0; }
.nme-le__sinjs { margin-top: 16px; padding: 12px 16px; background: var(--le-hueso); border-radius: 6px; }
.nme-le .nme-le__sec { padding-block: clamp(40px, 2rem + 3vw, 80px); }

/* 1 · Nutriente */
.nme-le__nutrientes { display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nme-le__pildora { position: relative; display: inline-flex; }
.nme-le__pildora input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nme-le__pildora span { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border: 1px solid var(--le-ff); border-radius: 999px; background: #fff; color: var(--le-azul); font: 500 1rem/1.2 var(--le-inter); }
.nme-le__pildora:hover span { border-color: var(--le-azul); }
.nme-le__pildora input:checked + span { background: var(--le-azul); border-color: var(--le-azul); color: #fff; }
.nme-le__pildora input:checked + span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--le-tq); }
.nme-le__pildora input:focus-visible + span { outline: 2px solid var(--le-tqt); outline-offset: 3px; }

/* 2 · Dónde mirar: la etiqueta, las líneas y la lista numerada */
.nme-le__lamina { display: grid; gap: 24px 40px; }
.nme-le__lamina[hidden] { display: none; }
@media (min-width: 960px) { .nme-le__lamina { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.nme-le__fig { padding: clamp(12px, 2.5vw, 28px); background: var(--le-hueso); border-radius: 6px; }
.nme-le__lienzo { position: relative; margin-inline: auto; padding-right: 2.75rem; background: #fff; }
.nme-le__lienzo img { display: block; width: 100%; height: auto; }
@media (max-width: 599px) { .nme-le .nme-le__fig { padding: 8px; } .nme-le__lienzo { padding-right: 2rem; } }
.nme-le__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.nme-le__trazo { fill: none; stroke: var(--le-tqt); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nme-le__caja { stroke-width: 2; }
.nme-le__no { fill: none; stroke: var(--le-ff); stroke-width: 1.5; stroke-dasharray: 4 3; }
.nme-le__badge { fill: var(--le-azul); }
.nme-le__svg text { fill: #fff; font: 600 11px/1 var(--le-inter); text-anchor: middle; }
.nme-le__anim .nme-le__trazo { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s cubic-bezier(.3, .7, .2, 1) calc(var(--i) * .14s); }
.nme-le__anim .nme-le__caja { transition-duration: .45s; transition-delay: calc(var(--i) * .14s + .5s); }
.nme-le__anim.is-visto .nme-le__trazo { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .nme-le__anim .nme-le__trazo { transition: none; stroke-dashoffset: 0; } }
@media print { .nme-le__anim .nme-le__trazo { transition: none; stroke-dashoffset: 0; } }
.nme-le__fig figcaption { margin-top: 12px; font-size: .8125rem; line-height: 1.5; color: var(--le-tinta2); }
.nme-le .nme-le__pistas { padding: 0; list-style: none; counter-reset: le-p; border-top: 1px solid var(--le-filete); }
.nme-le .nme-le__pistas li { position: relative; margin: 0; padding: 14px 0 14px 40px; border-bottom: 1px solid var(--le-filete); line-height: 1.55; counter-increment: le-p; }
.nme-le__pistas li::before { content: counter(le-p); position: absolute; left: 0; top: 14px; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--le-azul); color: #fff; font: 600 .75rem/1 var(--le-inter); }
.nme-le__pistas strong { display: block; color: var(--le-azul); font-weight: 600; }
.nme-le .nme-le__precio-pista { margin-top: 14px; font-size: .875rem; color: var(--le-tinta2); }

/* 3 · Columnas de datos */
.nme-le__columnas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.nme-le__col { position: relative; min-width: 0; margin: 0; padding: 16px 16px 20px; border: 1px solid var(--le-filete); border-radius: 6px; background: var(--le-hueso); }
.nme-le__coltit { float: left; width: 100%; margin: 0 0 14px; padding: 0 76px 0 0; }
.nme-le__coltit [data-titulo] { display: block; font: 600 1.125rem/1.3 var(--le-pop); color: var(--le-azul); }
.nme-le__coltit small { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.4; color: var(--le-tinta2); }
.nme-le__quitar { position: absolute; top: 10px; right: 8px; min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--le-azul); font: 500 .875rem/1 var(--le-inter); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.nme-le__campos { clear: both; display: grid; gap: 14px; }
.nme-le__campo { display: grid; gap: 6px; min-width: 0; }
.nme-le__campo label, .nme-le__opciones legend { padding: 0; font: 500 .9375rem/1.35 var(--le-inter); color: var(--le-tinta); }
.nme-le input[type="text"], .nme-le select { width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--le-ff); border-radius: 4px; background: #fff; color: var(--le-tinta); font: 400 1rem/1.3 var(--le-inter); font-variant-numeric: tabular-nums; }
.nme-le input[readonly], .nme-le select:disabled { border-style: dashed; background: var(--le-hueso2); color: var(--le-tinta); }
.nme-le input:disabled { background: var(--le-hueso2); color: var(--le-tinta2); }
.nme-le input[aria-invalid="true"] { border-color: var(--le-error); box-shadow: inset 0 0 0 1px var(--le-error); }
.nme-le__ayuda { font-size: .8125rem; line-height: 1.45; color: var(--le-tinta2); }
.nme-le__error { font: 500 .8125rem/1.45 var(--le-inter); color: var(--le-error); }
.nme-le__opciones { display: grid; gap: 2px; min-width: 0; margin: 0; padding: 0; border: 0; }
.nme-le__opciones label, .nme-le__check { display: flex; align-items: flex-start; gap: 10px; min-height: 32px; padding-block: 4px; font-size: .9375rem; line-height: 1.4; cursor: pointer; }
.nme-le input[type="radio"], .nme-le input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--le-azul); }
.nme-le__avisos { display: grid; gap: 8px; margin-top: 16px; }
.nme-le__avisos:empty { display: none; }
.nme-le__aviso { padding: 10px 12px; border-left: 3px solid var(--le-tqt); background: #fff; font-size: .875rem; line-height: 1.5; }
.nme-le__acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; }
.nme-le__boton { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--le-azul); border-radius: 4px; background: var(--le-azul); color: #fff; font: 500 .9375rem/1.2 var(--le-inter); text-decoration: none; cursor: pointer; }
.nme-le__boton:hover { background: var(--le-azul-h); border-color: var(--le-azul-h); color: #fff; }
.nme-le__boton--linea { background: #fff; color: var(--le-azul); }
.nme-le__boton--linea:hover { background: var(--le-hueso); border-color: var(--le-azul); color: var(--le-azul); }
.nme-le__boton[hidden] { display: none; }
.nme-le .nme-le__msg { flex-basis: 100%; font-size: .875rem; color: var(--le-tinta2); }

/* 4 · Resultado */
.nme-le__tablawrap { overflow-x: auto; border: 1px solid var(--le-filete); border-radius: 6px; background: #fff; }
.nme-le .nme-le__tabla { display: table; width: 100%; max-width: none; margin: 0; table-layout: fixed; border-collapse: collapse; font: 400 .9375rem/1.4 var(--le-inter); font-variant-numeric: tabular-nums; }
.nme-le .nme-le__tabla th, .nme-le .nme-le__tabla td { padding: 12px 14px; border: 0; border-bottom: 1px solid var(--le-filete); background: none; text-align: left; vertical-align: top; overflow-wrap: anywhere; hyphens: auto; }
.nme-le .nme-le__tabla th + *, .nme-le .nme-le__tabla td + * { border-left: 1px solid var(--le-filete); }
.nme-le .nme-le__tabla tr:last-child > * { border-bottom: 0; }
.nme-le .nme-le__tabla thead > tr > * { background: var(--le-hueso); }
.nme-le .nme-le__tabla thead td { width: 34%; }
.nme-le .nme-le__tabla thead th { font: 600 1rem/1.3 var(--le-pop); color: var(--le-azul); }
.nme-le .nme-le__tabla tbody th { font-weight: 500; color: var(--le-tinta2); }
.nme-le .nme-le__tabla tbody td { color: var(--le-tinta); }
.nme-le__sub { display: block; margin-top: 4px; font: 400 .75rem/1.35 var(--le-inter); color: var(--le-tinta2); }
.nme-le__nd { font-style: italic; color: var(--le-tinta2); }
.nme-le__aprox { color: var(--le-tinta2); }
.nme-le__vacio { padding: 24px; border: 1px dashed var(--le-ff); border-radius: 6px; color: var(--le-tinta2); text-align: center; }
.nme-le .nme-le__nota { max-width: 72ch; margin-top: 12px; font-size: .8125rem; line-height: 1.55; color: var(--le-tinta2); }
.nme-le__compartir { display: grid; justify-items: start; gap: 12px; max-width: 72ch; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--le-filete); }
.nme-le__compartir p, .nme-le__compartir [data-compartido] { font-size: .875rem; line-height: 1.55; color: var(--le-tinta2); }
.nme-le__compartir [data-compartido] { width: 100%; }
.nme-le__compartir label { display: grid; gap: 6px; }
@media (max-width: 599px) {
	.nme-le .nme-le__tabla { font-size: .875rem; }
	.nme-le .nme-le__tabla th, .nme-le .nme-le__tabla td { padding: 10px 8px; }
	.nme-le .nme-le__tabla thead td { width: 30%; }
	.nme-le .nme-le__tabla thead th { font-size: .875rem; }
}

/* 5 · El de NME */
.nme-le__cierre { display: grid; gap: 20px; padding: clamp(20px, 3vw, 36px); border: 1px solid var(--le-filete); border-radius: 6px; background: #fff; }
.nme-le__cierre[hidden] { display: none; }
.nme-le .nme-le__producto { font: 600 var(--wp--preset--font-size--titulo-3, 1.1875rem)/1.3 var(--le-pop); letter-spacing: -.01em; }
.nme-le__producto a { color: var(--le-azul); text-decoration: none; }
.nme-le__producto a:hover { text-decoration: underline; }
.nme-le__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); border-top: 1px solid var(--le-filete); border-left: 1px solid var(--le-filete); }
.nme-le__datos > div { padding: 12px 14px; border-right: 1px solid var(--le-filete); border-bottom: 1px solid var(--le-filete); }
.nme-le__datos dt { font: var(--le-etq); letter-spacing: .1em; text-transform: uppercase; color: var(--le-tinta2); }
.nme-le .nme-le__datos dd { margin-top: 4px; font: 600 1.125rem/1.3 var(--le-pop); font-variant-numeric: tabular-nums; }
.nme-le__cierre > .nme-le__nota { margin: -8px 0 0; }
.nme-le__comprar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.nme-le__comprar form { margin: 0; }
.nme-le__packs { border-top: 1px solid var(--le-filete); }
.nme-le__packs summary { display: flex; align-items: center; min-height: 48px; color: var(--le-azul); font: 500 1rem/1.3 var(--le-inter); cursor: pointer; }
.nme-le__packs > p { max-width: 72ch; margin-bottom: 12px; font-size: .875rem; line-height: 1.55; color: var(--le-tinta2); }
.nme-le .nme-le__tabla--packs { table-layout: auto; }
.nme-le .nme-le__tabla--packs thead th { font: var(--le-etq); letter-spacing: .1em; text-transform: uppercase; color: var(--le-tinta2); }
.nme-le .nme-le__tabla--packs tbody th { font-weight: 500; color: var(--le-tinta); }
.nme-le__tabla--packs a { color: var(--le-azul); }
.nme-le .nme-le__guias { font-size: .9375rem; line-height: 1.6; }
.nme-le__guias span { color: var(--le-tinta2); }
.nme-le__guias a { color: var(--le-azul); }

/* Fuentes y límites */
.nme-le__fuentes { margin-top: clamp(24px, 4vw, 48px); padding-top: 20px; border-top: 1px solid var(--le-filete); }
.nme-le .nme-le__fuentes h2 { margin: 0 0 12px; font: var(--le-etq); letter-spacing: .1em; text-transform: uppercase; color: var(--le-tinta2); }
.nme-le .nme-le__fuentes ul { display: grid; gap: 8px; max-width: 82ch; padding-left: 1.2em; font-size: .8125rem; line-height: 1.6; color: var(--le-tinta2); }
.nme-le .nme-le__fuentes li { margin: 0; }
