/*!
Theme Name: Generadores Eléctricos
Theme URI: https://generadorelectrico.com.mx
Author: Generadores Eléctricos
Author URI: https://generadorelectrico.com.mx
Description: Tema personalizado para Generadores Eléctricos. Diseñado para venta y catálogo de generadores eléctricos con WooCommerce.
Version: 1.0.35
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: generadores-electricos
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, woocommerce

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Generadores Eléctricos is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
# TAILWIND CSS CONFIGURATION
--------------------------------------------------------------*/

/* Este tema usa Tailwind CSS via CDN
   Los estilos se aplican directamente en las clases HTML
   Este archivo solo contiene estilos de impresión y overrides mínimos
*/

/* Reset básico
--------------------------------- */
body {
	background-color: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Open Sans', sans-serif;
	color: #373737;
}

#page {
	background-color: #FFFFFF !important;
	position: relative;
}

/* Asegurar que el contenido del hero sea visible
--------------------------------- */
#hero {
	position: relative;
	z-index: 1;
}

.hero-content {
	position: relative;
	z-index: 30 !important;
	pointer-events: auto;
}

/* Asegurar que el video no bloquee clics
--------------------------------- */
.hero-video-bg {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* Hero Video Loader
--------------------------------- */
.hero-video-loader {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #00546A;
	transition: opacity 0.5s ease-out;
}

.hero-video-loader.hidden {
	opacity: 0;
	pointer-events: none;
}

.hero-video-loader-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: hero-loader-spin 1s linear infinite;
}

@keyframes hero-loader-spin {
	to {
		transform: rotate(360deg);
	}
}

.hero-overlay {
	position: absolute !important;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: none;
}

/* Print Styles for Technical Sheet (PDF)
--------------------------------- */
@media print {
	/* Ocultar elementos innecesarios al imprimir */
	.sticky-header,
	.site-footer,
	.bonhoeffer-modal-close,
	.bonhoeffer-modal-actions,
	#distribuidor,
	#categorias,
	#hero,
	.bonhoeffer-modal-overlay {
		display: none !important;
	}

	/* Solo mostrar el modal al imprimir */
	.bonhoeffer-modal {
		position: static !important;
		max-width: 100% !important;
		margin: 0 !important;
		box-shadow: none !important;
		overflow: visible !important;
	}

	.bonhoeffer-modal-overlay {
		position: static !important;
		background: white !important;
	}

	/* Asegurar que el contenido sea legible */
	body {
		color: #000 !important;
		background: #fff !important;
	}

	.bonhoeffer-modal-header {
		border-bottom: 3px solid #00546A !important;
		margin-bottom: 2rem;
	}

	.bonhoeffer-modal-gallery img {
		page-break-inside: avoid;
		max-width: 100%;
	}

	.bonhoeffer-modal-features {
		page-break-inside: avoid;
	}

	/* Asegurar que el texto sea negro */
	h1, h2, h3, h4, h5, h6, p, span, div {
		color: #000 !important;
	}
}

/*--------------------------------------------------------------
# WORDPRESS CORE STYLES (Mínimo necesario)
--------------------------------------------------------------*/

/* Alignments
--------------------------------- */
.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* Captions
--------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

/* Galleries
--------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: calc(50% - 0.75em);
}

.gallery-columns-3 .gallery-item {
	max-width: calc(33.33% - 1em);
}

.gallery-columns-4 .gallery-item {
	max-width: calc(25% - 1.125em);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# PRODUCT DESCRIPTION STYLES
--------------------------------------------------------------*/

/* Ensure paragraphs in product descriptions have proper spacing */
.bonhoeffer-modal-description p,
.bonhoeffer-product-description p {
	margin-bottom: 1em;
	line-height: 1.6;
}

.bonhoeffer-modal-description p:last-child,
.bonhoeffer-product-description p:last-child {
	margin-bottom: 0;
}

/* Preserve headings in description */
.bonhoeffer-modal-description h1,
.bonhoeffer-modal-description h2,
.bonhoeffer-modal-description h3,
.bonhoeffer-modal-description h4,
.bonhoeffer-product-description h1,
.bonhoeffer-product-description h2,
.bonhoeffer-product-description h3,
.bonhoeffer-product-description h4 {
	margin-top: 1.5em;
	margin-bottom: 0.75em;
	font-weight: 600;
	line-height: 1.3;
}

