/* ============================================================
   ZEUS ERP — CSS UNIFICADO
   Cubre: Panel flotante CF7, Formulario Demo Técnica (Demotec)
   Última revisión: consolidación sin duplicados
   ============================================================ */


/* ==========================================
   1. BASE / BODY
   ========================================== */

body {
    background: #fff !important;
}


/* ==========================================
   2. OCULTAR ELEMENTOS DE PLANTILLA
   ========================================== */

/* Ocultar área clientes solo en página de demo */
ul.menu-section li:has(.btn-area-clientes) { display: none !important; }
.btn-area-clientes,
.menu-dropdown-clientes                    { display: none !important; } 

/* Ocultar botón "Contáctanos" flotante en página de demo */

#contacto-cta #contact-btn                 { display: none !important; }
/* ==========================================
   3. PANEL FLOTANTE (#contacto-box)
   ========================================== */

#contacto-box {
    position: fixed;
    opacity: 0;
    right: 75px;
    bottom: 30px !important;
    transform: translateX(450px);
    pointer-events: none;
    background: #fff;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
    border-radius: 1rem;
    z-index: 99990 !important;
    max-width: calc(100% - 90px);
    width: 400px;
    transition: all .3s ease-out;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Estado abierto conectado con el JS original de la plantilla */
#contacto-box.contact-open {
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
    visibility: visible !important;
    display: flex !important; 
}

#contacto-box .content {
    padding: 1rem;
    padding-bottom: 0 !important;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}

#contacto-box .form-control,
#contacto-box .form-select {
    border: none;
    margin-bottom: 0 !important;
    box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;
    transition: all .2s ease;
    color: #4D6A88 !important;
}


/* ==========================================
   4. PANEL INTERNO CF7 (#cf7-panel)
   ========================================== */

#cf7-panel {
    max-height: 100%;
    height: auto;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
    padding-top: 5px;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
}

/* Mensaje de respuesta CF7 pegado al fondo */
.wpcf7 form .wpcf7-response-output {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin: 12px 0 0;
}


/* ==========================================
   5. CAJA DE FORMULARIO — PÁGINA DEMO (.form-box)
   ========================================== */

/* Base (pantallas hasta 1399px) */
.form-box {
    min-width: 52px;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    color: #002955;
    /*height: 800px;*/
    width: 85%;
    margin-top: 0 !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    z-index: 0;
}

