/* Theme version: 1764988381 - Generated: 2025-12-06 10:58:39 */
/* No-cache: 69340c5fdb953 */
:root {
    --primary-color: #5814f5 !important;
    --secondary-color: #3f881c !important;
    --accent-color: #b61b1b !important;
    --accent-hover: #ca2f2f !important;
    --success-color: #080e0f !important;
    --success-hover: #1c2223 !important;
    --danger-color: #2bc04b !important;
    --danger-hover: #3fd45f !important;
    --warning-color: #f39c12 !important;
    --availability-color: #3311df !important;
    --availability-hover: #4725f3 !important;
    --body-background-color: #dbdbf5 !important;
    --hero-background-color: #2c3e50 !important;
    --hero-text-color: #ffffff !important;
    --hero-background-image: url('/tiendas/uploads/hero_bg/hero_bg_1764982656_69337f801d3a1.png') !important;
    --hero-background-type: image !important;
    --light-color: #f5f5f5;
    --dark-color: #263238;
    --text-color: #333;
    --text-light: #757575;
    --border-color: #e0e0e0;
    --shadow-color: rgba(0, 0, 0, 0.1);
    --header-padding: 10px;
    --footer-padding: 10px;
    /* Estimación de la altura total del encabezado: 30px (top-bar) + 40px (contenido nav) + 2 * header_padding */
    --total-header-height: calc(30px + 40px + (var(--header-padding) * 2));
}

/* Aplicar color de fondo al body con máxima prioridad */
html body {
    background-color: var(--body-background-color) !important;
}

body.main-layout,
body.page-layout,
body.catalog-layout {
    background-color: var(--body-background-color) !important;
}

/* Color de fondo para la sección hero del catálogo */
.hero-section {
    background-color: var(--hero-background-color) !important;
    padding: 40px 0 !important;
}

