/* ==========================================================================
   ESTILOS GLOBALES
   ========================================================================== */
#cv-inicio-container, #cv-main-container {
    font-family: 'Inter', Roboto, Helvetica, Arial, sans-serif;
    color: #333;
    line-height: 1.6;
}

/* --- CONTENEDOR DE INICIO (VALIDACIÓN) --- */
#cv-inicio-container {
    max-width: 850px;
    margin: 40px auto;
    text-align: center;
    padding: 80px;
    border-radius: 24px; /* Un poco más redondeado */
    /* SOMBRA ESTILO STRIPE: Muy difusa y ligera */
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.5) !important;
    background: #fff;
    border: 1px solid #10B981 !important; /* Borde más claro */
}

#cv-inicio-container h2.cv-title {
    color: #333;
    margin-bottom: 10px;
    font-size: 48px;
    font-weight: 700;
}

#cod-in {
    width: 100%;
    padding: 15px;
    margin: 20px 0;
    border: 2px solid #51CA93;
    border-radius: 12px;
    text-align: center;
    font-size: 18px;
    outline: none;
    transition: 0.3s;
}

#btn-check {
    width: 100%;
    background: #51CA93 !important;
    color: white;
    border: none;
    padding: 18px; /* Un poco más de aire */
    border-radius: 14px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    transition: all 0.3s ease;
    /* SOMBRA VERDE (GLOW) */
    box-shadow: 0 8px 20px rgba(81, 202, 147, 0.35) !important;
}

#btn-check:hover {
    background: #45b381 !important;
    transform: translateY(-2px); /* Se eleva un poquito */
    box-shadow: 0 12px 30px rgba(81, 202, 147, 0.5) !important;
}

#err-msg {
    color: #ff4d4d;
    font-size: 13px;
    margin-top: 15px;
    min-height: 20px;
}

/* --- GRILLA DE SERVICIOS (SELECCIÓN) --- */
.servicios-grid {
    display: grid;
    gap: 12px;
    margin-top: 25px;
}

.srv-btn {
    background: white;
    color: #10B981 !important;
    border: 1px solid #E0E6ED;
    padding: 18px;
    border-radius: 15px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
    text-align: left;
    font-size: 15px;
    position: relative; 
    overflow: visible !important;
    pointer-events: auto;
}

.srv-btn:hover {
    background: #f4fcf8;
    border-color: #51CA93;
    color: #51CA93;
    padding-left: 25px;
}

.btn-back {
    margin-top: 25px;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    font-size: 13px;
    text-decoration: underline;
}

/* ==========================================================================
   DISEÑO DEL FORMULARIO FINAL
   ========================================================================== */
#cv-main-container {
    max-width: 850px;
    margin: 40px auto;
    background: #fff;
    padding: 40px;
    border-radius: 24px;
    /* MISMA SOMBRA PARA CONSISTENCIA */
    box-shadow: 0 40px 100px 10px rgba(0, 0, 0, 0.15), 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.5s ease-in-out;
    border: 1px solid #f0f0f0 !important;
}

/* Cuando se muestra el reporte de n8n, ampliamos el contenedor */
#cv-main-container.wide-report {
    max-width: 5000px !important; 
    width: 95vw !important;
        /* Esta lógica ayuda a centrarlo incluso si el tema de WP es estrecho */
    margin-left: calc(50% - 47.5vw) !important; 
    margin-right: calc(50% - 47.5vw) !important;
        position: relative;
    padding: 15px !important;    /* Reducimos padding interno para ganar espacio para el iframe */
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.15);
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

#srv-title {
    text-align: center;
    color: #10B981; /* Tu color verde */
    font-size: 32px;
    margin-bottom: 40px;
    font-weight: 800;
}

/* --- CONTENEDOR DEL REPORTE (IFRAME) --- */
#html-report-container {
    width: 100%;
    margin-top: 25px;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden; /* Limpia bordes del iframe */
}

/* Estilo específico para el Iframe inyectado */
#html-report-container iframe {
    width: 100%;
    display: block;
    border: none;
    background: #ffffff;
}