/* Pantallas grandes ≥ 1400px */
@media (min-width: 1400px) {
    .form-box {
        min-width: 52px;
        padding: 25px 46px 50px 40px;
        width: 469px !important;
        height: 533px !important;
        margin-top: 0 !important;
        position: relative;
        right: 82px;
        top: -4px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .form-box {
        min-width: 52px;
        padding: 20px;
        height: 496px!important;
        margin-top: 30px !important;
        width: 100%;
    }
}


/* ==========================================
   6. FONDO Y LAYOUT — PÁGINA DEMO
   ========================================== */

.fondo-header-erp {
    background-image: url(https://erpcloud.zeuserp.tech/wp-content/themes/zeus-2023-vertical/assets/img/backportada.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 665px;
    margin-top: 47px !important;
}

@media (min-width: 1400px) {
    .fondo-header-erp {
        height: 525px !important;
        margin: 0 70px 60px 70px;
        border-radius: 67px;
    }

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1393px;
    }

    .text-column {
        position: relative;
        left: 74px;
    }

    .items-container {
        gap: 0 !important;
    }
}

@media (max-width: 1000px) {
    .items-container {
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 1399px) {
    #submitBtn {
        width: 218px;
        border-radius: 5px;
    }

    .text-column {
        width: 100%;
    }
}

@media (max-width: 768px) {
    body, html, .container-narrow {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }

    .fondo-header-erp {
        height: auto !important;
        border-radius: 34px;
        padding: 60px 32px 26px 34px !important;
        margin: 20px;
    }

    .text-column p {
        padding-bottom: 20px !important;
    }
}

/* Columna de texto (lado izquierdo) */
.col-text {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    justify-content: left;
    width: 615px;
    padding: 0 0 0 80px;
    position: relative;
    top: -60px!important;
}

.col-text h1 {
    color: #FFF;
    font-family: Ubuntu, sans-serif;
    font-size: 50px;
    font-weight: 700;
    line-height: normal;
    margin-top: -40px;
}

.col-text h2 {
    color: #FFF;
    font-family: Ubuntu, sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 30px;
    width: 500px;
    margin-top: 10px;
}

@media (max-width: 900px) {
    .col-text {
        flex: 1 1 100%;
        width: 100%;
        padding: 0 8px;
        align-items: center;
        justify-content: flex-start;
    }

    .col-text h1 {
        width: 350px;
        text-align: center;
        font-size: 25px;
    }

    .col-text h2 {
        text-align: center;
        font-size: 16px;
        line-height: 20px;
        margin: 0;
        width: 288px;
    }
}

@media (max-width: 500px) {
    .col-text h1 {
        padding: 47px 15px 10px 15px;
    }
}

/* Columna de formulario (lado derecho) */
.col-form {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    padding: 33px 46px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.col-form input,
.col-form select,
.col-form textarea {
    width: 100%;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-family: 'Ubuntu', sans-serif;
    font-size: 15px;
    border: 1px solid #FFF;
    background: #FFF;
    box-shadow: 2px 4px 5px 0 rgba(19, 25, 40, 0.05);
}

.col-form input[type="submit"] {
    background: linear-gradient(97deg, #6A00A7 -0.71%, #00CDCD 100.1%);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    width: 100%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.col-form input[type="submit"]:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

@media (max-width: 900px) {
    .col-form {
        flex: 1 1 100%;
        width: 100%;
        max-width: 420px;
        padding: 20px 16px;
        margin-top: 8px;
    }

    .col-form input,
    .col-form select,
    .col-form textarea {
        font-size: 14px;
        padding: 9px 11px;
        margin-bottom: 10px;
    }
}

/* Logos demo */
.logos-zeus-antion-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 22px;
    position: relative;
    top: 23px;
}

.circulo-container {
    width: 250px;
    height: 107px;
    border-radius: 200px;
    background: #FFF;
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-zeus-demo  { width: 184.253px; height: 53.289px; }
.logo-antion-demo { width: 184.476px; height: 78.255px; }
.plus            { width: 29px;      height: 30px; }

@media (max-width: 900px) {
    .logo-zeus-demo   { width: 184.253px; height: 53.289px; }
    .logo-antion-demo { width: 156px;     height: 66px; }
    .circulo-container { width: 250px;   height: 107px; }
}

@media (max-width: 500px) {
    .logos-zeus-antion-container { gap: 5px; }
    .logo-zeus-demo              { width: 73px;      height: 23px; }
    .logo-antion-demo            { width: 83.476px;  height: 35.255px; }
    .circulo-container           { width: 132px;     height: 56px; }
    .plus                        { width: 22px;      height: 20px; }
}


/* ==========================================
   7. CAMPOS DEL FORMULARIO (.form-control)
   ========================================== */

.form-control {
    display: block;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #002955;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    height: 41px;
    border-radius: 8px;
    border: 1px solid #FFF;
    background: #FFF;
    box-shadow: 2px 4px 5px 0 rgba(19, 25, 40, 0.05);
}

@media (min-width: 1400px) {
    .form-control {
        height: 35px;
    }
}

@media (max-width: 768px) {
    .form-control {
        height: 41px;
    }
}

textarea.form-control,
.ph-wrap textarea.wpcf7-form-control,
.inputs-wrapper textarea {
    min-height: calc(1.5em + .75rem + 2px);
    height: 55px !important;
    min-height: 100px !important;
    padding-top: 12px !important;
    resize: none;
}

@media (max-width: 768px) {
    textarea.form-control {
        height: 70px;
    }
}

/* Colores de texto al escribir (Inputs y Selects) */
.inputs-wrapper select,
.inputs-wrapper input,
.inputs-express select,
.inputs-express input {
    color: #002955 !important;
}

/* Color específico solo para el campo "Cuéntanos cómo podemos ayudarte" (Textarea) */
.inputs-wrapper textarea,
.inputs-express textarea,
.ph-wrap textarea.wpcf7-form-control {
    color: rgba(0, 41, 85, 0.70) !important;
}

/* Sombras y bordes en inputs-wrapper */
.inputs-wrapper .form-control,
.inputs-wrapper select,
.inputs-wrapper textarea,
.telefono-input input,
.telefono-container .iti__flag-container {
    background-color: #FFFFFF !important;
    border: 0px solid #EAEAEA !important;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08) !important;
    border-radius: 8px !important;
    color: #5e6f81 !important;
}

/* Focus */
.inputs-wrapper .form-control:focus,
.inputs-wrapper select:focus,
.inputs-wrapper textarea:focus,
.telefono-input input:focus {
    box-shadow: 0px 4px 15px rgba(106, 0, 167, 0.15) !important;
    border-color: #6A00A7 !important;
    outline: none !important;
}

/* Errores de validación */
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 12px;
    font-weight: normal;
    display: block;
    font-family: 'Ubuntu', sans-serif;
}


/* ==========================================
   8. ESPACIADO UNIFORME ENTRE CAMPOS (7px)
   ========================================== */

.inputs-wrapper .ph-wrap,
.inputs-wrapper .telefono-container,
.inputs-wrapper .select-arrow {
    margin-bottom: 7px !important;
}

/* Sin margen en el elemento hijo — el wrapper lo maneja */
.inputs-wrapper .form-control,
.inputs-wrapper select,
.inputs-wrapper textarea {
    margin-bottom: 0 !important;
}

/* ==========================================
   9. SELECT PERSONALIZADO (.custom-dropdown / .select-arrow)
   ========================================== */

/* Flecha en todos los custom-dropdown */
.custom-dropdown {
    position: relative;
}

.custom-dropdown::after {
    content: "";
    background-image: url('https://zeuserp.tech/wp-content/uploads/2026/04/Vector-3.png');
    background-repeat: no-repeat;
    background-position: center;
    width: 9px;
    height: 7px;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform 0.3s ease;
    pointer-events: none;
}

.custom-dropdown.open::after {
    transform: translateY(-50%) rotate(180deg);
}

/* Evita flecha duplicada en Sector/Usuarios (tiene la flecha de fondo) */
.custom-dropdown.form-control.custom-select-rubro::after {
    content: none !important;
    background-image: none !important;
}

/* Estilo del select de rubro/usuarios */


.custom-dropdown.form-control.custom-select-rubro {

    background-image: url('https://zeuserp.tech/wp-content/uploads/2026/04/Vector-3.png');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 7px;
    padding-right: 40px;
    cursor: pointer;
}



/* Wrapper con flecha para selects genéricos */
.select-arrow {
    position: relative;
    display: block;
}

.select-arrow > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 42px !important;
    background: #fff !important;
}

.select-arrow::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%) rotate(0deg);
    width: 9px;
    height: 7px;
    background-image: url('https://zeuserp.tech/wp-content/uploads/2026/04/Vector-3.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
    opacity: .95;
}

.select-arrow.open::after {
    transform: translateY(-50%) rotate(180deg);
}


/* ==========================================
   10. PLACEHOLDERS
   ========================================== */

input::placeholder {
    color: #002955 !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

input::-moz-placeholder      { color: #002955 !important; opacity: 1 !important; }
input:-ms-input-placeholder   { color: #002955 !important; }
input::-ms-input-placeholder  { color: #002955 !important; }

/* Textarea: color más suave */
textarea::placeholder         { color: rgba(0, 41, 85, 0.70) !important; opacity: 1 !important; }
textarea::-moz-placeholder    { color: rgba(0, 41, 85, 0.70) !important; opacity: 1 !important; }
textarea:-ms-input-placeholder  { color: rgba(0, 41, 85, 0.70) !important; }
textarea::-ms-input-placeholder { color: rgba(0, 41, 85, 0.70) !important; }


/* ==========================================
   11. INTL-TEL-INPUT (TELÉFONO CON BANDERA)
   ========================================== */

.iti {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    display: block;
}

.iti--allow-dropdown input,
.iti--allow-dropdown input[type="text"],
.iti--allow-dropdown input[type="tel"],
.iti--separate-dial-code input,
.iti--separate-dial-code input[type="text"],
.iti--separate-dial-code input[type="tel"] {
    height: 41px !important;
    line-height: 41px !important;
    padding-right: 6px;
    padding-left: 60px;
    margin-left: 0;
    margin-top: 3px!important;
}

.iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100% !important;
    padding: 0 10px !important;
}

.iti__flag-container {
    border-radius: 8px;
    border: 1px solid #FFF;
    background: #FFF;
    height: 39px !important;
}

/* Flecha personalizada */
.iti__arrow {
    width: 9px;
    height: 7px;
    background-image: url('https://zeuserp.tech/wp-content/uploads/2026/04/Vector-3.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    border: none;
    margin-left: 12px;
}

.iti__arrow::before { display: none; }

/* Lista de países */
.iti__country-list {
    position: absolute;
    z-index: 9999 !important;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0 0 0 -1px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15) !important;
    border-radius: 8px !important;
    background-color: #fff;
    border: none !important;
    white-space: nowrap;
    max-height: 200px;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    top: 100% !important;
    bottom: auto !important;
    margin-top: 3px !important;
    left: 0 !important;
    right: auto !important;
    font-family: 'Ubuntu', sans-serif !important;
}

.iti--container {
    position: absolute !important;
    z-index: 999999 !important;
}

/* Teléfono mobile */
@media (max-width: 768px) {
    .iti--allow-dropdown input,
    .iti--allow-dropdown input[type="text"],
    .iti--allow-dropdown input[type="tel"],
    .iti--separate-dial-code input {
        padding-right: 6px;
        padding-left: 70px;
    }

    .iti__flag-container {
        height: 100% !important;
        background: transparent !important;
    }

    .iti__country-list {
        width: 80% !important;
    }
}

/* Contenedor teléfono */
.telefono-container {
    display: flex;
    /* sin margin-bottom propio — lo maneja inputs-wrapper */
}

.telefono-input {
    position: relative;
    width: 100% !important;
}

/* Ocultar elementos manuales de bandera (se usa solo intl-tel-input) */
.telefono-container .bandera-select,
.telefono-container .dropdown-toggle-bandera,
.telefono-container .dropdown-menu,
.telefono-container .dropdown-toggle-bandera img {
    display: none !important;
}

.telefono-container .form-control::before,
.telefono-container .form-control::after {
    display: none !important;
    content: none !important;
}

.telefono-container .iti__flag-container {
    display: flex !important;
    margin-left: 5px !important;
}

/* Flechas en inputs type number */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    filter: invert(14%) sepia(0%) saturate(0%) hue-rotate(266deg) brightness(50%) contrast(100%);
}

/* Hint de email */
.email-hint {
    color: var(--Azul-oscuro, #002955);
    font-family: Ubuntu, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 125%;
    letter-spacing: 0.07px;
    margin-bottom: 10px;
    display: block;
    text-align: center;
}

@media (max-width: 900px) {
    .email-hint {
        font-size: 10px;
        line-height: 1.4;
        text-align: center;
    }
}


/* ==========================================
   12. AUTOCOMPLETADO (WEBKIT)
   ========================================== */

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #002955 !important;
    transition: background-color 5000s ease-in-out 0s !important;
}


/* ==========================================
   13. BOTÓN ENVIAR
   ========================================== */

input.wpcf7-submit[type="submit"],
.wpcf7-submit,
#submitBtn {
    display: block !important;
    margin: 16px auto 0 !important;
    width: 218px !important;
    height: 50px !important;
    border-radius: 5px !important;
    background: #6A00A7 !important;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25) !important;
    color: #FDFCFB !important;
    font-family: 'Ubuntu', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 50px !important;
    padding: 0 !important;
    border: none !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: transform 0.2s ease, filter 0.2s ease !important;
}

input.wpcf7-submit[type="submit"]:hover,
.wpcf7-submit:hover,
#submitBtn:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

input.wpcf7-submit[type="submit"]:active,
.wpcf7-submit:active,
#submitBtn:active {
    transform: translateY(1px);
    filter: brightness(0.95);
}

/* Estado inactivo */
#submitBtn.btn-inactivo {
    background: #cccccc !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    opacity: 0.7;
    filter: grayscale(1);
}

