/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */

/*
 * temas.css · TEMPORAL — selector de tonos para que el cliente compare
 *
 * Variantes de color de las bandas oscuras (hero, sección 02, cabeceras de
 * página, menú móvil y pie) sobre la misma estructura. Se activan con
 * <html data-tono="…">, que pone temas.js. Sin atributo = versión actual.
 *
 * Para quitarlo: borrar este archivo, js/temas.js y las dos líneas marcadas
 * «TEMPORAL» en layout/container.tpl. Si se elige B o C, pasar su bloque a
 * style.css (y a DESIGN.md §3.1) antes de borrar.
 */

/* ---------- B · Olivo: verde oscuro de los árboles de los renders, texto claro ---------- */
html[data-tono="olivo"]{ --olivo-900:#2C3A2E; --olivo-800:#36463A }
html[data-tono="olivo"] :is(.u-dark,.c-hero,.c-menu,.c-media__play){ background-color:var(--olivo-900) }
html[data-tono="olivo"] :is(.c-media,.c-news-card__media--steel){ background-color:var(--olivo-800) }
html[data-tono="olivo"] :is(.u-dark,.c-hero) .c-btn--primary:hover{ color:var(--olivo-900) }
html[data-tono="olivo"] :is(.c-btn--light:hover,.c-axes--dark .c-axes__card--more){ color:var(--olivo-900) }
html[data-tono="olivo"] .c-axes--dark .c-axes__card--more :is(.c-axes__title,.c-axes__text,.c-axes__link){ color:var(--olivo-900) }

/* ---------- C · Salvia: verde pastel, texto oscuro ---------- */
html[data-tono="salvia"]{ --salvia-200:#DCE4D2; --salvia-ink:#2A332C; --salvia-muted:#4A564C; --salvia-900:#2C3A2E }
/* Dentro de las bandas, los tokens «sobre oscuro» pasan a ser tinta oscura y el cobre claro pasa a cobre de texto */
html[data-tono="salvia"] :is(.u-dark,.c-hero,.c-menu){
	background-color:var(--salvia-200); color:var(--salvia-ink);
	--on-dark:var(--steel-900); --on-dark-2:var(--salvia-ink); --on-dark-muted:var(--salvia-muted);
	--line-dark:rgb(28 33 37 / .16); --surface-dark:rgb(255 255 255 / .5);
	--rib-light:rgb(255 255 255 / .35);
	--copper-300:var(--copper-700);
}
html[data-tono="salvia"] .u-dark :focus-visible,html[data-tono="salvia"] .c-hero :focus-visible,html[data-tono="salvia"] .c-menu :focus-visible{ outline-color:var(--focus) }
html[data-tono="salvia"] :is(.c-hero__title,.c-highlights a,.c-menu__link){ color:var(--steel-900) }
html[data-tono="salvia"] .c-highlights a:hover,html[data-tono="salvia"] .c-menu__link:hover{ color:var(--copper-700) }
html[data-tono="salvia"] .c-highlights li + li{ border-left-color:var(--line-dark) }
html[data-tono="salvia"] .c-btn--light{ color:var(--steel-900) }
html[data-tono="salvia"] .c-btn--light:hover{ background:var(--steel-900); border-color:var(--steel-900); color:var(--white) }
html[data-tono="salvia"] :is(.u-dark,.c-hero) .c-btn--primary:hover{ background:var(--steel-900); border-color:var(--steel-900); color:var(--white) }
html[data-tono="salvia"] .has-page-head .c-header:not(.is-scrolled){ color:var(--steel-900) }
/* El hueco del vídeo sigue siendo oscuro: se le devuelven los tokens originales */
html[data-tono="salvia"] .c-media{ background-color:var(--salvia-900); --on-dark-muted:rgb(242 240 236 / .74); --rib-light:rgb(255 255 255 / .05); --copper-300:#D9A88C }
html[data-tono="salvia"] .c-media__play{ background:var(--steel-950) }
html[data-tono="salvia"] .c-news-card__media--steel{ background-color:var(--salvia-200); --copper-300:var(--copper-700) }
html[data-tono="salvia"] .c-news-card__media--steel .u-pending{ border-color:var(--copper-700); color:var(--copper-700) }

/* ---------- Selector flotante ---------- */
.x-tonos{ position:fixed; right:0; top:50%; z-index:90; display:flex; align-items:center; transform:translateY(-50%); font:500 var(--fs-small)/1.3 var(--font-body) }
.x-tonos__tab{ min-height:44px; padding:14px 10px; border:0; border-radius:var(--radius-2) 0 0 var(--radius-2); background:var(--steel-900); color:var(--white); font:600 var(--fs-xs)/1 var(--font-body); letter-spacing:.12em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); cursor:pointer; box-shadow:var(--shadow-1) }
.x-tonos__panel{ display:grid; gap:var(--space-2); width:220px; padding:var(--space-4); background:var(--white); border:var(--border); border-right:0; border-radius:var(--radius-2) 0 0 var(--radius-2); box-shadow:var(--shadow-1); color:var(--steel-900) }
.x-tonos__title{ margin-bottom:var(--space-1); font:600 var(--fs-xs)/1.3 var(--font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--steel-700) }
.x-tonos__opt{ display:flex; align-items:center; gap:var(--space-3); min-height:44px; padding:6px 10px; border:1.5px solid var(--steel-200); border-radius:var(--radius-1); background:var(--white); color:inherit; font:inherit; text-align:left; cursor:pointer }
.x-tonos__opt:hover{ border-color:var(--steel-500) }
.x-tonos__opt[aria-pressed="true"]{ border-color:var(--copper-700); box-shadow:inset 0 0 0 1px var(--copper-700) }
.x-tonos__sw{ flex:none; width:28px; height:28px; border:1px solid rgb(0 0 0 / .12); border-radius:var(--radius-1) }
.x-tonos__note{ margin-top:var(--space-1); color:var(--steel-700); font-size:var(--fs-xs) }