/*
Theme Name: Elessi Theme Child
Theme URI: https://elessi.nasatheme.com/demo/
Description: This is a child theme for Elessi Theme
Author: NasaTheme team
Author URI: https://nasatheme.com
Template: elessi-theme
Version: 1.0
*/

/* ==========================================================================
   ÍNDICE GENERAL DEL ARCHIVO:
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   2. MENÚ Y NAVEGACIÓN GENERAL
   2.1 MENÚ TOP
   3. TOP BAR Y ZONA UTILIDADES (CERRAR SESIÓN)
   4. ZONA DRAG AND DROP
   5. FORMULARIO MULTISTEP: ESTRUCTURA DE PASOS (INDICADOR)
   6. FORMULARIO MULTISTEP: CAMPOS ESTÁNDAR Y GRID (INPUTS, LABELS, NUMBER)
   7. FORMULARIO MULTISTEP: TARJETA REPETIBLE DE EQUIPOS Y BOTÓN ELIMINAR
   8. FORMULARIO MULTISTEP: BOTONES DE NAVEGACIÓN Y "+ ADICIONAR EQUIPO"
   9. FORMULARIO MULTISTEP: CHECKBOX Y FINALIZACIÓN (PASO 3)
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES Y CONFIGURACIÓN GLOBAL
   ========================================================================== */
:root {
    --rojo: #ad0009;
    --rojoC: #dd1c23;
    --gris: #8E8E8E;
    --blanco: #FFFFFF;
    --negro: #222222;
    --azul:#222222;
    --verde:#ad0009;
}

