/*
 Theme Name:   Kadence Child
 Description:  Tema hijo para el Ecoparque de Trasmiera
 Template:     kadence
 Version:      1.0.0.10
*/

.reserva-icon {
    color: white!important;
    background: #FF9800;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid #FF9800;
}

.reserva-icon a {
    color: black!important;
}

.reserva-icon .dashicons, 
.reserva-icon i {
    margin-right: 6px; /* Separa el icono del texto */
    vertical-align: middle; /* Lo alinea perfectamente al centro de la línea */

}

/* Inyección de Icono SVG Vectorial: Entrada de Evento Clásica */
.reserva-icon a::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 8px; /* Separación con el texto */
    vertical-align: middle;
    position: relative;
    top: -1px; /* Centrado milimétrico en el botón de Kadence */
    
    /* SVG de una entrada clásica con cortes laterales en los bordes */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9a3 3 0 0 1 0 6v2a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-2a3 3 0 0 1 0-6V7a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v2z'/%3E%3Cline x1='9' y1='5' x2='9' y2='19' stroke-dasharray='3 3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}


.reserva-icon:hover {
    color: white!important;
    background: transparent;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    border: 2px solid black;
}

/*Webcams portada*/

/* ==========================================================================
   1. COLORES CORPORATIVOS PARA EL REPRODUCTOR PLYR
   ========================================================================== */
:root {
    --eco-bosque: #0a2010;
    --eco-verde: #2d6a20;
    --eco-verde-vivo: #4a9e38;
    
    /* Sobrescribimos las variables nativas de Plyr */
    --plyr-color-main: var(--eco-verde-vivo); /* Color del botón central, barra de progreso y volumen */
}

/* Cambio de color cuando pasas el ratón por encima (Hover) en los controles */
.plyr--video .plyr__control:hover {
    background: var(--eco-verde) !important;
    color: #ffffff !important;
}

/* Asegurar que el botón gigante central reaccione con tu verde corporativo */
.plyr__control--overlaid {
    background: var(--eco-verde-vivo) !important;
}

.plyr__control--overlaid:hover {
    background: var(--eco-verde) !important;
}


/* ==========================================================================
   2. DISEÑO DE TARJETAS (Aplicado a la columna que contiene tus clases)
   ========================================================================== */

/* Convertimos la propia columna de Gutenberg en la tarjeta blanca */
.wp-block-column:has(.webcam-fija-contenedor) {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 16px 0 !important; /* Margen de cortesía inferior de la tarjeta */
    box-sizing: border-box !important;
}

/* El contenedor del vídeo se queda limpio arriba ocupando todo el ancho */
.webcam-fija-contenedor {
    width: 100% !important;
    position: relative !important;
    aspect-ratio: 16 / 9 !important;
    background-color: #0c0c0c !important;
    margin: 0 0 16px 0 !important; /* Espacio exacto entre el vídeo y el primer div (.webcam-lugar) */
}