/* Mobile: full width */
@media (max-width: 900px) {
    input.wpcf7-submit[type="submit"],
    .wpcf7-submit,
    #submitBtn {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 18px !important;
    }
}

/* Contenedor de estado de envío */
#submit-status {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    min-height: 50px;
}

/* ==========================================
   14. PRIVACIDAD Y CHECKBOX
   ========================================== */

.custom-check-wrap .wpcf7-list-item-label,
.custom-check-wrap {
    font-size: 11px !important;
    color: #002955 !important;
    font-family: 'Ubuntu', sans-serif;
    font-weight: bold;
    margin-top: 10px;
}

.link-privacidad {
    font-size: 11px !important;
    color: #6A00A7 !important;
    text-decoration: underline;
    font-weight: bold;
}


/* ==========================================
   15. TÍTULO Y RADIO BUTTONS
   ========================================== */

.form-help-title {
    color: #6A00A7;
    font-family: 'Ubuntu', sans-serif;
    font-size: 25px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 15px;
    margin-top: 15px;
}

.radio-tipo-consulta {
    text-align: center;
    margin-bottom: 20px;
}

.radio-tipo-consulta .wpcf7-radio {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.radio-tipo-consulta .wpcf7-list-item {
    margin: 0;
    display: flex;
    align-items: center;
}

.radio-tipo-consulta input[type="radio"] {
    margin: 0 8px 0 0 !important;
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid #4D6A88;
    border-radius: 50%;
    outline: none;
    cursor: pointer;
    position: relative;
    background-color: #fff;
}

.radio-tipo-consulta input[type="radio"]:checked {
    border-color: #6A00A7;
}

.radio-tipo-consulta input[type="radio"]:checked::before {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    background-color: #6A00A7;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-tipo-consulta .wpcf7-list-item-label {
    color: var(--Azul-oscuro, #002955);
    font-family: Ubuntu, sans-serif;
    font-weight: 400;
    line-height: normal;
}


/* ==========================================
   16. ASTERISCO DE OBLIGATORIEDAD (.ph-wrap / .ph-star)
   ========================================== */

.ph-wrap {
    position: relative;
    display: block;
    width: 100%;
    --ph-gap: 2px;
}

.ph-wrap .wpcf7-form-control {
    width: 100%;
    display: block;
    height: 40px;
}

.ph-star {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    color: #E11D48;
    font-weight: 700;
    font-size: 11px;
    line-height: 1;
    pointer-events: none;
    display: none;
    z-index: 2;
}

/* Ocultar si el campo tiene valor */
.ph-wrap[data-filled="1"] > .ph-star { display: none !important; }

/* Textarea: posición vertical fija */
.ph-wrap textarea + .ph-star {
    top: 1.9em;
    transform: none;
}

/* Ocultar asterisco cuando hay valor (Soporte avanzado para el Teléfono) */
.ph-wrap input:not(:placeholder-shown) ~ .ph-star,
.ph-wrap textarea:not(:placeholder-shown) ~ .ph-star,
.ph-wrap input:-webkit-autofill ~ .ph-star,
.ph-wrap:has(input:not(:placeholder-shown)) .ph-star {
    display: none !important;
}

/* === Posicionamiento específico por campo (Demotec) === */
.ph-wrap--empresa .ph-star            { font-size: 14px; left: 109px !important; top: 20.8px !important; }
.ph-wrap--codigo_tributario .ph-star  { font-size: 14px; left: 145px !important; top: 22.8px !important; }
.ph-wrap--rubro .ph-star              { font-size: 14px; left: 155px !important; top: 21.8px !important; }
.ph-wrap--nombre_apellido .ph-star    { font-size: 14px; left: 154px !important; top: 21.8px !important; }
.ph-wrap--cargo .ph-star              { font-size: 14px; left: 142px !important; top: 22px !important;   }
.ph-wrap--email .ph-star              { font-size: 14px; left: 59px !important;  top: 21px !important;   }
.ph-wrap--telefono .ph-star           { font-size: 14px; left: 145px !important; top: 21.8px !important; } 
.ph-wrap--cantidad_usuarios .ph-star  { font-size: 14px; left: 167px !important; top: 22.8px !important; }

/* Mobile: ajuste de asteriscos */
@media (max-width: 900px) {
    .ph-wrap--empresa .ph-star         { margin-left: 16px !important; }
    .ph-wrap--nombre_apellido .ph-star { margin-left: 21px !important; }
    .ph-wrap--codigo_tributario .ph-star { margin-left: 21px !important; }
    .ph-wrap--cargo .ph-star           { margin-left: 21px !important; }
    .ph-wrap--telefono .ph-star        { margin-left: 21px !important; } 
}


/* ==========================================
   17. UTILIDADES VARIAS Y COLOR GRISADO
   ========================================== */

.mt-2 { margin-top: .2rem !important; }

/* 1. Color para cuando el usuario escribe en "Cuéntanos..." */
.inputs-wrapper textarea.form-control,
.inputs-express textarea.form-control,
.ph-wrap textarea.wpcf7-form-control {
    color: rgba(0, 41, 85, 0.70) !important;
}

/* 2. Color para el texto de fondo (Placeholder) en "Cuéntanos..." */
.inputs-wrapper textarea.form-control::placeholder,
.inputs-express textarea.form-control::placeholder,
.ph-wrap textarea.wpcf7-form-control::placeholder {
    color: rgba(0, 41, 85, 0.70) !important;
    opacity: 1 !important; 
}

/* Firefox */
.inputs-wrapper textarea.form-control::-moz-placeholder {
    color: rgba(0, 41, 85, 0.70) !important;
    opacity: 1 !important;
}

/* Edge / IE */
.inputs-wrapper textarea.form-control:-ms-input-placeholder,
.inputs-wrapper textarea.form-control::-ms-input-placeholder {
    color: rgba(0, 41, 85, 0.70) !important;
    opacity: 1 !important;
}



/* ==========================================
   COLOR GRISADO PARA "CANTIDAD DE USUARIOS"
   ========================================== */

/* 1. Color grisado para el campo cerrado */
.inputs-wrapper select.custom-select-rubro {
    color: rgba(0, 41, 85, 0.70) !important;
}

/* 2. Mantenemos el azul oscuro para las opciones al desplegar la lista para mejor legibilidad */
.inputs-wrapper select.custom-select-rubro option {
    color: #002955 !important;
}


/* ==========================================
   COLOR GRISADO PARA EL CAMPO TELÉFONO
   ========================================== */

/* 1. Color para cuando el usuario escribe los números */
.telefono-input input#telefono {
    color: rgba(0, 41, 85, 0.70) !important;
}

/* 2. Color para el texto de fondo (Placeholder) */
.telefono-input input#telefono::placeholder {
    color: rgba(0, 41, 85, 0.70) !important;
    opacity: 1 !important;
}