/* --- FORM CARDS & INPUTS --- */
.service-desc-card {
    background: #fdfdfd;
    border: 1px solid #E0E6ED;
    border-radius: 18px;
    padding: 25px;
    text-align: justify;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    margin-bottom: 35px;
}

.service-desc-card h4 {
    color: #51CA93;
    margin-bottom: 8px;
    font-weight: 700;
}

.file-drop-area {
    border: 2px dashed #51CA93;
    background: #f4fcf8;
    border-radius: 18px;
    padding: 35px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    margin-bottom: 10px;
}

.file-drop-area:hover { background: #e9f9f1; }
.file-drop-area .icon { font-size: 45px; display: block; }

.file-name-display {
    margin-top: 15px;
    font-weight: bold;
    color: #51CA93;
    display: none;
    font-size: 14px;
    padding: 8px;
    background: #fff;
    border-radius: 8px;
}

.cv-section {
    border-bottom: 1px solid #f0f0f0;
    padding: 35px 0;
}

.cv-section h3 {
    margin: 0 0 25px 0;
    color: #001A33;
    font-size: 20px;
    font-weight: 700;
}

.input-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    margin-bottom: 20px;
}

@media (max-width: 600px) {
    .input-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   VERSION  PARA MÓVIL
   ========================================================================== */
    @media screen and (max-width: 768px) {
    
        /* 1. Contenedores: Ajuste de márgenes y paddings */
        #cv-inicio-container, 
        #cv-main-container {
            max-width: 95% !important;
            width: 95% !important;
            padding: 25px 15px !important;
            margin: 20px auto !important;
        }
    
        /* 2. LA FILA DE UBICACIÓN: Se convierte en una tarjeta vertical */
        #cv-main-container .location-row {
            display: block !important; /* Rompe el flex horizontal */
            padding: 20px !important;
            margin-bottom: 20px !important;
            height: auto !important;
            border: 1px solid #E0E6ED !important;
            background: #fdfdfd !important;
            border-radius: 16px !important;
            position: relative !important;
        }
    
        /* Ocultamos el icono para limpiar el diseño */
        #cv-main-container .location-row i {
            display: none !important;
        }
    
        /* 3. SELECTOR DE CIUDAD: Ocupa todo el ancho arriba */
        #cv-main-container .loc-city-select {
            display: block !important;
            width: 100% !important;
            margin: 0 0 15px 0 !important; /* Espacio abajo para los botones */
            padding: 12px !important;
            border: 1px solid #ddd !important;
            border-radius: 10px !important;
            background: #fff !important;
            font-size: 15px !important;
        }
    
        /* 4. BOTONES DE MODALIDAD: Se apilan uno debajo de otro */
        #cv-main-container .modes-container {
            display: block !important; /* Cambiamos grid/flex por block */
            width: 100% !important;
        }
    
        #cv-main-container .btn-loc {
            display: block !important; /* Cada botón en su propia línea */
            width: 100% !important;     /* Ancho total */
            margin: 0 0 8px 0 !important; /* Separación entre botones */
            padding: 12px !important;
            text-align: center !important;
            font-size: 13px !important;
            border-radius: 10px !important;
        }
    
        /* 5. BOTÓN ELIMINAR (X): Lo ponemos abajo como un link rojo */
        #cv-main-container .location-row .btn-remove-loc {
            display: block !important;
            text-align: center !important;
            margin-top: 10px !important;
            color: #ff4d4d !important;
            font-size: 14px !important;
            text-decoration: underline !important;
            position: static !important; /* Lo sacamos de la esquina */
            width: 100% !important;
        }
        /* Añadimos texto al botón eliminar mediante CSS para que se entienda */
        #cv-main-container .location-row .btn-remove-loc::after {
            content: " Eliminar ubicación";
        }
    
        /* 6. BOTÓN DE ENVÍO: Más grande para el pulgar */
        #cv-main-container #btn-submit-final {
            padding: 22px 15px !important;
            font-size: 16px !important;
            white-space: normal !important;
            line-height: 1.4 !important;
        }
    
        /* 7. TOOLTIPS: Mantener visibles */
        .cv-help-tip .cv-tip-content {
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: 250px !important;
            max-width: 85vw !important;
            z-index: 99999 !important;
        }
        #srv-title {
            font-size: 24px;
        }
        .srv-title-icon {
            width: 35px;
            height: 35px;
        }    
    }