#masthead{padding: 0!important;}
.nasa-bg-dark{margin-top: 0!important;}
.nasa-header-sticky.header-type-2 .fixed-already .nasa-elements-wrap, .nasa-header-sticky.header-type-3 .fixed-already .nasa-elements-wrap{
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.auth-inner-container h2,
.nasa-header-icons-wrap {
    display: none !important;
    visibility: hidden !important;
}

span.elementor-button-text { padding: 4px 0; }
svg.e-font-icon-svg.e-fab-whatsapp { font-size: 25px; }

.lista ul li { padding-bottom: 20px; list-style-image: url("images/lista.png"); }
.puntos ul li { padding-bottom: 10px; list-style-image: url("images/puntos.png"); }

.acreditacion img{ max-width: 320px; height: auto;}
.acreditacion a:hover {
    color: #02eb8e;
    border: 1px solid #00ce7c;
}
.acreditacion a {
    color: #00ce7c;
    background: #f7f8f9;
    padding: 10px 20px;
    border-radius: 20px;
    border: 1px solid #e9ecef;
    font-size: 20px;
}

@media (max-width: 768px) {

    .acreditacion a img{ max-width: 300px; height: auto;}

}/*Fin @media*/

/**** Ocultar ****/
.mobile-search {
    display: none !important;
    visibility: hidden !important;
}


.tarjetas:hover h2{color: var(--rojo)!important;}
.tarjetas h2 span {
    font-weight: 400;
    display: block;
    line-height: 30px;
}

/* ==========================================================================
   2. MENÚ Y NAVEGACIÓN GENERAL (LIMPIEZA TOTAL DE LÍNEAS INTERNAS)
   ========================================================================== */

/* --- CONFIGURACIÓN BASE Y ESCRITORIO --- */
.nav-wrapper .nasa-megamenu > .nav-dropdown { 
    margin-top: -10px !important; 
    width: 90%; 
    border-radius: 20px; 
    box-shadow: 0 30px 30px -20px #0000007d !important; 
    border-bottom: 4px solid var(--rojo); 
}

.nav-wrapper .default-menu .menu-item { width: 290px !important; }
body .nav-wrapper .root-item.current-menu-item > a { color: var(--rojo); }
.nav-wrapper .root-item > a:after { border-top: none !important; }
.nav-wrapper .root-item > a { margin-right: 30px !important; }
ul#site-navigation li.menu-item a:hover { color: var(--rojoC); }

ul.sub-menu li { font-size: 1.2em; }
.nav-column-links ul.sub-menu li { font-size: 1em; }

li.CTA a.current-menu-item,
li.CTA a { color: #ffffff !important; }
li.CTA:hover { background: var(--rojoC); }
li.CTA {
    background: var(--rojo);
    height: 40px;
    top: 5px;
    border-radius: 15px;
    line-height: 10px;
    padding-left: 20px;
}

.nav-wrapper .default-menu > .nav-dropdown .sub-menu { 
    width: 320px; 
    border-radius: 7px; 
    border-bottom: 4px solid var(--rojo); 
    box-shadow: 0 7px 7px rgba(0, 0, 0, 0.2); 
}

/* Control de capas en escritorio */
.nav-wrapper .nav-dropdown,
.nav-wrapper .sub-menu,
.nasa-megamenu .nav-dropdown {
    z-index: 99999 !important;
    overflow: visible !important;
}

.nav-wrapper .sub-menu li,
.nav-wrapper .nav-dropdown li {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.nav-wrapper .sub-menu li a {
    color: #222222 !important;
    line-height: 1.4 !important;
    padding: 8px 15px !important;
    display: block !important;
}

.nav-wrapper .sub-menu li a:hover {
    color: var(--rojoC) !important;
}

/* --- VISTA ESCRITORIO (PANTALLAS > 991px) --- */
@media (min-width: 992px) {
    .main-navigation .TituloSubMenu > a,
    .TituloSubMenu > a {
        cursor: default !important;
        pointer-events: none !important;
        position: relative !important;
        display: inline-block !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    .main-navigation .TituloSubMenu > a::after,
    .TituloSubMenu > a::after {
        content: '' !important;
        position: absolute !important;
        bottom: 0 !important;
        left: 15px !important;
        width: 50px !important;
        height: 3px !important;
        background-color: #b91c1c !important;
        border-radius: 2px !important;
    }
}

/* --- VISTA MÓVIL (PANTALLAS <= 991px) --- */
@media (max-width: 991px) {
    li.menu-item.item-saludo-texto.default-menu.root-item.nasa_even {
    margin-top: 30px !important; /*Separar el menú principal de menú Top en mobiles*/
}
    /* Permitir clic en los títulos principales */
    .main-navigation .TituloSubMenu > a,
    .TituloSubMenu > a {
        cursor: pointer !important;
        pointer-events: auto !important;
        position: relative !important;
        display: block !important;
        padding-bottom: 8px !important;
        margin-bottom: 12px !important;
    }

    /* Ocultar línea roja de escritorio en móvil */
    .main-navigation .TituloSubMenu > a::after,
    .TituloSubMenu > a::after {
        display: none !important;
        content: none !important;
    }

    /* Posicionar gatillo + / - SOLO en el menú principal del primer nivel */
    .nav-dropdown-mobile > ul > .li_accordion > a.accordion,
    .nav-dropdown-mobile > .accordion {
        display: inline-block !important;
        position: absolute !important;
        right: 15px !important;
        top: 20px !important;
        z-index: 10 !important;
    }

    /* 🚫 ANULACIÓN TOTAL DE LOS GUIONES/LÍNEAS FLOTANTES EN SUB-CATEGORÍAS */
    .nav-column-links a.accordion,
    .nav-column-links .accordion,
    .nav-column-links .li_accordion > a::after,
    .nav-column-links .li_accordion > a::before,
    .nav-column-links .TituloSubMenu > a::after,
    .nav-column-links .TituloSubMenu > a::before,
    .nav-dropdown-mobile .nav-column-links *::after,
    .nav-dropdown-mobile .nav-column-links *::before {
        content: none !important;
        display: none !important;
        border: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    .nav-column-links a.accordion {
        font-size: 0 !important;
        line-height: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        visibility: hidden !important;
    }

    /* Limpiar bordes de contenedores */
    .nav-dropdown-mobile .li_accordion,
    .nav-dropdown-mobile .nav-column-links {
        border: none !important;
        box-shadow: none !important;
    }

    /* FORZAR APERTURA DE NIVELES INFERIORES */
    .nav-dropdown-mobile .nav-column-links,
    .li_accordion .nav-column-links,
    .nav-dropdown-mobile ul.sub-menu {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        height: auto !important;
    }

    /* Formato de sub-ítems: Texto normal con sangría */
    .nav-column-links ul.sub-menu li a,
    .nav-dropdown-mobile ul.sub-menu ul.sub-menu li a {
        font-weight: 400 !important;
        font-size: 13.5px !important;
        color: #475569 !important;
        padding-top: 8px !important;
        padding-bottom: 8px !important;
        padding-left: 15px !important;
    }

    .nav-column-links ul.sub-menu li a:hover {
        color: var(--rojoC) !important;
    }

    /* Desactivar clic en títulos de columnas internas */
    .nav-column-links .TituloSubMenu > a,
    .nav-column-links .li_accordion > a {
        pointer-events: none !important;
        cursor: default !important;
    }
    #mobile-navigation .nav-dropdown-mobile li a.accordion {
    visibility: hidden;
    display: none;
    }
    #mobile-navigation .nav-dropdown-mobile .nav-column-links li a.accordion {
    visibility: hidden !important;
    display: none !important;
    }
/* ==========================================================================
   JERARQUÍA MÓVIL POR PROFUNDIDAD (2DO NIVEL = PADRE | 3ER NIVEL = HIJO)
   ========================================================================== */
.wpsc-tff-label { color: var(--negro)!important;}
.wpsc-tff .extra-info {font-size: 12px!important; color: var(--gris)!important;}
button#loginform-submit:hover {background: var(--rojoC) !important;}
button#loginform-submit {
    background: var(--negro) !important;
    border-radius: 20px;
    border: none !important;
}

    /* 1. SEGUNDO NIVEL (Encabezados como PQRS y Evaluación del Servicio) */
    #mobile-navigation .nav-dropdown-mobile ul.sub-menu > li > a,
    .nav-dropdown-mobile ul.sub-menu > li > a {
        font-weight: 700 !important;      /* Negrita de título */
        font-size: 15px !important;       /* Tamaño destacado */
        color: #585d65 !important;        /* Tono principal */
        padding-left: 20px !important;     /* Alineado a la izquierda sin sangría */
        margin-top: 8px !important;
        display: block !important;
    }

    /* 2. TERCER NIVEL (Sub-ítems finales como Crear PQRS, Seguimiento PQRS) */
    .wpsc-button.primary:hover { background: var(--rojoC) !important; border:none!important;}
    #mobile-navigation .nav-dropdown-mobile ul.sub-menu ul.sub-menu li a,
    .nav-dropdown-mobile ul.sub-menu ul.sub-menu li a {
        font-weight: 400 !important;      /* Texto normal sin negrita */
        font-size: 15px !important;     /* Tamaño secundario */
        color: #475569 !important;         /* Gris intermedio */
        padding-left: 18px !important;     /* Sangría para subordinarlo al padre */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        display: block !important;
    }

    #mobile-navigation li.CTA {
        width: fit-content;
        left: 20px;
        top: 20px;
        line-height: 15px;
    }
}



/* ==========================================================================
   2.1 DESPLEGABLES Y SUBMENÚS EN TOP BAR (CORRECCIÓN HUECO Y ENLACES VACÍOS)
   ========================================================================== */
#top-bar{ border-bottom: none!important;}
.top-bar,
.header-top,
.nasa-topbar-wrap,
#top-bar {
    overflow: visible !important;
}

