/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Template: astra
Author: Brainstorm Force
Author URI: https://wpastra.com/about/?utm_source=theme_preview&utm_medium=author_link&utm_campaign=astra_theme
Description: The Astra WordPress theme is lightning-fast and highly customizable. It has over 1 million downloads and the only theme in the world with 6,000+ five-star reviews! It’s ideal for professional web designers, solopreneurs, small businesses, eCommerce, membership sites and any type of website. It offers special features and templates so it works perfectly with all page builders like Spectra, Elementor, Beaver Builder, etc. Fast performance, clean code, mobile-first design and schema markup are all built-in, making the theme exceptionally SEO-friendly. It’s fully compatible with WooCommerce, SureCart and other eCommerce plugins and comes with lots of store-friendly features and templates. Astra also provides expert support for free users. A dedicated team of fully trained WordPress experts are on hand to help with every aspect of the theme. Try the live demo of Astra: https://zipwp.org/themes/astra/
Tags: custom-menu,custom-logo,entertainment,one-column,two-columns,left-sidebar,e-commerce,right-sidebar,custom-colors,editor-style,featured-images,full-width-template,microformats,post-formats,rtl-language-support,theme-options,threaded-comments,translation-ready,blog
Version: 4.11.13.1761359654
Updated: 2025-10-25 02:34:14

*/







/* --- Reseteo Básico y Variables --- */
:root {
    --color-primario: #FFD700; /* Amarillo/Oro para acentos */
    --color-fondo: #1a1a1a;
    --color-cajas: #2b2b2b;
    --color-texto: #f0f0f0;
    --color-verde: #28a745;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

a {
    color: var(--color-primario);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* --- Header y Navegación --- */
.site-header {
    background-color: var(--color-cajas);
    padding: 15px 0;
    border-bottom: 2px solid var(--color-primario);
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-header .logo img {
    max-height: 50px; /* Ajusta el tamaño de tu logo */
}

.main-nav ul {
    list-style: none;
    display: flex;
}

.main-nav ul li {
    margin-left: 25px;
}

.main-nav ul li a {
    color: var(--color-texto);
    font-weight: bold;
    font-size: 1rem;
    padding: 5px 10px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
    background-color: var(--color-primario);
    color: #000;
}

/* --- Contenido Principal --- */
.site-content {
    min-height: 70vh; /* Empuja el footer hacia abajo */
    padding-top: 40px;
    padding-bottom: 40px;
}

/* --- Footer --- */
.site-footer {
    background-color: var(--color-cajas);
    color: #aaa;
    padding-top: 40px;
    border-top: 2px solid var(--color-primario);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 30px;
}

.footer-widget h4 {
    color: var(--color-primario);
    margin-bottom: 15px;
}

.footer-widget p,
.footer-widget ul {
    list-style: none;
    font-size: 0.9rem;
}

.footer-widget ul li {
    margin-bottom: 8px;
}

.footer-widget ul li a {
    color: #aaa;
    transition: color 0.3s;
}

.footer-widget ul li a:hover {
    color: var(--color-primario);
}

.social-links a {
    color: var(--color-texto);
    font-size: 1.8rem;
    margin-right: 15px;
    transition: color 0.3s;
}

.social-links a:hover {
    color: var(--color-primario);
}

.map-placeholder iframe {
    border-radius: 8px;
}

.footer-bottom {
    text-align: center;
    border-top: 1px solid #444;
    padding-top: 20px;
    padding-bottom: 20px;
    font-size: 0.85rem;
}

.footer-bottom p {
    margin-bottom: 5px;
}

.footer-bottom a {
    color: #aaa;
}

/* --- Estilos de Página de Inicio (Hero y Servicios) --- */
.hero {
    position: relative;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    margin-bottom: 50px;
}

.hero::before { /* Capa oscura sobre la imagen */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6));
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo */
    z-index: 0;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 20px;
}

.hero-content h1 {
    font-size: 3rem;
    color: var(--color-primario); /* Letras amarillas */
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

.servicios-section {
    padding: 40px 0;
}

.servicios-section h2 {
    text-align: center;
    font-size: 2.5rem;
    color: var(--color-primario);
    margin-bottom: 40px;
}

.servicios-grid {
    display: grid;
    /* 3 columnas en escritorio */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.servicio-card {
    background-color: var(--color-cajas);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.servicio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(255, 215, 0, 0.2);
}

.servicio-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.servicio-card-content {
    padding: 20px;
}

.servicio-card-content h3 {
    color: var(--color-primario);
    margin-bottom: 10px;
}

.servicio-card-content .precio {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-verde);
}


/* --- Responsividad de la página de inicio --- */
@media (max-width: 992px) {
    .servicios-grid {
        /* 2 columnas en tablets */
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 768px) {
    .main-nav {
        /* Aquí iría la lógica para un menú hamburguesa (JS) */
        /* Por ahora, solo los apilamos */
    }

    .main-nav ul {
        flex-direction: column;
        width: 100%;
    }

    .main-nav ul li {
        margin: 5px 0;
        text-align: center;
    }

    .site-header .container {
        flex-direction: column;
    }
    
    .hero-content h1 {
        font-size: 2.2rem;
    }
}

@media (max-width: 576px) {
    .servicios-grid {
        /* 1 columna en móviles */
        grid-template-columns: 1fr;
    }
    
    .footer-grid {
        grid-template-columns: 1fr;
    }
}

/* --- ESTILOS ESPECÍFICOS PARA LA PÁGINA DE AGENDAR CITA (BOOKING) --- */

/* Contenedor principal */
.booking-container { 
    max-width: 900px; 
    margin: 20px auto; 
    padding: 20px; 
    background: var(--color-cajas); /* Fondo de caja oscuro */
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.5); 
    border: 1px solid #444;
}
.booking-step { 
    display: none; 
} 
.booking-step.active { 
    display: block; 
} 
h2 { 
    text-align: center; 
    margin-bottom: 25px; 
    color: var(--color-primario); /* Títulos en color amarillo/oro */
}
h3 {
    color: var(--color-texto);
    margin-top: 20px;
    margin-bottom: 15px;
}

/* Estilos de la Grilla para servicios, barberos, fechas */
.selection-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); /* Por defecto, 3 columnas */
    gap: 20px; 
}

