/* ============================================================
 * Ozona — style-extras.css
 * CSS overrides aplicados por mu-plugin ozona-design-extras.php
 * Compatible con tema actual `ozona` (Bridge 13.5 parent).
 * Documentación: auditoria-2026-05-23/CAMBIOS-DISENO.md
 * ============================================================ */

/* ------------------------------------------------------------
 * #3 — Tabla con scroll horizontal en móvil
 * /privacidad/, /cookie-policy/, /aviso-legal/ y cualquier otra
 * página con tablas anchas. Aplica wrapper de scroll sin tocar HTML.
 * ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .post-content table,
    .entry-content table,
    .wpb_text_column table,
    .vc_row table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        width: max-content;
        border-collapse: collapse;
    }

    /* Sombra a la derecha para indicar visualmente que hay scroll */
    .post-content table,
    .entry-content table,
    .wpb_text_column table {
        background-image:
            linear-gradient(to right, rgba(255,255,255,1) 30%, rgba(255,255,255,0)),
            linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1) 70%) 100% 0,
            radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)),
            radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,0.15), rgba(0,0,0,0)) 100% 0;
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
        background-attachment: local, local, scroll, scroll;
    }
}

/* ------------------------------------------------------------
 * #5 — Formulario CF7 dentro de acordeón Bridge no seleccionable
 * en móvil. /carrera-profesional/ usa more_facts_holder que no
 * responde a touch. En móvil lo forzamos abierto y oculto botón.
 * ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .more_facts_holder .more_facts_outer {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        max-height: none !important;
    }
    .more_facts_holder .more_facts_button_holder {
        display: none !important;
    }
    /* Asegurar interactividad de inputs dentro del formulario */
    .more_facts_holder .wpcf7-form input,
    .more_facts_holder .wpcf7-form textarea,
    .more_facts_holder .wpcf7-form select,
    .more_facts_holder .wpcf7-form button,
    .more_facts_holder .wpcf7-form label {
        pointer-events: auto !important;
        touch-action: manipulation;
    }
    /* Asegura que no haya overlay capturando events sobre el form */
    .more_facts_holder .vc_column-inner,
    .more_facts_holder .wpb_wrapper {
        position: relative;
        z-index: 2;
    }
}

/* ------------------------------------------------------------
 * #6 — Iconos redes sociales en footer (SVG inline)
 * Se ha sustituido el HTML <i class="fa fa-..."> por SVG inline
 * en el widget text-9. Aquí solo damos layout y color.
 * ------------------------------------------------------------ */
.socialwrap .social-icons {
    list-style: none;
    margin: 10px 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.socialwrap .social-icons li {
    display: inline-block;
    margin: 0;
    padding: 0;
}
.socialwrap .social-icons li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #ffffff;
    color: #ce2558;          /* magenta corporativo Ozona — el SVG hereda este color */
    text-decoration: none;
    line-height: 1;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.socialwrap .social-icons li a svg {
    width: 22px;
    height: 22px;
    display: block;
    fill: #ce2558 !important;   /* fuerza magenta — pisa el color blanco que el footer aplica al <a> */
}
.socialwrap .social-icons li a svg path {
    fill: #ce2558 !important;
}
.socialwrap .social-icons li a:hover,
.socialwrap .social-icons li a:focus {
    transform: translateY(-2px);
    background-color: #ffffff;
}
.socialwrap .social-icons li a:hover svg,
.socialwrap .social-icons li a:hover svg path,
.socialwrap .social-icons li a:focus svg,
.socialwrap .social-icons li a:focus svg path {
    fill: #a51e47 !important;   /* magenta un punto más oscuro en hover */
}

/* Centrado en móvil */
@media (max-width: 768px) {
    .socialwrap .social-icons { justify-content: center; }
}

/* Fallback: si aún hubiera <i class="fa">  en otra parte (header,
 * sidebar…), garantizamos que la fuente FontAwesome se aplique. */
.fa,
[class^="fa-"],
[class*=" fa-"] {
    font-family: "FontAwesome" !important;
    font-style: normal;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
}