.top-bar .menu-item-has-children,
.header-top .menu-item-has-children,
#top-bar .menu-item-has-children {
    position: relative !important;
}

/* 1. Posicionamiento de la caja más pegado arriba (top: 85%) */
.top-bar ul.sub-menu,
.header-top ul.sub-menu,
#top-bar ul.sub-menu {
    display: none;
    position: absolute !important;
    top: 85% !important; /* Subido para pegarlo a "Mi Cuenta" */
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 200px !important;
    background: #ffffff !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border: 1px solid #e2e8f0 !important;
    border-bottom: 3px solid var(--rojo) !important;
    padding: 4px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 999999 !important;
}

/* 2. Ocultar enlaces fantasmas o vacíos generados por el JavaScript de Elessi */
.top-bar ul.sub-menu li > a:empty,
.header-top ul.sub-menu li > a:empty,
#top-bar ul.sub-menu li > a:empty {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 3. Puente de contención para mantener el hover activado */
.top-bar .menu-item-has-children::after,
.header-top .menu-item-has-children::after,
#top-bar .menu-item-has-children::after {
    content: '' !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    height: 15px !important;
    display: block !important;
}

.top-bar .menu-item-has-children:hover > ul.sub-menu,
.header-top .menu-item-has-children:hover > ul.sub-menu,
#top-bar .menu-item-has-children:hover > ul.sub-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 4. Estilos finales de enlaces */
.top-bar ul.sub-menu li,
.header-top ul.sub-menu li,
#top-bar ul.sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.top-bar ul.sub-menu li a,
.header-top ul.sub-menu li a,
#top-bar ul.sub-menu li a {
    display: block !important;
    padding: 9px 18px !important;
    color: #334155 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