/* Estilos de las Tarjetas (Servicios/Barberos) */
.selectable-card { 
    border: 2px solid #555; 
    border-radius: 8px; 
    overflow: hidden; 
    cursor: pointer; 
    transition: all 0.3s ease; 
    background: var(--color-fondo); /* Fondo de tarjeta más oscuro */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Imagen de Servicio (Paso 1) */
#step-1 .selectable-card img { 
    width: 100%; 
    height: 150px; 
    object-fit: cover; 
} 

/* Imagen de Barbero (Paso 2) */
#step-2 .selectable-card img { 
    height: 250px; 
    object-fit: cover; 
} 

.card-content { 
    padding: 15px; 
}
.card-content h3 { 
    margin-top: 0; 
    margin-bottom: 10px; 
    font-size: 1.1rem; 
    color: var(--color-texto);
}
.precio { 
    color: var(--color-verde); /* Precio en verde */
    font-weight: bold; 
    font-size: 1.1rem; 
}
.duracion { 
    color: #aaa; 
    font-weight: normal; 
    font-size: 0.95rem;
} 
/* Estado seleccionado */
.selectable-card.selected { 
    border-color: var(--color-primario); /* Borde amarillo/oro */
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5); 
} 

/* Estilos de Navegación */
.step-navigation { 
    display: flex; 
    justify-content: space-between; 
    margin-top: 30px; 
}
.btn { 
    padding: 12px 25px; 
    border: none; 
    border-radius: 5px; 
    cursor: pointer; 
    font-size: 1rem; 
    font-weight: bold; 
    transition: background-color 0.3s ease; 
}
.btn-siguiente { 
    background-color: var(--color-verde); /* Botón de avance en verde */
    color: white; 
}
.btn-siguiente:disabled { 
    background-color: #555; /* Gris cuando está deshabilitado */
    cursor: not-allowed; 
}
.btn-atras { 
    background-color: #6c757d; 
    color: white; 
}
.btn-seleccionar { 
    background-color: var(--color-primario); /* Botón de selección en amarillo/oro */
    color: #000;
    width: 100%;
    margin-top: 10px;
    padding: 8px 15px; 
}

/* --- MODIFICACIONES PASO 3: FECHA Y HORA (MATRIZ) --- */

/* Contenedores de la matriz */
.schedule-matrix {
    display: flex;
    width: 100%;
    border: 1px solid #444;
    border-radius: 5px;
    background-color: var(--color-cajas);
}

#day-columns-container {
    display: flex;
    flex-grow: 1;
    width: 100%;
    overflow-x: auto; /* Permite scroll horizontal en pantallas pequeñas */
}

/* Columna de Día */
.day-column {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 90px; 
    text-align: center;
    border-right: 1px solid #444;
}

.day-column:last-child {
    border-right: none;
}

.day-header {
    background-color: #333;
    color: var(--color-texto);
    padding: 8px 0;
    border-bottom: 1px solid #444;
    cursor: pointer;
}
.day-header span {
    display: block;
    font-weight: normal;
    font-size: 0.85rem;
    line-height: 1.1;
}
.day-header span:first-child {
    font-weight: bold;
    font-size: 0.95rem;
}

.day-column.selected .day-header {
    background-color: var(--color-primario);
    color: #000;
}

/* --- ESTILO DE LA CELDA DE HORARIO --- */
.time-slot-cell {
    height: 28px; 
    line-height: 28px;
    cursor: pointer;
    border: none;
    border-bottom: 1px solid #333;
    font-size: 0.85rem; 
    color: var(--color-texto);
    margin: 0;
    padding: 0;
    transition: background-color 0.1s;
}

.day-column .time-slot-cell:last-child {
    border-bottom: none;
}

/* Estados de las celdas */
.time-slot-cell:hover:not(.booked):not(.selected) {
    background-color: #444;
    color: #fff;
}
/* Estilo para horario OCUPADO */
.time-slot-cell.booked {
    background-color: #333; /* Gris oscuro para ocupado/no disponible */
    color: #888;
    cursor: not-allowed;
    font-style: italic; 
    text-decoration: line-through; 
    /* ¡CAMBIO CRÍTICO! Bloquea el clic y permite que solo el mouseover funcione */
    pointer-events: none; 
}
.time-slot-cell.selected {
    background-color: var(--color-primario);
    color: #000;
    font-weight: bold;
}

/* Media Query para responsividad de la grilla de selección (Ajuste los valores según tu diseño) */
@media (max-width: 768px) {
    .selection-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 500px) {
    .selection-grid {
        grid-template-columns: 1fr;
    }
}