.bonhoeffer-modal-description h1:first-child,
.bonhoeffer-modal-description h2:first-child,
.bonhoeffer-modal-description h3:first-child,
.bonhoeffer-product-description h1:first-child,
.bonhoeffer-product-description h2:first-child,
.bonhoeffer-product-description h3:first-child {
	margin-top: 0;
}

/*--------------------------------------------------------------
# WPFORMS INPUT STYLES
--------------------------------------------------------------*/

/* Altura de inputs para formularios WPForms */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container input[type="tel"],
.wpforms-container input[type="number"],
.wpforms-container input[type="url"],
.wpforms-container input[type="date"],
.wpforms-container input[type="month"],
.wpforms-container input[type="week"],
.wpforms-container input[type="time"],
.wpforms-container input[type="datetime"],
.wpforms-container input[type="datetime-local"],
.wpforms-container input[type="color"],
.wpforms-container input[type="password"],
.wpforms-container input[type="search"],
.wpforms-container select,
.wpforms-container textarea {
	height: 50px !important;
}

/*--------------------------------------------------------------
# ENTRY CONTENT STYLES
--------------------------------------------------------------*/

/* Margin top para #primary en páginas con header fijo */
body:not(.home) #primary {
	margin-top: 10px;
}

/* Estilos para el contenido de páginas y posts */
.entry-content {
	margin: 0 auto;
	padding: 2rem 0;
	line-height: 1.7;
	color: #373737;
}

/* Headings en entry-content */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	line-height: 1.3;
	margin-top: 2rem;
	margin-bottom: 1rem;
	color: #373737;
}

.entry-content h1 {
	font-size: 2.25rem;
}

.entry-content h2 {
	font-size: 1.875rem;
}

.entry-content h3 {
	font-size: 1.5rem;
}

.entry-content h4 {
	font-size: 1.25rem;
}

.entry-content h5 {
	font-size: 1.125rem;
}

.entry-content h6 {
	font-size: 1rem;
}

/* Primer heading sin margen superior */
.entry-content h1:first-child,
.entry-content h2:first-child,
.entry-content h3:first-child,
.entry-content h4:first-child,
.entry-content h5:first-child,
.entry-content h6:first-child {
	margin-top: 0;
}

/* Párrafos */
.entry-content p {
	margin-bottom: 1.25rem;
	font-size: 1rem;
	line-height: 1.7;
}

/* Listas */
.entry-content ul,
.entry-content ol {
	margin-bottom: 1.25rem;
	padding-left: 2rem;
}

.entry-content li {
	margin-bottom: 0.5rem;
	line-height: 1.7;
}

.entry-content ul {
	list-style-type: disc;
}

.entry-content ol {
	list-style-type: decimal;
}

.entry-content ul ul {
	list-style-type: circle;
	margin-top: 0.5rem;
}

.entry-content ol ol {
	list-style-type: lower-alpha;
	margin-top: 0.5rem;
}

/* Enlaces */
.entry-content a {
	color: #00546A;
	text-decoration: underline;
	transition: color 0.3s ease;
}

.entry-content a:hover {
	color: #7a7a2e;
	text-decoration: none;
}

/* Blockquotes */
.entry-content blockquote {
	margin: 1.5rem 0;
	padding: 1rem 1.5rem;
	border-left: 4px solid #00546A;
	background-color: #f9f9f9;
	font-style: italic;
	color: #555;
}

/* Código */
.entry-content code {
	background-color: #f4f4f4;
	padding: 0.2rem 0.4rem;
	border-radius: 3px;
	font-family: 'Courier New', monospace;
	font-size: 0.9em;
}

.entry-content pre {
	background-color: #f4f4f4;
	padding: 1rem;
	border-radius: 5px;
	overflow-x: auto;
	margin-bottom: 1.25rem;
}

.entry-content pre code {
	background-color: transparent;
	padding: 0;
}

/* Tablas */
.entry-content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5rem;
}

.entry-content th,
.entry-content td {
	padding: 0.75rem;
	border: 1px solid #ddd;
	text-align: left;
}

.entry-content th {
	background-color: #00546A;
	color: white;
	font-weight: 600;
}

.entry-content tr:nth-child(even) {
	background-color: #f9f9f9;
}