.top-bar ul.sub-menu li a:hover,
.header-top ul.sub-menu li a:hover,
#top-bar ul.sub-menu li a:hover {
    background-color: #f8fafc !important;
    color: var(--rojoC, #dd1c23) !important;
    padding-left: 22px !important;
}

/* Separador visual para Cerrar Sesión dentro del submenú */
.top-bar ul.sub-menu li.item-logout-topbar,
#top-bar ul.sub-menu li.item-logout-topbar {
    border-top: 1px solid #f1f5f9 !important;
    margin-top: 4px !important;
    padding-top: 2px !important;
}

.top-bar ul.sub-menu li.item-logout-topbar a:hover,
#top-bar ul.sub-menu li.item-logout-topbar a:hover {
    color: var(--rojo) !important;
    background-color: #fff5f5 !important;
}

/* Alineación perfecta de íconos en submenú */
.top-bar ul.sub-menu li a i,
#top-bar ul.sub-menu li a i {
    width: 16px !important;
    text-align: center !important;
    display: inline-block !important;
    color: #64748b !important;
    transition: color 0.2s ease !important;
}

.top-bar ul.sub-menu li a:hover i,
#top-bar ul.sub-menu li a:hover i {
    color: var(--rojoC, #dd1c23) !important;
}
/* Forzar visibilidad y alineación de íconos en el submenú */
.top-bar ul.sub-menu li a i,
#top-bar ul.sub-menu li a i {
    display: inline-block !important;
    width: 18px !important;
    text-align: center !important;
    margin-right: 6px !important;
    color: #64748b !important;
}

.top-bar ul.sub-menu li a:hover i,
#top-bar ul.sub-menu li a:hover i {
    color: var(--rojoC, #dd1c23) !important;
}
/* Forzar renderizado de icono FontAwesome */
.top-bar ul.sub-menu li a i,
#top-bar ul.sub-menu li a i {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free", "FontAwesome", sans-serif !important;
    font-weight: 900 !important;
    width: 18px !important;
    text-align: center !important;
    margin-right: 8px !important;
    color: #64748b !important;
    font-size: 14px !important;
}


/* ==========================================================================
   OCULTAR ÍCONO DELGADO PE-7S Y SVG DE ELESSI EN CERRAR SESIÓN
   ========================================================================== */
.item-logout-clean a > i.nasa-menu-item-icon,
.item-logout-clean a > svg.nasa-open-child,
.CerrarSesion a > i.nasa-menu-item-icon,
.CerrarSesion a > svg.nasa-open-child {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    margin: 0 !important;
}

/* Forzar renderizado y alineación perfecta del ícono FontAwesome */
.item-logout-clean a i.fa-sign-out-alt,
.CerrarSesion a i.fa-sign-out-alt {
    display: inline-block !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    margin-right: 6px !important;
}


/* Convertir el elemento del saludo en texto totalmente estático */
.item-saludo-texto a {
    pointer-events: none !important; /* Deshabilita el clic */
    cursor: default !important;     /* Cambia el cursor de mano a flecha normal */
    color: #334155 !important;       /* Mantiene el color neutro del texto */
    text-decoration: none !important;
}

.item-saludo-texto a:hover {
    color: #334155 !important;       /* Quita el cambio de color al pasar el mouse */
}

/* ==========================================================================
   3. TOP BAR Y ZONA UTILIDADES (CERRAR SESIÓN)
   ========================================================================== */
