/* PromoPrint · tema claro (botón del encabezado; tema.js guarda la elección).
   El sitio nace oscuro. En claro se invierten los tokens de hero.css: fondo papel cálido y texto tinta.
   Las secciones montadas sobre video o foto (hero, fabricación, portada de servicio), el banner naranja,
   la banda naranja de categorías y el pie siguen oscuras: son «islas» que recuperan los tokens del tema oscuro.
   Las fotos de producto tienen fondo de estudio; tema.js mide el color de su borde inferior (--foto-bg) y la
   tarjeta de cada foto toma ese color, así la foto se funde con su tarjeta en lugar de verse recortada. */

/* Botón (junto al de música; mismo círculo de 36 px). */
.tema {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgb(var(--paper-rgb) / 0.2);
  border-radius: 50%;
  background: transparent;
  color: rgb(var(--paper-rgb) / 0.78);
  cursor: pointer;
  transition: border-color var(--t-ui) var(--ease-ui), background-color var(--t-ui) var(--ease-ui), color var(--t-ui) var(--ease-ui);
}
.tema[hidden] { display: none; }
.tema:hover { border-color: rgb(var(--paper-rgb) / 0.5); background-color: rgb(var(--paper-rgb) / 0.06); color: var(--paper); }
.tema:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.tema svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tema__sol, .tema__luna { transform-origin: center; transition: transform 420ms var(--ease-out), opacity 220ms var(--ease-ui); }
.tema__luna { opacity: 0; transform: rotate(-60deg) scale(0.6); }
html[data-tema="claro"] .tema__sol { opacity: 0; transform: rotate(60deg) scale(0.6); }
html[data-tema="claro"] .tema__luna { opacity: 1; transform: none; }

/* Posición: escritorio, a la izquierda de la música (que ya deja sitio para «Cotizar proyecto»). */
.nav__inner > .tema { grid-column: lado-der; grid-row: 1; justify-self: end; margin: 0 calc(var(--cta-w) + 14px + 36px + 10px) 0 0; }
@media (max-width: 1080px) {
  .nav__inner > .tema { margin: 0 0 0 auto; }
  .nav__inner > .tema ~ .music { margin-inline-start: 0; }
}

/* Cambio de tema sin parpadeos de transición (tema.js pone la clase durante un instante). */
html.tema-cambiando, html.tema-cambiando *, html.tema-cambiando *::before, html.tema-cambiando *::after { transition: none !important; }

/* ---------- Tokens del tema claro ---------- */
html[data-tema="claro"] {
  --ink: #f3f1ec;
  --carbon: #ffffff;
  --paper: #161618;
  --paper-rgb: 22 22 24;
  --glass-rgb: 246 244 239;
  --paper-80: rgb(22 22 24 / 0.8);
  --paper-64: rgb(22 22 24 / 0.68);
  --hairline: rgb(22 22 24 / 0.12);
  color-scheme: light;
  /* La barra de desplazamiento sigue oscura: con color-scheme light quedaba una franja blanca junto al hero. */
  scrollbar-color: rgb(128 128 132) #141416;
}
html[data-tema="claro"] .page-tienda {
  --t-64: rgb(22 22 24 / 0.7);
  --t-48: rgb(22 22 24 / 0.56);
  --t-line: rgb(22 22 24 / 0.12);
  --t-card: #ffffff;
  --t-tile: #e9e6df;
}

/* ---------- Islas oscuras ---------- */
html[data-tema="claro"] :is(.hero, .chero, .sol, .tec__card, .fab, .sv-hero, .banner__band, .foot, .page-categoria .c-index, .sv-zoom),
html[data-tema="claro"]:has(.hero, .chero, .sv-hero) .nav:not(.is-scrolled):not([data-open]) {
  --ink: #0b0b0c;
  --carbon: #151517;
  --paper: #f4f2ee;
  --paper-rgb: 244 242 238;
  --glass-rgb: 14 14 16;
  --paper-80: rgb(244 242 238 / 0.82);
  --paper-64: rgb(244 242 238 / 0.66);
  --hairline: rgb(244 242 238 / 0.14);
  --t-64: rgb(244 242 238 / 0.66);
  --t-48: rgb(244 242 238 / 0.48);
  --t-line: rgb(244 242 238 / 0.12);
  --t-card: #141416;
  --t-tile: #101011;
  color: var(--paper); /* el color ya heredado del body es tinta: hay que volver a declararlo */
  color-scheme: dark;
}
/* La banda naranja de categorías usa tinta sobre naranja: sus tokens propios vuelven a declararse en tienda.css. */
html[data-tema="claro"] .page-categoria .c-index { --t-48: rgba(11, 11, 12, 0.72); --t-line: rgba(11, 11, 12, 0.22); }