/* Imágenes */
.entry-content img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 1.5rem auto;
}

.entry-content figure {
	margin: 1.5rem 0;
}

.entry-content figcaption {
	text-align: center;
	font-size: 0.875rem;
	color: #666;
	margin-top: 0.5rem;
	font-style: italic;
}

/* Separadores */
.entry-content hr {
	border: none;
	border-top: 2px solid #e0e0e0;
	margin: 2rem 0;
}

/* Títulos de entrada (entry-header) */
.entry-header {
	margin-bottom: 0;
	padding-top: 20px;
	padding-bottom: 1rem;
	border-bottom: 2px solid #e0e0e0;
}

@media (min-width: 768px) {
	.entry-header {
		padding-top: 60px;
		margin-bottom: 2rem;
	}
}

.entry-title {
	font-family: 'Montserrat', sans-serif;
	font-size: 2.5rem;
	font-weight: 700;
	color: #373737;
	line-height: 1.2;
	margin: 0;
}

/*--------------------------------------------------------------
# OFFCANVAS DE CATEGORÍAS
--------------------------------------------------------------*/

/* Contenedor principal del offcanvas */
.categories-offcanvas {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	pointer-events: none;
}

/* When offcanvas is active, enable pointer events */
.categories-offcanvas.active {
	pointer-events: auto;
}

/* Overlay oscuro */
.categories-overlay {
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	transition: opacity 300ms ease-in-out;
	pointer-events: auto;
}

.categories-overlay.opacity-100 {
	opacity: 1;
}

/* Panel lateral */
.categories-panel {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	max-width: 400px;
	background-color: #ffffff;
	box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
	transform: translateX(-100%);
	transition: transform 300ms ease-in-out;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.categories-panel {
		width: 400px;
	}
}

.categories-panel.translate-x-0 {
	transform: translateX(0);
}

.categories-panel.-translate-x-full {
	transform: translateX(-100%);
}

/* Header del offcanvas */
.categories-panel > div:first-child {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem;
	border-bottom: 1px solid #e5e7eb;
}

.categories-panel > div:first-child h2 {
	font-size: 1.25rem;
	font-weight: 700;
	color: #111827;
	margin: 0;
}

/* Botón cerrar */
.close-offcanvas {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	color: #4b5563;
	transition: all 300ms;
	border-radius: 9999px;
}

.close-offcanvas:hover {
	color: #111827;
	background-color: #f3f4f6;
}

/* Contenedor de categorías con scroll */
.categories-panel > div:nth-child(2) {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
}

/* Scrollbar personalizado */
.categories-panel > div:nth-child(2)::-webkit-scrollbar {
	width: 6px;
}

.categories-panel > div:nth-child(2)::-webkit-scrollbar-track {
	background: #f1f1f1;
}

.categories-panel > div:nth-child(2)::-webkit-scrollbar-thumb {
	background: #00546A;
	border-radius: 3px;
}

.categories-panel > div:nth-child(2)::-webkit-scrollbar-thumb:hover {
	background: #7a7a2c;
}

/* Items de categoría */
.category-item {
	border-bottom: 1px solid #f3f4f6;
}

.category-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.75rem 1rem;
	transition: background-color 200ms;
	cursor: pointer;
	border-bottom: 1px solid #f3f4f6;
}

.category-header:hover {
	background-color: #f9fafb;
}

/* Links de categoría */
.category-link {
	flex: 1;
	color: #111827;
	font-weight: 500;
	transition: color 200ms;
	text-decoration: none;
	padding: 0.5rem 0;
}

.category-link:hover {
	color: #00546A;
}

/* Caret (flecha) */
.category-caret {
	margin-left: 0.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	color: #6b7280;
	transition: all 300ms;
	border-radius: 9999px;
}

.category-caret:hover {
	color: #00546A;
	background-color: #f3f4f6;
}

.category-caret i {
	transition: transform 300ms;
}

.category-caret[aria-expanded="true"] i {
	transform: rotate(180deg);
}

/* Subcategorías */
.category-children {
	padding-left: 1rem;
	background-color: #f9fafb;
	display: none;
}

.category-children:not(.hidden) {
	display: block;
}

/* Ajustes responsive para móviles */
@media (max-width: 767px) {
	.categories-panel {
		max-width: 80%;
	}
}