.input-group {
    display: flex;
    flex-direction: column;
}


.input-group label {
    display: flex;
    align-items: center; /* Alinea el texto y el '?' verticalmente */
    gap: 8px;            /* Espacio entre texto e icono */
    
    /* EL CAMBIO CLAVE: */
    min-height: 25px;    /* Asegura que aunque no haya icono, la altura sea igual */
    margin-bottom: 8px;  /* Espacio entre la etiqueta y el cuadro de texto */
    
    font-weight: 600;
    font-size: 14px;
}

input[type="text"], input[type="email"], select, textarea {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid #e2e8f0; /* Color gris suave de la foto */
    border-radius: 12px;
    font-size: 15px;
    background-color: #ffffff; /* Fondo blanco limpio */
    transition: all 0.3s ease;
}

input:focus, select:focus, textarea:focus {
    border-color: #51CA93 !important;
    box-shadow: 0 0 0 4px rgba(81, 202, 147, 0.1) !important; /* Brillo sutil al hacer clic */
    outline: none;
}

/* --- UBICACIONES (FILA HORIZONTAL PREMIUM) --- */

/* Forzamos que toda la fila se mantenga en una sola línea horizontal */
.location-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 15px !important;
    margin-bottom: 15px !important;
    background: #fff !important;
    padding: 12px 20px !important;
    border: 1px solid #E0E6ED !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03) !important;
}

/* El icono del pin */
.location-row i {
    font-style: normal;
    font-size: 16px;
}

/* Estilo para el select de ubicación en la misma línea */
.loc-city-select {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    padding: 5px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    outline: none !important;
    color: #333 !important;
    min-width: 150px;
}

/* Ajuste del contenedor de botones para que no se amontonen verticalmente */
.modes-container {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Estilo de los botones (píldoras) */
.btn-loc {
    border: 1px solid #E0E6ED !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 12px !important;
    cursor: pointer !important;
    background: #fff !important;
    white-space: nowrap !important;
    transition: 0.2s !important;
    color: #555 !important;
}

.btn-loc:hover {
    background: #fafafa !important;
}

/* Estilo de los botones cuando están activos */
.btn-loc.active {
    background: #f4fcf8 !important;
    border-color: #51CA93 !important;
    color: #51CA93 !important;
    font-weight: 600 !important;
}

/* Botón de eliminar (X) al final de la línea */
.location-row .btn-remove-loc {
    cursor: pointer;
    color: #ff4d4d;
    padding: 5px;
    font-weight: bold;
    font-size: 16px;
    display: flex;
    align-items: center;
}
/* Botón Final */
#btn-submit-final {
    width: 100%;
    background: #51CA93 !important;
    color: white;
    border: none;
    padding: 22px;
    border-radius: 14px;
    font-weight: 800;
    cursor: pointer;
    font-size: 18px;
    margin-top: 30px;
    transition: all 0.3s ease;
    /* MISMA SOMBRA VERDE */
    box-shadow: 0 10px 25px rgba(81, 202, 147, 0.4) !important;
}

#btn-submit-final:hover {
    background: #45b381 !important;
    transform: translateY(-2px); /* Se eleva un poquito */
    box-shadow: 0 12px 30px rgba(81, 202, 147, 0.5) !important;
}


/* --- CARGA & ÉXITO --- */
.steps-container {
    margin: 40px auto;
    text-align: left;
    max-width: 450px;
}

.step-v {
    margin-bottom: 20px;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 18px;
}

