/*
Theme Name: San Victorino
Theme URI: https://sanvictorino.local/
Description: Tema hijo liviano para el catálogo mayorista de San Victorino. Sin maquetador, sin dependencias y sin fuentes remotas. Solo añade el estilo de los bloques propios (marca, condiciones de venta, escalas) sobre Twenty Twenty-Five.
Author: Cosmonaut
Template: twentytwentyfive
Version: 0.2.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: san-victorino
*/

/*
 * Solo lo que el tema padre no cubre. Cada regla existe por un bloque concreto que
 * imprime el plugin; no hay estilos «por si acaso».
 *
 * Prohibido en este archivo: @import de fuentes remotas, CDN, iconos de terceros.
 * El sitio anterior del cliente pesaba 15 MB y esa es una de las razones del
 * reemplazo.
 *
 * ---------------------------------------------------------------------------
 * REGLA DE COLOR: NADA DE @media (prefers-color-scheme)
 * ---------------------------------------------------------------------------
 * La versión 0.1.0 definía una paleta propia y la invertía con
 * `@media (prefers-color-scheme: dark)`. Estaba mal y produjo un bug visible:
 * Twenty Twenty-Five NO sigue la preferencia del sistema —renderiza su paleta
 * clara siempre— así que con el sistema en oscuro la caja de marca se ponía
 * oscura dentro de una página blanca, y encima el texto seguía heredando el
 * #111 del tema. Texto oscuro sobre fondo oscuro.
 *
 * La preferencia del sistema no dice nada sobre en qué paleta está renderizando
 * el tema. Lo único que lo sabe es el tema. Así que aquí todo se deriva de:
 *
 *   var(--wp--preset--color--contrast)  el color de texto del tema
 *   var(--wp--preset--color--base)      el fondo del tema
 *   currentColor                        vía color-mix, que es el idioma del propio
 *                                       TT5 (su accent-6 es exactamente esto)
 *
 * Así el bloque se adapta solo a cualquier variación de estilo, clara u oscura,
 * sin que este archivo tenga que enterarse.
 */