.webcam-fija-contenedor video,
.webcam-fija-contenedor .plyr {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ==========================================================================
   3. ESTILOS UNIFICADOS PARA TUS TEXTOS (.webcam-lugar y .webcam-localizacion)
   ========================================================================== */
.webcam-localizacion {
    font-size: 10px !important;
    gap: 0.25em !important;
    display: flex;
}

/* ==========================================================================
   4. CONFIGURACIÓN DEL BADGE "EN DIRECTO"
   ========================================================================== */
.badge-en-vivo {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    background-color: #e53e3e !important; /* Rojo de alerta para destacar el directo */
    color: #ffffff !important;
    font-family: system-ui, -apple-system, sans-serif !important;
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
    pointer-events: none !important;
}

.badge-en-vivo.oculto {
    display: none !important;
}

.punto-parpadeo {
    width: 6px !important;
    height: 6px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-block !important;
    animation: parpadeoEcoparque 1.5s infinite !important;
}

@keyframes parpadeoEcoparque {
    0% { opacity: 0.3; }
    50% { opacity: 1; }
    100% { opacity: 0.3; }
}

/* ==========================================================================
   6. SEPARADORES EN EL MENÚ LEGAL (.menu-privacidad)
   ========================================================================== */

/* Alineamos los elementos del menú en horizontal y al centro */
.menu-privacidad .wp-block-navigation-item {
    display: inline-flex !important;
    align-items: center !important;
}

/* Inyectamos el punto medio automáticamente entre las opciones */
.menu-privacidad .wp-block-navigation-item:not(:last-child)::after {
    content: "·" !important;      /* El punto medio */
    margin: 0 12px !important;    /* Espaciado horizontal a los lados del punto */
    color: #718096 !important;    /* El mismo color gris suave que tus textos legales */
    font-weight: 700 !important;  /* Le damos cuerpo al punto */
    font-size: 14px !important;   /* Tamaño del punto */
    user-select: none !important; /* Evita que el usuario seleccione el punto al arrastrar el ratón */
}

/* Estilo para los enlaces dentro de tu menú personalizado */
.menu-privacidad .wp-block-navigation-item a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

/* Efecto hover con tu verde corporativo */
.menu-privacidad .wp-block-navigation-item a:hover {
    color: #4a9e38 !important; /* Tu verde vivo */
}

/* ==========================================================================
   7. Footer
   ========================================================================== */

.site-footer-row-container-inner .site-container .site-top-footer-inner-wrap {
    padding: 0;
}

.site-footer-row-container-inner .site-container {
    padding: 0;
}


/* 1. Limpieza de puntos y alineación a la izquierda en los menús de listas */
.site-footer .menu-inferior-paginas {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    text-align: left !important;
}

.site-footer .menu-inferior-paginas li {
    list-style-type: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.site-footer .menu-mail a {
    color: white !important;
}

.site-footer .menu-mail a:hover {
    color: #4a9e38 !important; /* Tu verde vivo al pasar el ratón */
}

/* 2. Padding lateral global para que las columnas no peguen a los bordes */
.site-footer .wp-block-columns {
    padding-left: 15% !important;
    padding-right: 15% !important;
    box-sizing: border-box !important;
}

/* 3. Ajuste fino del copyright a la izquierda */
.site-footer .wp-block-column div[style*="color: white;"] {
    text-align: left !important;
}

/* 4. Margen a la derecha para el menú de privacidad y sus enlaces */
.menu-privacidad {
    margin-right: 2em !important;
}

/* 5. Estilo de los puntos separadores en el menú (.menu-privacidad) */
.menu-privacidad .wp-block-navigation-item {
    display: inline-flex !important;
    align-items: center !important;
}

.menu-privacidad .wp-block-navigation-item:not(:last-child)::after {
    content: "·" !important;
    margin: 0 10px !important;
    color: #718096 !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

/* 6. Corrección de color suave para los enlaces del menú legal (Gris de la foto) */
.menu-privacidad .wp-block-navigation-item a {
    color: white !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.menu-privacidad .wp-block-navigation-item a:hover {
    color: #4a9e38 !important; /* Tu verde vivo al pasar el ratón */
}

/* ============================================================
FONDOS INFINITOS EN PAGINAS ENCAJONADAS
   ============================================================ */
.fondo-extendido-pantalla {
    position: relative;
    z-index: 1;
}

.fondo-extendido-pantalla::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    /* Este cálculo estira el fondo al 100% del monitor */
    left: calc(-50vw + 50%);
    right: calc(-50vw + 50%);
    width: 100vw;
    /* Hereda automáticamente el color de fondo que le pongas al bloque */
    background-color: inherit; 
    z-index: -1;
}
/* =========================================================================
   ESTILOS PREMIUM PARA EL MAPA INTERACTIVO
   ========================================================================= */
.eco-popup-premium .leaflet-popup-content-wrapper {
    border-radius: var(--eco-radio-sm) !important; /* Redondeado de 10px */
    border: 1px solid var(--eco-borde);
    box-shadow: var(--eco-sombra);
    padding: 6px;
}
.eco-popup-premium .leaflet-popup-tip {
    background: #ffffff;
    border: 1px solid var(--eco-borde);
}

/* =========================================================================
   CONTROL DE VISIBILIDAD DEL MAPA INTERACTIVO (Fiel a la estructura Kadence)
   ========================================================================= */

/* Comportamiento estándar en pantallas de escritorio */
#alternar-mapa {
    display: block;
}

@media (max-width: 767px) {
    /* En móvil forzamos que permanezca oculto de inicio */
    #alternar-mapa {
        display: none !important;
        height: 400px !important;
        margin: 20px 0 !important;
        border-radius: 12px !important;
        width: 100% !important;
    }
    
    /* Se despliega en el momento exacto en que JavaScript añade la clase activa */
    #alternar-mapa.mapa-visible-activo {
        display: block !important;
    }
}

/* Limpieza de fondos del contenedor vectorial */
.eco-marcador-limpio {
    background: transparent !important;
    border: none !important;
}