.user-utility-bar {
    background-color: var(--azul);
    color: #ffffff;
    padding: 6px 20px;
    font-size: 13px;
    font-family: inherit;
}

.utility-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1150px;
    margin: 0 auto;
}

.utility-links {
    display: flex;
    gap: 20px;
    align-items: center;
}

.utility-link-item {
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px;
}

.utility-logout:hover {
    filter: brightness(1.2);
}


/* ==========================================================================
   4. ZONA DRAG AND DROP
   ========================================================================== */
.drag-drop-box {
    border: 2px dashed #00D181;
    background: #fafafa;
    padding: 30px 20px;
    border-radius: 8px;
    text-align: center;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.drag-drop-box:hover, .drag-drop-box.dragover {
    background: #f0fbf7;
    border-color: #0F4BF2;
}

.icon-drop {
    font-size: 35px;
    color: #8E8E8E;
    margin-bottom: 10px;
    pointer-events: none;
}

.text-drop {
    font-size: 14px;
    color: #555;
    margin: 0 0 10px 0;
    pointer-events: none;
}

.file-preview-text {
    margin-top: 10px;
    font-weight: bold;
    color: #0F4BF2;
    font-size: 13px;
    pointer-events: none;
}

.drag-drop-box.input-error {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
}


/* ==========================================================================
   5. FORMULARIO MULTISTEP: ESTRUCTURA DE PASOS (INDICADOR)
   ========================================================================== */
.step-indicator {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    position: relative;
    padding: 0 10px;
}

.step {
    text-align: center;
    z-index: 2;
    flex: 1;
}

.step-number {
    width: 35px;
    height: 35px;
    background-color: #e0e0e0;
    color: #666;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8px;
    font-weight: bold;
    transition: all 0.3s ease;
    border: 3px solid #fff;
}

.step-text {
    font-size: 12px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
}

.step.active .step-number {
    background-color: var(--azul);
    color: white;
    box-shadow: 0 0 0 3px rgba(15, 75, 242, 0.2);
}

.step.active .step-text {
    color: var(--azul);
}

.step.completed .step-number {
    background-color: var(--verde);
    color: white;
}

.progress-bar-container {
    position: absolute;
    top: 17px;
    left: 10%;
    width: 80%;
    height: 2px;
    background-color: #e0e0e0;
    z-index: 1;
}

.progress-line {
    height: 100%;
    width: 0%;
    background-color: var(--verde);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.step.completed .step-number::after {
    content: '✓';
    font-size: 14px;
}

.step.completed .step-number {
    font-size: 0;
}

.form-step {
    animation: fadeInForm 0.5s ease;
}

@keyframes fadeInForm {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.step-title {
    color: var(--rojo) !important;
    border-bottom: 2px solid var(--verde) !important;
    padding-bottom: 10px !important;
    margin-bottom: 25px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}


/* ==========================================================================
   6. FORMULARIO MULTISTEP: CAMPOS ESTÁNDAR Y GRID (INPUTS, LABELS, NUMBER)
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.grid-3 { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 15px; margin-bottom: 15px; }
.grid-1 { display: grid; grid-template-columns: 1fr; gap: 15px; margin-bottom: 15px; }
.grid-2-col {
        grid-template-columns: 1fr !important;
    }


.grid-2-col {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
    align-items: start !important;
    margin-bottom: 15px !important;
}

@media (max-width: 768px) {
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .grid-2, .grid-3, .grid-2-col { grid-template-columns: 1fr !important; } /*para campo dinamico otro ¿cuál?*/
    .grid-2-col {grid-template-columns: 1fr !important;}
}


/* Ocultar y colapsar los <br> inyectados automáticamente por CF7 */
.campo br,
.bloque-repetible br,
.form-step br {
    display: none !important;
}

.campo {
    margin-bottom: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.campo label,
.bloque-repetible label {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 6px !important;
}

/* Regla directa para inputs de texto y número */
.campo input,
.bloque-repetible input {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Ajuste específico para SELECTs (Evita que se corte el texto) */
.campo select,
.bloque-repetible select {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 14px !important;
    line-height: 44px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
}

/* Corrección de ancho y contención para el Textarea y su wrapper */
.campo textarea.form-control,
.campo textarea,
.bloque-repetible textarea,
.bloque-repetible .wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    box-sizing: border-box !important;
}

.campo textarea,
.bloque-repetible textarea {
    height: 95px !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 8px !important;
    outline: none !important;
    resize: vertical !important;
}

.campo input::placeholder,
.campo textarea::placeholder {
    color: #94a3b8 !important;
    font-size: 13.5px !important;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus {
    border-color: var(--azul) !important;
    box-shadow: 0 0 0 3px rgba(15, 75, 242, 0.12) !important;
}
/* ==========================================================================
   7. FORMULARIO MULTISTEP: TARJETA REPETIBLE DE EQUIPOS Y BOTÓN ELIMINAR
   ========================================================================== */
.wpcf7-field-groups, 
.wpcf7-form {
    counter-reset: equipo-counter;
}

.wpcf7-field-group {
    counter-increment: equipo-counter;
    position: relative;
}

.bloque-repetible {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 25px 25px 20px 25px !important;
    margin-bottom: 25px !important;
    position: relative !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: visible !important;
}

.bloque-repetible::before {
    content: "Equipo " counter(equipo-counter);
    display: inline-block;
    background-color: var(--azul);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    box-shadow: 0 2px 6px rgba(15, 75, 242, 0.25);
}

/* ESPECIFICIDAD AUMENTADA SOBRE DYNAMIC.CSS */
body form button.btn-eliminar-equipo-custom,
body form .bloque-repetible button.btn-eliminar-equipo-custom,
body button.btn-eliminar-equipo-custom,
.btn-eliminar-equipo-custom {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    background-color: #ff4d4d !important;
    background: #ff4d4d !important;
    color: #ffffff !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 0 12px 0 12px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    z-index: 10 !important;
    transition: all 0.25s ease !important;
    line-height: 1 !important;
}

body form button.btn-eliminar-equipo-custom:hover,
body form .bloque-repetible button.btn-eliminar-equipo-custom:hover,
body button.btn-eliminar-equipo-custom:hover,
.btn-eliminar-equipo-custom:hover {
    background-color: #d3000b !important;
    background: #d3000b !important;
    box-shadow: 0 4px 12px rgba(211, 0, 11, 0.25) !important;
}

.wpcf7-field-group-remove {
    display: none !important;
}

.bloque-repetible:has(.btn-eliminar-equipo-custom:hover) {
    border-color: #ff4d4d !important;
    box-shadow: 0 8px 25px rgba(255, 77, 77, 0.18) !important;
    background-color: #fff8f8 !important;
}


/* ==========================================================================
   8. FORMULARIO MULTISTEP: BOTONES DE NAVEGACIÓN Y "+ ADICIONAR EQUIPO"
   ========================================================================== */

/* 1. Ocultar totalmente los botones de adicionar en bloques intermedios */
.wpcf7-field-group .wpcf7-field-group-add,
button.wpcf7-field-group-add,
a.wpcf7-field-group-add {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* 2. Mostrar y dar formato al botón ÚNICAMENTE en el último grupo */
.wpcf7-field-group:last-of-type .wpcf7-field-group-add {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: 44px !important;
    padding: 12px 22px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    background-color: var(--verde) !important;
    background: var(--verde) !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: none !important;
    box-shadow: 0 3px 10px rgba(40, 167, 69, 0.25) !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    width: auto !important;
    min-width: 200px !important;
}

.wpcf7-field-group:last-of-type .wpcf7-field-group-add::after {
    content: " Adicionar Equipo" !important;
}

.wpcf7-field-group:last-of-type .wpcf7-field-group-add:hover {
    background-color: #218838 !important;
    background: #218838 !important;
    box-shadow: 0 5px 15px rgba(40, 167, 69, 0.35) !important;
}

/* Contenedores de botones de pasos */
.step-navigation-single {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 30px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 20px !important;
}

.step-navigation {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 30px !important;
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 20px !important;
}

/* Regla base de botones de navegación */
body form .step-navigation button.next-btn,
body form .step-navigation button.prev-btn,
body form .step-navigation-single button.next-btn,
body form .step-navigation-single button.prev-btn,
body button.next-btn,
body button.prev-btn,
.next-btn, 
.prev-btn, 
input[type="submit"].next-btn {
    padding: 12px 24px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

/* BOTÓN SIGUIENTE (Negro -> Rojo en Hover) */
body form button.next-btn,
body button.next-btn,
body input[type="submit"].next-btn,
.next-btn, 
input[type="submit"].next-btn {
    background-color: var(--negro) !important;
    background: var(--negro) !important;
    color: #ffffff !important;
    border: none !important;
}

body form button.next-btn:hover,
body button.next-btn:hover,
body input[type="submit"].next-btn:hover,
.next-btn:hover, 
input[type="submit"].next-btn:hover {
    background-color: var(--rojoC) !important;
    background: var(--rojoC) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(242, 15, 15, 0.3) !important;
}

/* BOTÓN ANTERIOR (Gris) */
body form button.prev-btn,
body button.prev-btn,
.prev-btn {
    background-color: #f1f5f9 !important;
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #cbd5e1 !important;
}

body form button.prev-btn:hover,
body button.prev-btn:hover,
.prev-btn:hover {
    background-color: #e2e8f0 !important;
    background: #e2e8f0 !important;
    color: #1e293b !important;
}

/* ==========================================================================
   9. FORMULARIO MULTISTEP: CHECKBOX Y FINALIZACIÓN (PASO 3)
   ========================================================================== */
.campo-aceptacion-custom {
    margin-top: 25px !important;
    background: #f8fafc !important;
    padding: 18px 20px !important;
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
}

.custom-checkbox input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #cbd5e1 !important;
    border-radius: 6px !important;
    outline: none !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin-right: 12px !important;
    position: relative !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
}

.custom-checkbox input[type="checkbox"]:checked {
    background-color: var(--azul) !important;
    border-color: var(--azul) !important;
}

.custom-checkbox input[type="checkbox"]:checked::after {
    content: '' !important;
    position: absolute !important;
    left: 7px !important;
    top: 3px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2.5px 2.5px 0 !important;
    transform: rotate(45deg) !important;
}

.text-aceptacion {
    font-size: 13.5px !important;
    color: #334155 !important;
    line-height: 1.4 !important;
}

.text-aceptacion a {
    color: var(--azul) !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}

/* Estados de Error y Éxito */
.input-error { 
    border-color: #ff4d4d !important; 
    background-color: #fff8f8 !important; 
}

.confirmacion-exito {
    background-color: #ffffff;
    border-top: 5px solid #28a745;
    padding: 50px 30px;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    animation: fadeInSuccess 0.6s ease forwards;
}

.icono-check {
    width: 70px;
    height: 70px;
    background: #28a745;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    margin: 0 auto 25px;
}

.footer-success {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    color: #888;
}

.btn-volver {
    margin-top: 30px;
    background: #0056b3;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: background 0.3s;
}

.btn-volver:hover {
    background: #004494;
}

@keyframes fadeInSuccess {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

div.wpcf7 .wpcf7-form.submitting::after {
    border-top: 4px solid var(--azul)!important;
    border-bottom: 4px solid var(--verde)!important;
    border-left: 4px solid var(--azul)!important;
    border-right: 4px solid var(--verde)!important;
}

/* ==========================================================================
   SOLUCIÓN AL FOOTER ROTO EN PÁGINAS DE SUPPORTCANDY / ÁREA PRIVADA
   ========================================================================== */

/* 1. Forzar limpieza de flotados antes del footer */
#footer-wrapper,
footer.footer,
.footer-wrapper,
#nasa-footer {
    clear: both !important;
    width: 100% !important;
    position: relative !important;
    z-index: 10 !important;
    overflow: hidden !important;
}

/* 2. Corregir el colapso del Grid (Row/Columns) dentro del Footer */
footer.footer .row,
#footer-wrapper .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 1200px !important;
}

/* 3. Evitar que la máscara/curva blanca se desplace horizontalmente */
footer.footer .footer-static-content,
#footer-wrapper .footer-static-content,
.footer-top-shape {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* 4. Asegurar que las columnas mantengan su espacio y no se monten */
footer.footer .columns,
#footer-wrapper .columns {
    float: none !important;
    box-sizing: border-box !important;
}