/* Texto tinta sobre naranja: se queda tinta (en claro, var(--ink) sería papel). */
html[data-tema="claro"] :is(.t-btn--wa, .pp-prod__btn--wa, .sv-btn--wa, .vit__a--wa, .t-card:hover .t-card__go, .c-deck[aria-current="page"] .c-deck__count, .sol__cta, .wa-flot__btn) { color: #0b0b0c; }
html[data-tema="claro"] .wa-flot__bubble { background: #ffffff; color: #161618; box-shadow: 0 16px 40px -14px rgba(22, 22, 24, 0.35), 0 0 0 1px rgba(22, 22, 24, 0.06); }

/* ---------- Menú ---------- */
html[data-tema="claro"] .nav::before { background: linear-gradient(180deg, rgb(243 241 236 / 0.92) 0%, rgb(243 241 236 / 0.55) 55%, rgb(243 241 236 / 0) 100%); }
html[data-tema="claro"]:has(.hero, .chero, .sv-hero) .nav:not(.is-scrolled):not([data-open])::before { background: linear-gradient(180deg, rgba(11, 11, 12, 0.62) 0%, rgba(11, 11, 12, 0.28) 55%, rgba(11, 11, 12, 0) 100%); }
html[data-tema="claro"] .nav.is-scrolled, html[data-tema="claro"] .nav[data-open] { background-color: rgb(246 244 239 / 0.86); box-shadow: 0 10px 30px -20px rgba(22, 22, 24, 0.35); }
html[data-tema="claro"] .nav__brand img { content: url("../img/promoprint-logo-oscuro@2x.webp"); }
html[data-tema="claro"]:has(.hero, .chero, .sv-hero) .nav:not(.is-scrolled):not([data-open]) .nav__brand img { content: normal; }
html[data-tema="claro"] .nav__sub { box-shadow: 0 30px 60px -24px rgba(22, 22, 24, 0.35); }
html[data-tema="claro"] .nav__sub-link img { background: #e9e6df; }

/* ---------- Fotos: cada tarjeta toma el color de fondo de su foto ----------
   tema.js deja en la tarjeta --foto-bg (el color del borde inferior de la foto, el que toca el texto) y
   --foto-tinta (texto claro u oscuro según lo luminoso de ese color). La foto continúa en la tarjeta sin corte. */
html[data-tema="claro"] :is(.t-tile, .vit__frame, .product__media, .sv-work__btn) { background-color: var(--foto-bg, #e9e6df); }
html[data-tema="claro"] :is(.t-card, .product__card) {
  --t-48: rgb(var(--foto-tinta, 22 22 24) / 0.62);
  --muted: rgb(var(--foto-tinta, 22 22 24) / 0.62);
  border-color: transparent;
  background: var(--foto-bg, #ffffff);
  color: rgb(var(--foto-tinta, 22 22 24));
  box-shadow: 0 1px 2px rgba(22, 22, 24, 0.05), 0 18px 40px -24px rgba(22, 22, 24, 0.5);
  transition: background-color 600ms var(--ease-ui), color 600ms var(--ease-ui), border-color var(--t-ui) var(--ease-ui), box-shadow var(--t-ui) var(--ease-ui);
}
html[data-tema="claro"] :is(.t-card, .product__card):hover { border-color: rgba(253, 87, 0, 0.6); box-shadow: 0 1px 2px rgba(22, 22, 24, 0.05), 0 26px 50px -24px rgba(22, 22, 24, 0.6); }
/* Unión foto-texto: un fundido corto al color de la tarjeta, por si el borde de la foto no es parejo. */
html[data-tema="claro"] :is(.t-card .t-tile, .product__media) { position: relative; }
html[data-tema="claro"] :is(.t-card .t-tile, .product__media)::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 18%; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--foto-bg, transparent));
}
html[data-tema="claro"] .t-card__go { z-index: 1; color: #f4f2ee; }
html[data-tema="claro"] .c-feature .t-tile { box-shadow: 0 40px 90px -50px rgba(22, 22, 24, 0.55); }

/* Marcas: los logos son blancos de una tinta; en claro pasan a tinta, misma forma. */
html[data-tema="claro"] .brands__item img { filter: brightness(0); --logo-tone: 0.58; }

/* Guía rápida de técnicas (servicios): tabla sobre papel blanco. */
html[data-tema="claro"] .sv-cmp__scroll,
html[data-tema="claro"] :is(.sv-cmp__table tbody th, .sv-cmp__table thead td) { background: #ffffff; }
html[data-tema="claro"] .sv-cmp__table :is(th[aria-current="page"], td.is-actual) { background: rgba(253, 87, 0, 0.07); }
/* En el teléfono la tabla es una ficha de una sola técnica (servicios.css): sin columna iluminada. */
@media (max-width: 860px) {
  html[data-tema="claro"] .sv-cmp__table :is(th[aria-current="page"], td.is-actual) { background: none; }
}

/* Barra fija de cotizar (ficha en el teléfono): vidrio claro. */
html[data-tema="claro"] :is(.p-dock, .pp-prod__dock) { background: rgb(246 244 239 / 0.94); box-shadow: 0 -10px 30px -20px rgba(22, 22, 24, 0.35); }

/* Catálogo (catalogo.html): buscador y orden sobre papel. */
html[data-tema="claro"] .page-catalogo { --card: #ffffff; }
html[data-tema="claro"] .sort select option { background: #ffffff; color: #161618; }