:root {
	/* Texto y fondo: siempre los del tema. */
	--sv-tinta:  var(--wp--preset--color--contrast, #111111);
	--sv-fondo:  var(--wp--preset--color--base, #ffffff);

	/* Texto secundario. accent-4 es el gris del tema; el fallback lo calcula. */
	--sv-tinta-suave: var(--wp--preset--color--accent-4, color-mix(in srgb, currentColor 62%, transparent));

	/* Superficies y bordes derivados de currentColor: funcionan sobre cualquier
	   fondo, claro u oscuro, sin declarar dos paletas. */
	--sv-superficie: color-mix(in srgb, currentColor 5%, transparent);
	--sv-linea:      color-mix(in srgb, currentColor 18%, transparent);
	--sv-linea-tenue: color-mix(in srgb, currentColor 10%, transparent);

	/* Colores semánticos mezclados HACIA el color de texto del tema. Sobre un
	   tema claro (contrast oscuro) se oscurecen; sobre uno oscuro (contrast
	   claro) se aclaran. En los dos casos mantienen contraste y siguen siendo
	   reconocibles como verde, rojo y ámbar. */
	--sv-ok:     color-mix(in srgb, #1a7a4f 68%, var(--wp--preset--color--contrast, #111111));
	--sv-alerta: color-mix(in srgb, #c0392b 68%, var(--wp--preset--color--contrast, #111111));
	--sv-aviso:  color-mix(in srgb, #a06a00 68%, var(--wp--preset--color--contrast, #111111));

	--sv-radio: 10px;
}

/* --- El aviso que ve el anónimo donde iría el precio ---------------------- */
/*
 * Es la pieza de interfaz más importante del sitio: es donde se explica el muro.
 * Tiene que invitar a registrarse sin parecer un error.
 *
 * Usa currentColor y no un verde fijo: así es legible en cualquier paleta. Un
 * verde de marca aquí se volvería ilegible en cuanto alguien active una variación
 * de estilo oscura, y esta es justo la pieza que no se puede permitir eso.
 */
.sv-precio-oculto {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.3;
}
.sv-precio-oculto a {
	display: inline-block;
	padding: .5rem .9rem;
	border: 1px solid color-mix(in srgb, currentColor 38%, transparent);
	border-radius: var(--sv-radio);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.sv-precio-oculto a:hover,
.sv-precio-oculto a:focus-visible {
	background: color-mix(in srgb, currentColor 9%, transparent);
	border-color: color-mix(in srgb, currentColor 60%, transparent);
}

/* --- Bloque de marca en la ficha, y datos en la página de tienda ---------- */
.sv-marca,
.sv-tienda-datos {
	margin: 1.25rem 0;
	padding: .9rem 1.05rem;
	border: 1px solid var(--sv-linea);
	border-radius: var(--sv-radio);
	background: var(--sv-superficie);
	/* Explícito: heredar el color del tema. Sin esto, cambiar el fondo del bloque
	   deja el texto al azar, que es el bug que tuvo la 0.1.0. */
	color: inherit;
	font-size: .9375rem;
	line-height: 1.55;
}
.sv-marca p,
.sv-tienda-datos p { margin: 0 0 .35rem; }
.sv-marca p:last-child,
.sv-tienda-datos p:last-child { margin-bottom: 0; }

.sv-marca__nombre { font-size: 1.0625rem; }
.sv-marca__nombre a { color: inherit; }

.sv-marca__ubicacion,
.sv-marca__horario,
.sv-marca__vigencia { color: var(--sv-tinta-suave); }

.sv-marca__madrugon { color: var(--sv-aviso); font-weight: 600; }

/* El rango por docena es público: el único dato de precio que un visitante sin
   cuenta puede ver, y lo que lo invita a registrarse. Se destaca. */
.sv-marca__rango { margin-top: .55rem; }
.sv-marca__rango .sv-rango-docena {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.sv-rango-docena small {
	font-weight: 400;
	color: var(--sv-tinta-suave);
}

.sv-marca__whatsapp { margin-top: .55rem; }
.sv-marca__whatsapp a {
	display: inline-block;
	min-height: 40px;
	padding: .45rem .85rem;
	border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	border-radius: var(--sv-radio);
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}
.sv-marca__whatsapp a:hover,
.sv-marca__whatsapp a:focus-visible {
	background: color-mix(in srgb, currentColor 9%, transparent);
}

/* --- Condiciones de venta ------------------------------------------------ */
.sv-condiciones {
	list-style: none;
	margin: 1.25rem 0;
	padding: 0;
	font-size: .9375rem;
}
.sv-condiciones li { margin-bottom: .3rem; }

.sv-disponibilidad--disponible  { color: var(--sv-ok); font-weight: 600; }
.sv-disponibilidad--agotado     { color: var(--sv-alerta); font-weight: 600; }
.sv-disponibilidad--bajo_pedido { color: var(--sv-aviso); font-weight: 600; }

/* Que quede claro de quién es el dato: el sistema no lleva inventario. */
.sv-nota-disponibilidad { margin-top: .4rem; }
.sv-nota-disponibilidad small { color: var(--sv-tinta-suave); }

/* --- Escalas por cantidad (solo comprador verificado) -------------------- */
.sv-escalas-publicas {
	width: 100%;
	max-width: 24rem;
	margin: 1.25rem 0;
	border-collapse: collapse;
	font-size: .9375rem;
}
.sv-escalas-publicas caption {
	margin-bottom: .4rem;
	font-weight: 600;
	text-align: left;
}
.sv-escalas-publicas th,
.sv-escalas-publicas td {
	padding: .4rem .55rem;
	border-bottom: 1px solid var(--sv-linea-tenue);
	text-align: left;
}
.sv-escalas-publicas th { font-weight: 400; color: var(--sv-tinta-suave); }
.sv-escalas-publicas td { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --- Tabla de escalas en el formulario del vendedor --------------------- */
.sv-escalas { width: 100%; margin-bottom: 1rem; border-collapse: collapse; }
.sv-escalas th {
	padding: .3rem;
	font-size: .8125rem;
	text-align: left;
	color: var(--sv-tinta-suave);
}
.sv-escalas td { padding: .2rem; }
.sv-escalas input { width: 100%; min-height: 40px; }

/* Las tablas anchas se desplazan dentro de su caja; la página nunca. */
.sv-escalas-publicas,
.sv-escalas { display: block; overflow-x: auto; }

/* --- Imágenes: nunca desbordan ------------------------------------------ */
.woocommerce-product-gallery img,
.wc-block-components-product-image img { max-width: 100%; height: auto; }

/* Respeta a quien pidió menos movimiento. */
@media (prefers-reduced-motion: reduce) {
	.sv-marca *,
	.sv-precio-oculto * { transition: none !important; animation: none !important; }
}