/* Aplicar imagen de fondo solo cuando el tipo es 'image' */
.hero-section[data-hero-type="image"] {
    background-image: var(--hero-background-image) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Estilos para texto en la sección hero del catálogo */
.hero-section .hero-title {
    color: var(--hero-text-color) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.hero-section .hero-subtitle {
    color: var(--hero-text-color) !important;
    opacity: 0.9 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* Estilos específicos para el encabezado */
header, nav {
    background-color: var(--primary-color) !important;
    min-height: 0 !important;
    height: auto !important; /* Asegurar que la altura no sea fija */
    padding: 0 !important;
}

/* Estilos para la barra superior (top-bar) */
.top-bar {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
}

.top-bar .container, .top-bar .row, .top-bar .col {
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.top-bar span, .top-bar a {
    line-height: 1 !important;
    padding: 5px 0 !important; /* Pequeño padding para el texto */
}

/* Estilos específicos para el pie de página con máxima prioridad */
footer.page-footer,
main footer.page-footer,
.page-footer {
    background-color: var(--primary-color) !important;
    padding-top: var(--footer-padding) !important;
    padding-bottom: var(--footer-padding) !important;
}

/* Forzar color en todos los elementos del footer */
footer,
.page-footer,
.page-footer .footer-copyright {
    background-color: var(--primary-color) !important;
}

/* --- Aplicar altura dinámica al encabezado --- */
.navbar-fixed {
    height: auto !important; /* Asegurar que el contenedor fijo no tenga altura fija */
}

nav.main-nav .nav-wrapper {
    padding-top: var(--header-padding);
    padding-bottom: var(--header-padding);
    height: auto !important; /* Permitir que la altura se ajuste al contenido */
    line-height: normal !important; /* Asegurar que el line-height no fuerce altura */
}

nav.main-nav .brand-logo img {
    max-height: calc(64px + (var(--header-padding) * 2) - 10px); /* Ajustar dinámicamente */
    margin-top: 5px;
}

nav ul {
    height: auto !important; /* Asegurar que la lista de navegación no tenga altura fija */
}

nav ul a {
    height: auto !important; /* Asegurar que los enlaces de navegación no tengan altura fija */
    line-height: normal !important; /* Asegurar que el line-height no fuerce altura */
}

nav i.material-icons {
    height: auto !important; /* Asegurar que los iconos no tengan altura fija */
    line-height: normal !important; /* Asegurar que el line-height no fuerce altura */
}
/* --- FIN NUEVO --- */

/* Estilos para botones */
.btn {
    background-color: var(--primary-color);
}

.btn:hover {
    background-color: var(--secondary-color);
}

.btn.green, .btn.success {
    background-color: var(--success-color);
}

.btn.green:hover, .btn.success:hover {
    background-color: var(--success-hover);
}

.btn.red, .btn.danger {
    background-color: var(--danger-color);
}

.btn.red:hover, .btn.danger:hover {
    background-color: var(--danger-hover);
}

.btn.blue, .btn.accent {
    background-color: var(--accent-color);
}

.btn.blue:hover, .btn.accent:hover {
    background-color: var(--accent-hover);
}

.btn.orange, .btn.warning {
    background-color: var(--warning-color);
}

/* Estilos para botón de disponibilidad */
.stock-container .btn.availability-btn,
.btn.availability-btn,
button.availability-btn,
button.btn.availability-btn,
.stock-container .btn:not(.red),
.producto-item .stock-container button.btn:not(.red) {
    background-color: var(--availability-color, #f1c40f) !important;
    color: white !important;
}

.stock-container .btn.availability-btn:hover,
.btn.availability-btn:hover,
button.availability-btn:hover,
button.btn.availability-btn:hover,
.stock-container .btn:not(.red):hover,
.producto-item .stock-container button.btn:not(.red):hover {
    background-color: var(--availability-hover, var(--availability-color, #f1c40f)) !important;
    filter: brightness(1.1);
}

/* Estilos para el botón de disponibilidad en la vista previa */
#preview-availability {
    background-color: var(--availability-color, #f1c40f) !important;
}

/* Estilos para botones de disponibilidad en el catálogo */
.producto-item .stock-container button.btn:not(.red) {
    background-color: var(--availability-color, #f1c40f) !important;
    width: 100%;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Forzar la aplicación del color en todos los contextos */
[class*="availability-btn"]:not(.red) {
    background-color: var(--availability-color, #f1c40f) !important;
}

/* Estilos para botones flotantes */
.btn-floating {
    background-color: var(--primary-color);
}

.btn-floating:hover {
    background-color: var(--secondary-color);
}

.fixed-action-btn.chat-float .btn-floating {
    background-color: var(--primary-color);
}

.fixed-action-btn.chat-float .btn-floating:hover {
    background-color: var(--secondary-color);
}

.fixed-action-btn.cart-float .btn-floating {
    background-color: var(--accent-color);
}

.fixed-action-btn.cart-float .btn-floating:hover {
    background-color: var(--accent-hover);
}

/* Estilos para enlaces */
.page-footer a {
    color: white !important;
}

/* Estilos para badges */
.badge.new.blue {
    background-color: var(--accent-color) !important;
}

.badge.new.green {
    background-color: var(--success-color) !important;
}

.badge.new.red {
    background-color: var(--danger-color) !important;
}

.badge.new.orange {
    background-color: var(--warning-color) !important;
}

/* Estilos para checkboxes y radio buttons */
[type="checkbox"].filled-in:checked+span:not(.lever):after {
    border: 2px solid var(--accent-color);
    background-color: var(--accent-color);
}

[type="radio"]:checked+span:after,
[type="radio"].with-gap:checked+span:after {
    background-color: var(--accent-color);
}

[type="radio"]:checked+span:after,
[type="radio"].with-gap:checked+span:before,
[type="radio"].with-gap:checked+span:after {
    border: 2px solid var(--accent-color);
}

/* Estilos para tabs */
.tabs .tab a {
    color: var(--primary-color);
}

.tabs .tab a:hover, .tabs .tab a.active {
    color: var(--accent-color);
}

.tabs .indicator {
    background-color: var(--accent-color);
}

/* Estilos para dropdown */
.dropdown-content li > a, .dropdown-content li > span {
    color: var(--accent-color);
}

/* Estilos para paginación */
.pagination li.active {
    background-color: var(--primary-color);
}

/* Estilos para colecciones */
.collection .collection-item.active {
    background-color: var(--primary-color);
    color: white;
}

.collection a.collection-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--accent-color);
}

/* Estilos para sidenav */
.sidenav .user-view {
    background-color: var(--primary-color) !important;
}

.sidenav .user-view .name,
.sidenav .user-view .email {
    color: white !important;
}

/* Estilos para preloader */
.preloader-wrapper .spinner-layer {
    border-color: var(--accent-color);
}

/* Estilos para títulos de página que deben usar el color del encabezado */
.page-title,
.section-title {
    color: var(--primary-color) !important;
}

/* Subtítulos que deben usar el color de acento */
.hero-subtitle {
    color: var(--accent-color) !important;
}

/* Títulos de sección que deben usar el color primario */
.section-title::after {
    background-color: var(--primary-color) !important;
}

/* Estilos para switches */
.switch label input[type=checkbox]:checked + .lever {
    background-color: var(--accent-color);
}

.switch label input[type=checkbox]:checked + .lever:after {
    background-color: var(--accent-color);
}

/* Estilos para inputs */
input:not([type]):focus:not([readonly]),
input[type="text"]:focus:not([readonly]),
input[type="password"]:focus:not([readonly]),
input[type="email"]:focus:not([readonly]),
input[type="url"]:focus:not([readonly]),
input[type="time"]:focus:not([readonly]),
input[type="date"]:focus:not([readonly]),
input[type="datetime"]:focus:not([readonly]),
input[type="datetime-local"]:focus:not([readonly]),
input[type="tel"]:focus:not([readonly]),
input[type="number"]:focus:not([readonly]),
input[type="search"]:focus:not([readonly]),
textarea.materialize-textarea:focus:not([readonly]) {
    border-bottom: 1px solid var(--accent-color);
    box-shadow: 0 1px 0 0 var(--accent-color);
}

input:not([type]):focus:not([readonly]) + label,
input[type="text"]:focus:not([readonly]) + label,
input[type="password"]:focus:not([readonly]) + label,
input[type="email"]:focus:not([readonly]) + label,
input[type="url"]:focus:not([readonly]) + label,
input[type="time"]:focus:not([readonly]) + label,
input[type="date"]:focus:not([readonly]) + label,
input[type="datetime"]:focus:not([readonly]) + label,
input[type="datetime-local"]:focus:not([readonly]) + label,
input[type="tel"]:focus:not([readonly]) + label,
input[type="number"]:focus:not([readonly]) + label,
input[type="search"]:focus:not([readonly]) + label,
textarea.materialize-textarea:focus:not([readonly]) + label {
    color: var(--accent-color);
}