/* Firefox */
.telefono-input input#telefono::-moz-placeholder {
    color: rgba(0, 41, 85, 0.70) !important;
    opacity: 1 !important;
}

/* Edge / IE */
.telefono-input input#telefono:-ms-input-placeholder,
.telefono-input input#telefono::-ms-input-placeholder {
    color: rgba(0, 41, 85, 0.70) !important;
    opacity: 1 !important;
}


/* ==========================================
   REPARACIÓN EXTREMA: SELECTOR DE TELÉFONO
   ========================================== */

/* 1. Forzar el espacio interior para que el texto NO pise la bandera */
.telefono-container .iti input#telefono {
    padding-left: 75px !important;
}

/* 2. Destruir cualquier flecha doble y dejar solo la personalizada */
.telefono-container .iti__arrow {
    border: none !important; /* Elimina el triángulo feo nativo del plugin */
    width: 9px !important;
    height: 7px !important;
    background-image: url('https://zeuserp.tech/wp-content/uploads/2026/04/Vector-3.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    margin-left: 6px !important;
}

/* Matar pseudo-elementos intrusos */
.telefono-container .iti__arrow::before,
.telefono-container .iti__arrow::after,
.ph-wrap--telefono::after {
    display: none !important;
    content: none !important;
}

/* 3. Acomodar la cajita de la bandera para que quede armónica */
.telefono-container .iti__flag-container {
    padding-left: 14px !important;
    padding-right: 14px !important;
    display: flex !important;
    align-items: center !important;
}

/* 4. Forzar que el desplegable de países se vea siempre por encima de todo */
.iti__country-list {
    z-index: 999999 !important;
}