.step-v.active { color: #51CA93; font-weight: bold; }
.step-v.done { color: #333; }

.step-v span {
    width: 26px; height: 26px;
    border: 2px solid #ddd;
    border-radius: 50%;
    text-align: center;
    line-height: 22px;
    font-size: 14px;
}

.step-v.done span {
    background: #51CA93;
    border-color: #51CA93;
    color: white;
}

.check-icon {
    background: #51CA93;
    color: white;
    width: 90px; height: 90px;
    line-height: 90px;
    border-radius: 50%;
    font-size: 45px;
    margin: 0 auto 25px;
}

.btn-regresar {
    margin-top: 40px;
    background: none;
    border: none;
    color: #51CA93;
    cursor: pointer;
    font-weight: bold;
}

/* Cuadro de información superior (Imagen 1) */
.info-selection-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 25px;
    margin-bottom: 30px;
}
.info-selection-box .header-info {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 15px;
    color: #1E293B;
}
.info-selection-box .header-info i {
    color: #10B981;
    font-size: 20px;
}
.mini-service-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 15px;
    padding: 20px;
    max-width: 350px;
}
.mini-service-card h4 {
    color: #065F46;
    margin: 0 0 10px 0;
    font-size: 16px;
}
.mini-service-card p {
    font-size: 13px;
    color: #64748B;
    margin: 0;
    line-height: 1.5;
}

/* Ajustes para cajas de subida pequeñas (Imagen 2) */
.help-text {
    font-size: 12px;
    color: #64748B;
    margin-bottom: 8px;
    display: block;
    line-height: 1.4;
}
.help-link {
    color: #10B981;
    text-decoration: underline;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
    display: block;
    margin-bottom: 10px;
}
.file-drop-area.small-box {
    padding: 20px;
    min-height: 120px;
}
.file-drop-area.small-box .icon {
    font-size: 30px;
    margin-bottom: 5px;
}
.file-drop-area.small-box p {
    font-size: 12px;
}

/* Animación de pulso para el paso activo */
.step-v.active span {
    border-color: #51CA93;
    color: #51CA93;
    animation: shadow-pulse 1.5s infinite;
    background: rgba(81, 202, 147, 0.1);
}

@keyframes shadow-pulse {
    0% { box-shadow: 0 0 0 0px rgba(81, 202, 147, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(81, 202, 147, 0); }
    100% { box-shadow: 0 0 0 0px rgba(81, 202, 147, 0); }
}

/* --- ESTILOS PARA EL TOOLTIP (BOTÓN DE AYUDA) --- */
.cv-help-tip {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: #51CA93; /* Tu color verde */
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    cursor: help;
    margin-left: 8px;
    font-weight: bold;
    vertical-align: middle;
    pointer-events: auto;
}

/* La burbuja de texto */
.cv-help-tip .cv-tip-content {
    visibility: hidden;
    width: max-content;
    max-width: 280px;
    white-space: normal;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 9999;
    bottom: 150%; /* Aparece arriba del botón */
    right: 0;
    left: auto;
    margin-left: 0; /* Centra la burbuja */
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 13px;
    line-height: 1.4;
    font-family: Inter;
    font-weight: normal;
    pointer-events: none; /* Evita parpadeos */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* La flechita de la burbuja */
.cv-help-tip .cv-tip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 5px;
    left: auto;
    margin-left: -5px;
    border-width: 6px;
    border-style: solid;
    border-color: #333 transparent transparent transparent;
}

/* Mostrar al pasar el mouse */
.cv-help-tip:hover .cv-tip-content {
    visibility: visible;
    opacity: 1;
}

.cv-help-link .cv-tip-content{
    pointer-events: auto;
}

/* Mantener abierto al mover el mouse al tooltip */
.cv-help-link:hover .cv-tip-content,
.cv-help-link .cv-tip-content:hover{
    visibility: visible;
    opacity: 1;
}

/* Estilo del enlace */
.cv-help-link .cv-tip-content a{
    color: #51CA93;
    font-weight: bold;
    text-decoration: underline;
}


/* Icono dentro de los botones de selección */
.srv-btn-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

.srv-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

/* Icono en el título del formulario final */
.srv-title-icon {
    width: 45px;      /* Tamaño un poco más grande para el título principal */
    height: 45px;
    object-fit: contain;
    flex-shrink: 0;   /* Evita que se deforme */
}

/* Ajuste para que el hover no mueva el icono */
.srv-btn:hover .srv-icon {
    filter: brightness(0) saturate(100%) invert(67%) sepia(19%) saturate(884%) hue-rotate(104deg) brightness(91%) contrast(85%);
    /* Lo anterior opcional: cambia el color del SVG a verde marca al pasar el mouse */
}