/**
 * Empleos Ahora — capa de marca del sitio.
 *
 * CSS original de White Hat Management. Define los tokens de color de la marca
 * Empleos Ahora (rojo, negro y blanco) y unos valores por defecto discretos que
 * NO compiten con los diseños de Elementor (colores de selección, foco
 * accesible, acento del enlace de salto y detalles de WooCommerce). Todo cuelga
 * de variables para poder re-tematizar con facilidad.
 *
 * @package EmpleosAhoraTema
 */

:root {
	--wh-navy: #111111;         /* Negro de la marca (fondos oscuros, texto fuerte). */
	--wh-navy-soft: #1a1a1a;
	--wh-ink: #1a1a1a;          /* Texto principal. */
	--wh-cream: #f5f5f5;        /* Gris muy claro (fondos suaves). */
	--wh-cream-light: #fafafa;
	--wh-gold: #f00909;         /* ROJO Empleos Ahora: el color de acento de la marca. */
	--wh-white: #fff;
	--wh-muted: #6b7280;
	--wh-radius: 8px;
	--wh-focus: var(--wh-gold); /* El foco accesible usa el rojo de la marca. */
}

/* Selección de texto en tono de marca. */
::selection {
	background: var(--wh-gold);
	color: var(--wh-navy);
}

/* Foco visible y accesible en toda interacción por teclado. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wh-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Enlace de salto (accesibilidad) con acento de marca. */
.skip-link:focus {
	background: var(--wh-navy);
	color: var(--wh-cream);
	outline: 2px solid var(--wh-gold);
}

/* Detalles discretos para la tienda WooCommerce, sin pisar Elementor. */
.woocommerce .onsale {
	background-color: var(--wh-gold);
	color: var(--wh-navy);
	border-radius: var(--wh-radius);
}

.woocommerce .star-rating span::before,
.woocommerce p.stars a::before {
	color: var(--wh-gold);
}

/* Marca de agua de marca en la selección de imágenes del editor, inofensiva. */
body.wh-brand {
	--wp--custom--brand--accent: var(--wh-gold);
}

/* -------------------------------------------------------------------------
 * Blindaje responsive — evita roturas y desbordes en cualquier dispositivo.
 * NO cambia márgenes ni paddings: no altera el espaciado del tema ni de
 * Elementor; solo garantiza que nada provoque scroll horizontal.
 * ------------------------------------------------------------------------- */

/* Medios siempre fluidos (el reset ya cubre img; añadimos el resto). */
img,
svg,
canvas,
video,
audio {
	max-width: 100%;
	height: auto;
}

iframe,
embed,
object {
	max-width: 100%;
}

/* Palabras y URLs muy largas no rompen el ancho en móvil. */
body {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Tablas anchas del contenido: se desplazan en su caja en vez de desbordar. */
.entry-content table,
.page-content table,
.comment-content table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Guarda de seguridad: ningún elemento debe empujar el ancho del documento. */
html,
body {
	max-width: 100%;
}