/* General Body Styles */
body {
    font-family: 'Lato', sans-serif; /* Aplicación de la fuente Lato */
    padding-top: 65px; /* Ajusta el padding para el header fijo */
}

button .nav-link .btn {
    font-family: 'Lato', sans-serif !important; /* Aplicación de la fuente Lato */
}

/* Navbar Customization */
.armando-navbar {
    background-color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    border-bottom: 1px solid #f0f0f0;
    height: 65px; /* Asegura un poco más de espacio para el logo de 48px */
}

    /* --- ESTILOS DEL LOGO ARMANDODATA --- */
    .armando-navbar .navbar-brand {
        /* Resetear estilos base para usar los del span */
        font-weight: normal;
        font-size: 0; /* Oculta el texto si hubiera */
        padding: 0;
        line-height: 48px; /* Altura de la línea base */
        color: transparent;
        display: flex; /* Para que Armando y Data estén en línea */
        align-items: center;
    }

.logo-armando {
    /* Estilo para "Armando" */
    height: 48px;
    text-align: left;
    /* Simulación de Coolvetica 40px/48px con Lato */
    font-size: 2.5rem; /* ~40px */
    font-weight: 900; /* Black */
    letter-spacing: 0px;
    color: #222028; /* Gris oscuro/negro */
    line-height: 48px;
    display: inline-block;
    padding-right: 2px; /* Espacio sutil entre palabras */
}

.logo-data {
    /* Estilo para "Data" */
    height: 48px;
    text-align: left;
    /* Simulación de Coolvetica 40px/48px con Lato */
    font-size: 2.5rem; /* ~40px */
    font-weight: 700; /* Bold */
    letter-spacing: 0px;
    color: #7790ED; /* Azul claro */
    line-height: 48px;
    opacity: 1;
    display: inline-block;
}

/* Ajuste del botón del toggler para que quede bien alineado con el logo grande */
.navbar-toggler {
    margin-top: 5px;
}


/* Home Page Hero Section */
.home-hero {
    background-image: url('../images/fondo-home.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    /* Cambio: Usar flex-direction column y justify-content space-between */
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    color: white;
    padding: 2rem 0 0; /* Padding superior, padding inferior lo maneja el conocer-mas */
    position: relative; /* Necesario para que el div de conocer-mas se ancle */
    min-height: 80vh;
}


/* --- Estilos de Pestañas (nav-pills) --- */
.search-card .nav-pills .nav-item {
    padding: 0;
    margin-right: 10px; /* Separación entre pestañas */
}



/* --- Estilos de Título y Conocer Más --- */
/* --- AJUSTE CLAVE: Posicionamiento del contenido inferior del Hero --- */
.hero-bottom-actions {
    position: absolute;
    /* AJUSTE: Mover más abajo (anteriormente 30px) */
    bottom: 50px; /* Ajuste: Se mueve a 50px de la parte inferior */
    width: 100%;
    text-align: center;
    color: #ffffff;
}

.hero-subtitle-bottom {
    font-size: 1.6rem;
    font-weight: 700;
    margin-top: 3.5rem;
    margin-bottom: 2rem;
    color: #ffffff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Nuevo Wrapper para el Carret y el Botón, ahora en orden inverso */
.hero-scroll-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: inherit;
    margin-bottom: 2rem;
}

/* Estilo para el botón Conocer Más */
.hero-know-more-btn {
    padding: 8px 20px;
    border-color: #ffffff;
    color: #ffffff;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
    display: inline-block;
}

    .hero-know-more-btn:hover {
        background-color: #ffffff;
        color: #7790ED;
    }

/* Estilo para el ícono de flecha (Caret) */
.hero-caret-icon {
    display: block; /* Asegura que el margen funcione correctamente */
    font-size: 2rem;
    color: #ffffff;
    margin-top: 30px; /* MODIFICADO: El caret va debajo, usamos margin-top */
    margin-bottom: 0; /* Aseguramos que no haya margen inferior */
    animation: bounce 2s infinite;
    transition: transform 0.3s ease, color 0.3s ease;
}





/* --- Estilos de la Barra de Búsqueda (Input + Botón Buscar) --- */

.search-btn-col {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    z-index: 10;
}

    .search-btn-col .btn-search {
        /* *** AJUSTE 4: Botón más grande para mejor lectura *** */
        height: 40px;
        width: auto;
        padding: 0 20px; /* Aumentamos el padding para hacerlo más ancho */
        line-height: 40px;
        border-radius: 8px;
        background-color: #7790ED;
        border-color: #7790ED;
        font-weight: 600;
        color: white;
        text-transform: uppercase;
    }

.search-input-main {
    /* Se ajusta el padding derecho del input para dar espacio al nuevo botón "Buscar" más ancho */
    padding-right: 100px !important; /* Más espacio para el botón más grande */
    height: 50px;
    border-radius: 8px;
}




/* Animación de rebote para el icono (se mantiene) */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-8px);
    }

    60% {
        transform: translateY(-4px);
    }
}






.hero-bottom-actions {
    position: absolute; /* Posición absoluta dentro de .home-hero */
    bottom: 30px; /* Separación de la parte inferior */
    width: 100%; /* Ocupa todo el ancho */
    text-align: center;
    color: #ffffff;
}



/* Wrapper para el input y el botón (se agrega al HTML) */
.search-input-col-wrapper {
    position: relative; /* Es clave para posicionar el botón absolutamente dentro */
    height: 50px;
    padding-bottom: 10px !important;
}

.search-card .custom-input.search-input-main {
    height: 50px;
    border-radius: 8px;
    /* *** AJUSTE 1: Aumentar el ancho del input principal.
           Reducimos el padding derecho para que el input se extienda más, 
           acercando el texto al botón 'Buscar'. El ancho del input 
           es el 100% del contenedor, pero el padding limita el texto. */
    padding-right: 110px !important;
}


/* En la versión móvil, si el botón de búsqueda tenía un estilo diferente, lo ajustamos */
/* Asumo que se quita el estilo de botón pegado a la derecha en móvil que tenías antes */
@media (max-width: 767px) {
  

    .hero-subtitle-bottom {
        font-size: 1.5rem;
    }

    .search-input-main {
        margin-top: 0; /* Aseguramos que no haya margen superior si se usaba antes para móvil */
    }

    .hero-bottom-actions {
        bottom: 20px; /* Separación un poco mayor en móvil (anteriormente 10px) */
    }

    .hero-scroll-link {
        font-size: 0.8rem;
        padding: 4px 12px;
    }

    .home-hero {
        min-height: 650px; /* Ajustado para dar más espacio en móvil también */
        padding-top: 50px;
        padding-bottom: 50px;
    }
}


@media (max-width: 767.98px) {
    /* 1. Mantenemos el botón dentro de la tarjeta blanca (col-12 col-md-3) */
    .search-btn-col {
        /* Aseguramos que la columna no tenga padding excesivo en móvil */
        padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
        padding-right: calc(var(--bs-gutter-x) * 0.5) !important;
    }

    /* 2. Estilo del botón: Usa Flexbox para centrar el contenido (el icono) */
    .search-btn {
        height: 100%; /* Asegura que ocupe la altura del input */
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center; /* Centra el icono horizontalmente */
    }

        /* 3. Eliminar el margen extra del icono, ya que el texto ya no está */
        .search-btn i.fa-search {
            margin-right: 0 !important;
        }
}

/* Contenedor del Título y Formulario */
.hero-content-wrapper {
    flex-grow: 1; /* Permite que el contenido tome el espacio restante */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-top: 2rem;
}


/* "Conocer Más" Anclado al Fondo */
.conocer-mas {
    color: #fff;
    /* Alineación de 100% al ancho y padding inferior para separarlo del borde */
    width: 100%;
    padding-bottom: 25px; /* Separación del fondo de la imagen */
    margin-top: auto; /* Empuja el elemento al final del contenedor flex */
    padding-top: 20px;
}

.home-hero h1 {
    font-size: 3rem;
    font-weight: 900;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}



.search-hero-area {
    /* Asumo el fondo de imagen y aplico propiedades de cubrimiento */
    background-image: url('/images/Fondo-buscadores-segundarios.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 450px;
    display: flex;
    align-items: center;
    color: #ffffff;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Color azul claro para elementos específicos */
.text-primary-blue {
    color: #7790ED !important;
}

.search-hero-title {
    /* *** AJUSTE 1: Título Negro y sin contorno *** */
    font-size: 2rem;
    font-weight: 900;
    line-height: 1.1;
    /* Color del texto principal en negro */
    color: #000000;
    /* Eliminamos el efecto de texto transparente con borde */
    -webkit-text-stroke-width: 0;
    -webkit-text-stroke-color: transparent;
    text-shadow: none;
    text-align: right;
}

/* --- ESTILO PARA LA IMAGEN HERO CENTRAL --- */

.search-hero-image-centered {
    display: inline-block; /* Al estar en un contenedor con .text-center, esto la centra */
    height: auto; /* Mantiene la proporción de la imagen */
    /* TAMAÑO PARA MÓVIL */
    width: 50%; /* En pantallas pequeñas ocupa casi todo el ancho */
    max-width: 100%; /* Nunca se sale de su contenedor */
    /* Espaciado opcional para que no pegue con lo que viene abajo */
    margin-top: 1rem;
    margin-bottom: 1rem;
}


/* Contenedor del formulario de búsqueda dentro del hero (sin fondo/sombra) */
.search-hero-area .search-form-container {
    background: none;
    padding: 0 !important;
    box-shadow: none;
    margin-top: 3rem;
    overflow: visible !important; /* Permitir que el menú dropdown se vea */
}


/* Aseguramos que el input y el botón de búsqueda se vean bien sobre el fondo de imagen. */

.search-hero-area .search-input-col-wrapper {
    position: relative;
}

/* --- AJUSTE BUSCADOR HOME (MÓVIL Y PC) --- */

.custom-search-group {
    display: flex !important;
    flex-wrap: nowrap !important; /* Evita que el botón baje al móvil */
    width: 100%;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

    .custom-search-group .custom-input {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
        flex: 1 1 auto;
        border: 1px solid #dee2e6;
        height: 50px; /* Ajuste de altura */
    }

    .custom-search-group .btn-custom-search {
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        white-space: nowrap; /* Evita que el texto interno se amontone */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        background-color: #7790ED; /* Color de tu marca */
        border: 1px solid #fff;
    }

/* En móvil, si solo queda la lupa, ajustamos el ancho */
@media (max-width: 768px) {
    .custom-search-group .btn-custom-search {
        padding: 0 15px;
    }
}


.search-hero-area .custom-input.search-input-main {
    background-color: #ffffff;
    padding-right: 110px !important;
    height: 50px;
    /*  border-radius: 8px;*/
}

.search-hero-area .search-btn-col {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: auto;
    z-index: 10;
}

    .search-hero-area .search-btn-col .btn-search {
        height: 44px;
        width: auto;
        padding: 0 22px;
        line-height: 44px;
        border-radius: 8px;
        background-color: #7790ED;
        border-color: #7790ED;
        font-weight: 600;
        color: white;
        text-transform: uppercase;
        font-size: 0.95rem;
    }

/* Estilo para el botón "Más Opciones" */
.btn-link.text-white {
    color: #ffffff !important;
}

/* Media Query para móvil */
@media (max-width: 768px) {
    .search-hero-area {
        min-height: 300px;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .search-hero-title {
        font-size: 2rem;
    }

    .search-hero-image-centered {
        /* Ajustamos el ancho para que sea grande pero equilibrado */
        width: 65%; /* Puedes subirlo a 75% o 80% si la quieres aún más grande */
        max-width: 850px; /* Ponemos un límite para que la imagen no pierda calidad en monitores gigantes */
    }
}











.search-hero-section h1.hero-title,
.search-hero-section p {
    background-color: transparent !important;
}

/* 2. Reduce el tamaño de la letra del título principal */
.search-hero-section h1.hero-title {
    font-size: 2.5rem; /* Ajusta este valor al tamaño que desees */
    /* El tamaño original de h1 en Bootstrap es 2.5rem, puedes bajarlo a 2rem o 2.25rem si lo deseas más pequeño */
}
/* Para la imagen, si esta no es PNG o SVG con transparencia */
.search-hero-section img.hero-image {
    background-color: transparent !important;
}

.main-search-area {
    background-color: #f7f9fc; /* Color de fondo suave o similar al de las imágenes */
    /* Si es una imagen de fondo, usar: */
    background-image: url('../images/Fondo-buscadores-segundarios.jpg');
    /* background-size: cover; */
    /* background-position: center; */
    width: 100%;
}

/* Search Card Styles: Fondo Transparente */
.search-card {
    /* Fondo transparente */
    background-color: transparent !important;
    border-radius: 15px;
    /* La sombra se mantiene por si es deseable, pero puedes quitarla si el diseño es completamente plano */
    box-shadow: none;
    max-width: 800px;
    color: #495057;
    border: none;
}

    /* Tabs/Pills de Empresas y Personas */
    .search-card .nav-pills {
        /* Alineación de las pestañas a la izquierda por defecto */
        display: inline-flex;
        padding: 0;
        margin-left: -5px; /* Compensación para el margen del nav-item */
    }

        .search-card .nav-pills .nav-link {
            /* Fondo blanco para las pestañas inactivas */
            background-color: #ffffff;
            color: #7790ED; /* Color de texto blanco sobre el fondo */
            border: 1px solid #fff; /* Borde blanco */
            border-radius: 8px;
            margin: 0 5px;
            font-weight: 700;
            /* Hacemos las pestañas más compactas */
            padding: 0.3rem 1rem;
            font-size: 0.9rem;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

            .search-card .nav-pills .nav-link.active {
                background-color: #7790ED;
                /* Desactivar el fondo por defecto que Bootstrap podría añadir */
                border-color: #7790ED;
                color: #fff; /* Texto azul para la pestaña activa */
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                border-color: #fff;
            }

/* Campo de Búsqueda y Botón (Se mantienen con fondo blanco) */
.search-form-container .form-control {
    border: none; /* Quitamos el borde para un look más limpio */
}

.search-card .form-control,
.search-card .form-select {
    background-color: #fff;
    border-radius: 8px;
    height: 45px;
    border: none; /* Quitamos el borde para un look más limpio */
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra para resaltar */
    font-weight: 400;
}

.search-card .btn-search {
    background-color: #6a82fb;
    border-color: #6a82fb;
    color: white;
    font-weight: 700;
    height: 45px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
    text-transform: uppercase;
}


.btn-more {
    background-color: #7790ED;
    color: white;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1em;
    transition: background-color 0.3s ease;
    margin-top: 30px; /* Espacio sobre el botón */
    display: inline-block; /* Para que sea un botón de bloque pero respete márgenes */
}

    .btn-more:hover {
        background-color: #5d75d3;
    }


/* --- NUEVOS ESTILOS: SECCIÓN DE BIENVENIDA (#welcome-section) --- */

.welcome-title {
    font-size: 2.2rem;
    margin-bottom: 5px;
    line-height: 1;
}

.welcome-subtitle {
    font-size: 2.8rem;
    font-weight: 900; /* Extra Bold/Black */
    color: #222028; /* Gris oscuro/negro */
    line-height: 1.2;
}

.welcome-text {
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.6;
    font-weight: 400;
}

/* Estilos de Logo para la Sección de Bienvenida */

.logo-armando-w {
    /* Mismo estilo que el logo del header */
    color: #222028;
    font-weight: 900;
    font-size: inherit; /* Hereda del h2/h3 */
    line-height: inherit;
    padding-right: 2px;
}

.logo-data-w {
    /* Mismo estilo que el logo del header */
    color: #7790ED;
    font-weight: 700;
    font-size: inherit;
    line-height: inherit;
}

/* Placeholder para la imagen de home1.png */
.welcome-img {
    max-width: 100%;
    height: auto;
}




/* ========================================================================= */
/* --- ESTILOS DE INFO-BLOCKS CON ICONO CIRCULAR Y GRILLA 2x2 --- */
/* ========================================================================= */

.info-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* Necesario para posicionar el icono absolutamente */
    position: relative;
    padding-top: 70px; /* Acomoda el icono de 100px que sobresale 50px */
}

    .info-block:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

/* Icono Wrapper: Círculo perfecto y centrado que sobresale */
.info-block-icon-wrapper {
    /* *** MODIFICADO: Color de fondo a un azul claro (similar al fondo de la sección de estadísticas) *** */
    background-color: #EAF0FF;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    /* POSICIONAMIENTO PARA QUE SOBRESALGA */
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

    /* Ajuste de las imágenes (iconos) dentro del círculo */
    .info-block-icon-wrapper img {
        max-width: 60px;
        max-height: 60px;
        /* *** MODIFICADO: ELIMINADO el filtro invert(100%) para que el icono no sea blanco *** */
        filter: none;
    }



/* *** FIX 2: ESPACIADO VERTICAL CORREGIDO *** */
/* Sobreescribe la variable de Bootstrap para el espaciado vertical (gy) dentro de la sección. */
.info-section-wrapper .row {
    --bs-gutter-y: 6rem; /* Un espacio generoso (aprox. 96px) para evitar la superposición. */
}

/* Contenido del Texto */
.info-block .content {
    flex-grow: 1;
    text-align: center;
}

.info-block h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #222028;
    margin-bottom: 10px;
}

.info-block p {
    font-size: 1rem;
    color: #495057;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Estadísticas */
.info-block .statistics {
    padding: 10px 0;
    margin-top: 10px;
    margin-bottom: 20px;
    display: block;
    border-top: 1px solid #f0f0f0;
    padding-top: 20px;
}

    .info-block .statistics .stat-item {
        margin-bottom: 15px;
    }

    .info-block .statistics .number {
        font-size: 2rem;
        font-weight: 900;
        color: #7790ED;
        line-height: 1.2;
    }

    .info-block .statistics .label {
        font-size: 0.9rem;
        color: #868e96;
    }

/* Botón "Saber Más" */
.info-block .btn-more {
    display: inline-block;
    padding: 10px 25px;
    background-color: #7790ED;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

    .info-block .btn-more:hover {
        background-color: #5d74d1;
        color: #ffffff;
    }

/* Estilos de limpieza (eliminar estilos de imagen lateral) */
.info-block.image-right .section-image,
.info-block.image-left .section-image {
    display: none;
}

.info-block.image-right .content,
.info-block.image-left .content {
    order: unset;
}

/* Secciones de Información: una debajo de otra, con contenido horizontal */
.info-section-wrapper {
    background-color: #fff;
    padding: 60px 50px;
}

/* Clases para alternar el orden de imagen y texto */
.info-block.image-right .content {
    order: 1; /* El contenido va primero */
}

.info-block.image-right .section-image {
    order: 2; /* La imagen va después (derecha) */
}

.info-block.image-left .content {
    order: 2; /* El contenido va después */
}

.info-block.image-left .section-image {
    order: 1; /* La imagen va primero (izquierda) */
}

.section-image {
    flex-shrink: 0; /* Evita que la imagen se encoja */
    width: 350px; /* Ancho fijo para la imagen */
    height: 350px; /* Alto fijo para la imagen */
    border-radius: 8px; /* Pequeño borde redondeado para la imagen */
    object-fit: contain; /* Asegura que la imagen se ajuste sin recortarse */
}

.content {
    flex-grow: 1; /* Permite que el contenido ocupe el espacio restante */
    text-align: left;
}

    .content h3 {
        font-size: 2.5em;
        color: #333;
        margin-bottom: 20px;
    }

    .content p {
        font-size: 1.15em;
        line-height: 1.7;
        color: #666;
        margin-bottom: 25px;
    }

.statistics {
    background-color: #eef3ff; /* Fondo para la sección de estadísticas */
    padding: 20px 30px;
    border-radius: 8px;
    margin-top: 20px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    gap: 20px;
}

.stat-item {
    text-align: center;
    flex: 1; /* Distribuye el espacio uniformemente */
    min-width: 120px; /* Ancho mínimo para cada estadística */
}

    .stat-item .number {
        font-size: 2.2em;
        font-weight: bold;
        color: #7790ED;
        margin-bottom: 5px;
    }

    .stat-item .label {
        font-size: 0.95em;
        color: #555;
    }



.search-hero-section {
    background-color: #f8f8f8; /* Fondo sutil para la sección de bienvenida */
    border-bottom: 2px solid #e9ecef;
}

.hero-title {
    font-size: 2.5rem;
    font-weight: 900;
    color: #222028;
    line-height: 1.2;
}

.hero-text {
    font-size: 1.1rem;
    color: #495057;
    line-height: 1.6;
    margin-top: 15px;
}

.hero-callout {
    font-size: 1rem;
    font-weight: 700;
    color: #7790ED;
    padding: 10px 0;
}

.hero-image {
    max-width: 90%;
    height: auto;
}

/* --- SECCIÓN DE ESTADÍSTICAS DINÁMICAS --- */
.stats-section {
    border-top: 1px solid #f0f0f0;
    border-bottom: 1px solid #f0f0f0;
}

.stats-description {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #4a4a4a;
    /* Asegura que el texto no se pegue a las tarjetas en pantallas grandes */
    padding-right: 2rem;
}

.stat-box {
    padding: 15px 10px;
}

.stat-label {
    font-size: 0.85rem;
    color: #495057;
    margin-bottom: 5px;
    font-weight: 700;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: 900;
    color: #7790ED;
    margin-bottom: 0;
    /* Estilo inicial para la animación */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

    .stat-value.animate-stat {
        /* Estado final de la animación */
        opacity: 1;
        transform: translateY(0);
    }



/* --- OFFCANVAS STYLES --- */
.armando-offcanvas-header {
    background-color: #333d79;
    color: #fff;
    padding: 1rem;
}

    .armando-offcanvas-header .offcanvas-title {
        color: #fff;
        font-weight: 700;
    }

.offcanvas-body {
    background-color: #333d79;
}

    .offcanvas-body .nav-link {
        color: #c0c0c0 !important;
        padding: 10px 15px;
        font-size: 1.1rem;
        font-weight: 400; /* Regular */
    }

        .offcanvas-body .nav-link:hover {
            color: #fff !important;
            background-color: #4b5592;
        }

    .offcanvas-body .dropdown-menu {
        background-color: #4b5592;
        border: none;
    }

    .offcanvas-body .dropdown-item {
        color: #fff;
        font-weight: 400; /* Regular */
    }

/* ========================================================================= */
/* --- ESTILOS DE BÚSQUEDA (SEARCH) --- */
/* ========================================================================= */

.search-section {
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

    /* Estilo para el input de búsqueda principal */
    .search-section .custom-input {
        border-radius: 8px;
        height: 48px;
        font-size: 1rem;
        padding-left: 15px;
    }

/* Botón principal de Búsqueda y Botones OK en Modales */
.btn-custom-search {
    background-color: #7790ED;
    border-color: #7790ED;
    color: #fff;
    font-weight: 700;
    height: 48px;
    border-radius: 8px;
    text-transform: uppercase;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
}

    .btn-custom-search:hover {
        background-color: #5d75d4;
        border-color: #5d75d4;
    }

/* Botón de Más Opciones (Dropdown) */
.btn-more-options {
    background-color: #fff; /* Fondo blanco */
    border: 1px solid #7790ED; /* Borde azul */
    color: #7790ED; /* Texto azul */
    font-weight: 700;
    height: 48px;
    border-radius: 8px;
    transition: background-color 0.3s;
    /* Para que el texto no se corte */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 5px;
    padding-right: 5px;
    width: 100%; /* Ocupa el 100% de su columna (col-md-2) */
    font-size: 0.85rem;
}

  

    .btn-more-options:hover {
        background-color: #f0f4ff; /* Fondo azul muy claro al pasar el mouse */
        color: #7790ED;
    }

/* Badge de Consultas Restantes */
.badge-consultas-restantes {
    background-color: #222028 !important;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 8px 15px;
    border-radius: 5px;
}

/* Estilos para los Modales */
.modal-header {
    border-bottom: 2px solid #7790ED;
}

.modal-title {
    font-weight: 700;
    color: #222028;
}

.modal-body .alert-info {
    background-color: #e3f2fd;
    border-color: #c0deff;
    color: #0c5460;
}
/* Botón Cancelar en el Footer */
.modal-footer .btn-secondary {
    background-color: #adb5bd;
    border-color: #adb5bd;
    color: #fff;
    font-weight: 700;
}

/* Estilos de la tabla de resultados 
.table-responsive {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e9ecef;
}

/* Estilos para botones de acción en la tabla 
.table .btn-outline-primary {
    color: #7790ED;
    border-color: #7790ED;
}

    .table .btn-outline-primary:hover {
        background-color: #7790ED;
        color: #fff;
    }


/* ====================================================================== */
/* ESTILOS GLOBALES PARA DATATABLES (TABLEJS) - VERSIÓN FINAL Y COMPLETA */
/* ====================================================================== */

/* Contenedor principal para aplicar sombra y bordes redondeados */
div.dataTables_wrapper {
    font-family: 'Lato', sans-serif;
    padding: 20px;
    clear: both;
    background-color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 20px;
}

/* 2. Header de la Tabla */
table.dataTable {
    margin-bottom: 10px !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

    table.dataTable thead th {
        background-color: #ffffff !important; /* Fondo Blanco */
        color: #212529 !important; /* Texto Negro */
        border-bottom: 3px solid #004b8d !important; /* Línea separadora Azul Oscuro */
        font-weight: 700;
        text-transform: none;
        padding: 12px 10px;
        border-top: none !important;
        text-align: left;
    }

/* 3. Striped Rows (Azul Claro y Blanco) */

/* Filas Impares (Azul Claro Corporativo) */
.dataTables_wrapper table.dataTable tbody tr.odd {
    background-color: #CCD6FB !important;
    color: #343a40;
}

    .dataTables_wrapper table.dataTable tbody tr.odd td {
        background-color: #CCD6FB !important;
        color: #343a40;
    }

/* Filas Pares (Blanco Puro) */
.dataTables_wrapper table.dataTable tbody tr.even {
    background-color: #f8f8f8 !important;
    color: #343a40;
}

    .dataTables_wrapper table.dataTable tbody tr.even td {
        background-color: #f8f8f8 !important;
        color: #343a40;
    }

/* Hover de las filas */
.dataTables_wrapper table.dataTable tbody tr:hover td {
    background-color: rgba(0, 123, 255, 0.1) !important;
}


/* 4. Alineación del Filtro y Botones (Sección Superior) */

/* Ocultar "Show X entries" */
.dataTables_wrapper .dataTables_length {
    display: none;
}

/* Filtro/Búsqueda (Alineado a la IZQUIERDA) */
.dataTables_wrapper .dataTables_filter {
    float: left;
    width: 50%;
    margin-bottom: 20px;
    padding-left: 0;
    text-align: left;
}

    /* Título del filtro ENCIMA del input (Alineado a la IZQUIERDA) */
    .dataTables_wrapper .dataTables_filter label {
        font-weight: 700;
        color: #343a40;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 5px;
    }

        /* Input de búsqueda */
        .dataTables_wrapper .dataTables_filter label input[type="search"] {
            width: 100%;
            max-width: 450px;
            border: 1px solid #ced4da;
            border-radius: 25px !important;
            padding: 10px 15px;
            margin-left: 0 !important;
            margin-top: 5px;
        }

/* Botones de Acción (Derecha) */
.dataTables_wrapper .dt-buttons {
    float: right;
    margin-bottom: 20px;
    /* CORREGIDO: Alineamos el contenido (botones) a la derecha */
    text-align: right;
    width: 50%;
}

    .dataTables_wrapper .dt-buttons:before {
        /* CORRECCIÓN FINAL DE DESCARGAR: Título encima y ALINEADO A LA DERECHA (para que esté sobre los botones) */
        content: "Descargar:";
        display: block;
        /* Alineamos el texto a la derecha de su contenedor flotante, colocándolo encima del grupo de botones */
        text-align: right !important;
        width: 100%;
        margin-right: 0;
        margin-bottom: 5px;
        font-weight: 700;
        color: #343a40;
    }

.dataTables_wrapper .dt-button {
    /* Fondo Negro, Letra Blanca */
    background-color: #212529 !important;
    color: white !important;
    border: 1px solid #000000 !important;
    border-radius: 4px !important;
    /* Los botones deben tener margen izquierdo para separarse del anterior */
    margin-left: 5px;
    margin-right: 0;
    text-transform: uppercase;
    font-size: 0.85rem;
    padding: 8px 12px;
    transition: background-color 0.3s;
}

    .dataTables_wrapper .dt-button:hover:not(.disabled) {
        background-color: #004b8d !important; /* Azul Oscuro al hacer hover */
        border-color: #004b8d !important;
        color: white !important;
    }

/* Limpieza de floats en la sección superior */
div.dataTables_wrapper:after {
    content: "";
    display: table;
    clear: both;
}


/* 5. Paginación y Contador de Registros (Sección Inferior) */

/* Aseguramos que los elementos inferiores se posicionen después de la tabla */
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    clear: both;
    margin-top: 15px;
    display: block;
}

/* Contador de Registros (dataTables_info) - Alineado a la Izquierda */
.dataTables_wrapper .dataTables_info {
    float: left;
    color: #6c757d;
    font-size: 0.9em;
}

/* Paginación (dataTables_paginate) - Alineado a la Derecha */
.dataTables_wrapper .dataTables_paginate {
    float: right;
}

/* Botón de Paginación Activo/Actual (Azul Oscuro/Blanco) */
.dataTables_wrapper .paginate_button.current,
.dataTables_wrapper .paginate_button.current:hover {
    background-color: white !important;
    color: #004b8d !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Botón de Paginación en Hover (Azul Claro/Blanco) */
.dataTables_wrapper .paginate_button:hover:not(.current):not(.disabled) {
    background-color: #007bff !important;
    color: white !important;
    border-color: #007bff !important;
}

/* Botón de Paginación General */
.dataTables_wrapper .paginate_button {
    padding: 0.5em 0.8em;
    margin-left: 3px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    color: #343a40 !important;
    background-color: #f8f9fa !important;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

/* ====================================================================== */
/* AJUSTES RESPONSIVOS PARA DATATABLES (MÓVIL / TABLET) - VERSIÓN FINAL */
/* ====================================================================== */

@media (max-width: 768px) {

    /* 1. Corrección del Ancho del Input del Filtro */
    .dataTables_wrapper .dataTables_filter {
        width: 100%;
        float: none;
        text-align: left;
    }

        .dataTables_wrapper .dataTables_filter label {
            width: 100%;
        }

            .dataTables_wrapper .dataTables_filter label input[type="search"] {
                max-width: 100% !important;
                width: 100% !important;
                margin-top: 5px;
            }


    /* 2. Corrección y Reducción de los Botones de Acción (Horizontal) */
    .dataTables_wrapper .dt-buttons {
        width: 100%;
        float: none;
        text-align: left;
        margin-top: 15px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
    }

        /* Título "Descargar" sobre los botones, alineado a la izquierda */
        .dataTables_wrapper .dt-buttons:before {
            text-align: left !important;
            width: 100%;
            margin-bottom: 5px;
        }

    /* Reducción de tamaño para botones de acción (Horizontal) */
    .dataTables_wrapper .dt-button {
        display: inline-block !important;
        /* Reducción de Padding (más pequeños) */
        padding: 6px 10px !important;
        /* Reducción de Fuente */
        font-size: 0.75rem !important;
        /* Separación horizontal mínima */
        margin-left: 0 !important;
        margin-right: 5px !important;
        margin-bottom: 8px;
    }


    /* 3. CORRECCIÓN FINAL DE PAGINACIÓN: Fuerza a una sola línea */

    /* Contador de Registros (dataTables_info) */
    .dataTables_wrapper .dataTables_info {
        float: none;
        text-align: center;
        width: 100%;
        margin-bottom: 5px; /* Espacio antes de los botones de paginación */
        /* Reducimos la fuente para que quepa mejor */
        font-size: 0.75em;
    }

    /* Paginación (dataTables_paginate) */
    .dataTables_wrapper .dataTables_paginate {
        float: none;
        text-align: center;
        width: 100%;
        padding-bottom: 10px; /* Padding extra para que no se pegue al footer */
    }

    /* Botones de Paginación */
    .dataTables_wrapper .paginate_button {
        /* Reducimos el padding y la fuente para ahorrar espacio horizontal */
        padding: 0.4em 0.6em;
        font-size: 0.75em;
        margin-left: 1px; /* Reducción de margen entre botones */
    }

    /* Limpieza general de contenedores */
    div.dataTables_wrapper {
        padding: 15px 10px;
    }
}


/* Eliminamos los estilos de la tarjeta para la caja de búsqueda */
.search-form-container {
    /* Quita el padding, border-radius y sombra */
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Aseguramos que el input de búsqueda principal siga el diseño */
.search-input-main {
    /*  box-shadow: 0 5px 10px rgba(0,0,0,0.05) !important; /* Añadimos una sombra sutil solo al input */
}


.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #222028;
}

/* Badge de Consultas Restantes (Reutilizado del Search.cshtml) */
/* .badge-consultas-restantes { ... ya definido ... } */

/* Botón de Exportar a PDF */
.btn-export-pdf {
    background-color: #7790ED;
    border-color: #7790ED;
    color: #fff;
    font-weight: 700;
    height: 48px;
    border-radius: 8px;
    text-transform: uppercase;
    transition: background-color 0.3s;
    display: flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    font-size: 0.95rem;
}

    .btn-export-pdf:hover {
        background-color: #5d75d4;
        border-color: #5d75d4;
    }

/* Tarjeta principal de detalles */
.company-details-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    padding: 30px; /* Más padding interno para coincidir con la imagen */
}

    .company-details-card .section-label {
        font-size: 0.9rem;
        font-weight: 700;
        color: #495057;
        text-transform: uppercase;
        margin-bottom: 5px;
    }

    .company-details-card .company-name {
        font-size: 2.2rem;
        font-weight: 900; /* Extra Bold */
        color: #7790ED; /* Azul de marca */
        line-height: 1.2;
    }

.detail-item {
    background-color: #eef3ff;
    border-radius: 8px;
    padding: 15px 20px;
    margin-bottom: 10px; /* Espacio entre items en la misma columna en móvil */
    min-height: 85px; /* Altura mínima para que sean uniformes */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.detail-item-full { /* Para el Objeto Fiscal que ocupa todo el ancho */
    min-height: auto; /* Permite que el contenido determine la altura */
}

.detail-item .detail-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #495057;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.detail-item .detail-value {
    font-size: 1.05rem;
    font-weight: 400; /* Regular */
    color: #222028;
    margin-bottom: 0;
    line-height: 1.4;
}


/* Tarjeta de "Explorar más" */
.other-sections-card {
    border: none;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
    padding: 30px;
    background-color: #fff;
}

    .other-sections-card .card-title {
        font-size: 1.8rem;
        font-weight: 700;
        color: #222028;
    }

.btn-detail-action {
    background-color: #fff;
    border: 1px solid #ced4da;
    color: #495057;
    font-weight: 700;
    height: 48px;
    border-radius: 8px;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    font-size: 0.9rem;
    white-space: nowrap; /* Evita que el texto se rompa */
}

    .btn-detail-action:hover {
        background-color: #7790ED;
        border-color: #7790ED;
        color: #fff;
    }

/* Responsive adjustments */
@media (max-width: 767.98px) {
   

    .company-details-card {
        padding: 20px;
    }

        .company-details-card .company-name {
            font-size: 1.8rem;
        }

    .detail-item {
        padding: 12px 15px;
        margin-bottom: 5px; /* Menos espacio en móvil */
    }

    .btn-export-pdf {
        height: 40px;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .btn-detail-action {
        height: 40px;
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
    }

    .other-sections-card .card-title {
        font-size: 1.5rem;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .d-flex.align-items-center {
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
    }

    .badge-consultas-restantes {
        margin-bottom: 0 !important;
        margin-right: 0 !important; /* Resetar margen si se apila */
    }

    .consumption-inner-flex {
        flex-direction: column;
        align-items: stretch !important;
    }

    .consumption-warning-text {
        text-align: center !important;
        margin-bottom: 10px;
    }

    .btn-consumption-cost-label, .btn-purchase-query {
        width: 100%; /* El botón ocupa todo el ancho */
    }
}

/* ========================================================================= */
/* --- ESTILOS DE COMPRA DE CONSULTA (Bloqueo) --- */
/* ========================================================================= */
.purchase-message-container {
    background-color: #ffe5e5; /* Fondo rojo muy claro para alerta */
    border: 1px solid #ffcccc;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(255, 193, 7, 0.1); /* Sombra sutil */
}

.purchase-text {
    font-size: 1.1rem;
    font-weight: 400;
    color: #cc0000; /* Texto rojo */
}

    .purchase-text .fa-lock {
        /* Mantenemos el candado en rojo */
        color: #ff3333;
        margin-right: 5px;
    }

.btn-purchase-query {
    /* Estilo del botón de costo: NEGRO con texto BLANCO */
    background-color: #222028; /* Negro */
    border-color: #222028;
    color: #fff !important; /* Texto blanco */
    font-weight: 900;
    height: 55px;
    border-radius: 8px;
    text-transform: uppercase;
    padding: 0.8rem 2.5rem;
    font-size: 1.2rem;
    transition: background-color 0.3s, border-color 0.3s;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

    .btn-purchase-query:hover {
        background-color: #495057; /* Un gris oscuro al pasar el ratón */
        border-color: #495057;
        color: #fff !important;
    }


.blocked-action-card .card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #f8f8f8; /* Fondo más claro para indicar inactividad */
    border: 1px solid #ced4da;
    cursor: pointer;
}

.blocked-action-card:hover .card {
    /* Indica que el hover es para pagar */
    box-shadow: 0 6px 20px rgba(119, 144, 237, 0.3);
    transform: translateY(-2px);
}

.blocked-action-card .card-image-block {
    position: relative;
    overflow: hidden;
    height: 150px; /* Altura fija para la imagen */
}

    .blocked-action-card .card-image-block img {
        /* Oscurecer y poner en B/N la imagen */
        filter: brightness(50%) grayscale(100%);
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.blocked-action-card .lock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.3); /* Oscurecer más la imagen */
}

    .blocked-action-card .lock-overlay i {
        color: #ff3333; /* Candado en Rojo para indicar bloqueo/alerta */
        font-size: 2.5rem;
        text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    }

.blocked-action-card .card-body {
    padding: 15px;
}

.blocked-action-card .blocked-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #495057; /* Gris para el título */
    margin-bottom: 5px;
}

.unlocked-action-card .unlocked-subtitle,
.unlocked-action-card .unlocked-description {
    font-size: 0.9rem;
    color: #868e96; /* Gris más claro para el texto */
    margin-bottom: 5px;
}

/* ... [Tus estilos anteriores] ... */


/* ========================================================================= */
/* --- ESTILOS PARA CARDS DE ACCIÓN DE CONSUMO (CONSUMPTION) --- */
/* ========================================================================= */

.consumption-action-card .card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #fffaf0; /* Fondo crema muy claro */
    border: 1px solid #ffc107; /* Borde de color de advertencia */
    cursor: pointer;
}

.consumption-action-card:hover .card {
    box-shadow: 0 8px 25px rgba(255, 193, 7, 0.4);
    transform: translateY(-4px);
}

.consumption-action-card .card-image-block {
    position: relative;
    overflow: hidden;
    height: 150px;
}

    .consumption-action-card .card-image-block img {
        /* Imagen con tono amarillento/sepia */
        filter: brightness(80%) sepia(20%);
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.consumption-action-card .consumption-overlay {
    /* Overlay ligero de color de advertencia */
    background: rgba(255, 193, 7, 0.2);
}

    .consumption-action-card .consumption-overlay i {
        /* Icono de consumo en color de advertencia */
        color: #ff9800; /* Naranja más oscuro */
        font-size: 2.5rem;
        text-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    }

.consumption-action-card .consumption-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: #ff9800; /* Título en color de advertencia */
    margin-bottom: 3px;
}

.consumption-action-card .consumption-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: #495057;
    margin-bottom: 5px;
}



.consumption-warning-box {
    background-color: #eef3ff;
    border: 1px solid #7790ED;
    border-radius: 8px;
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.consumption-inner-flex {
    /* Alinea el contenido interno (texto y botón) */
    width: 100%;
    gap: 15px; /* Espacio entre el texto y el botón */
}

.consumption-warning-text {
    /* Estilo del texto de advertencia (Izquierda) */
    font-size: 1.1rem;
    color: black; /* Color oscuro para el texto */
    font-weight: 500;
}

    .consumption-warning-text .lock-icon {
        /* Estilo del candado */
        color: #7790ED;
        font-size: 1.3em;
        vertical-align: middle;
    }

.btn-consumption-cost-label {
    /* Botón de Costo (Derecha) */
    color: white; /* Texto oscuro para contraste */
    font-weight: 700;
    padding: 10px 25px;
    white-space: nowrap; /* Evita que el botón se rompa en varias líneas */
    flex-shrink: 0; /* Asegura que el botón mantenga su tamaño */
}



/* Ajuste de la tarjeta de consumo individual (más simple ahora) */
.consumption-action-card .consumption-overlay i {
    /* Cambiamos el ícono a uno que sugiere pago o transacción */
    /* Usaremos fa-search-dollar para indicar 'búsqueda con costo' */
    color: #ff9800;
    font-size: 2.5rem;
}


/* Estilo para el botón dentro de la tarjeta de consumo */
.btn-consumption-action {
    background-color: #ff9800; /* Naranja */
    border-color: #ff9800;
    color: #222028; /* Texto oscuro para mayor contraste en la advertencia */
    font-weight: 900;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    width: 100%;
}

    .btn-consumption-action:hover {
        background-color: #e68900;
        border-color: #e68900;
        color: #222028;
    }


/* ========================================================================= */
/* --- ESTILOS PARA PESTAÑAS (TABS) DE BOOTSTRAP --- */
/* ========================================================================= */

.custom-nav-tabs .nav-link {
    color: #495057; /* Texto gris oscuro por defecto */
    border: 1px solid transparent;
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-weight: 600;
    transition: background-color 0.3s, color 0.3s;
}

    .custom-nav-tabs .nav-link:hover {
        border-color: #e9ecef #e9ecef #dee2e6;
        background-color: #f8f9fa;
    }

    .custom-nav-tabs .nav-link.active {
        color: #fff; /* Texto blanco para la pestaña activa */
        background-color: #7790ED; /* Color primario para la pestaña activa */
        border-color: #7790ED #7790ED #fff; /* Ocultar el borde inferior para "unirse" al contenido */
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        font-weight: 700;
    }

/* Estilo para el contenedor de contenido de la pestaña */
.tab-content {
    border-radius: 0 10px 10px 10px !important;
}


/* ========================================================================= */
/* --- ESTILOS PARA CARDS DE ACCIÓN DESBLOQUEADA (UNLOCKED) --- */
/* ========================================================================= */

.unlocked-action-card .card {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, box-shadow 0.3s;
    background-color: #ffffff; /* Fondo blanco */
    border: 1px solid #7790ED; /* Borde de color primario */
    cursor: pointer;
}

.unlocked-action-card:hover .card {
    box-shadow: 0 8px 25px rgba(119, 144, 237, 0.4);
    transform: translateY(-4px); /* Animación más notoria al hacer hover */
}

.unlocked-action-card .card-image-block {
    position: relative;
    overflow: hidden;
    height: 150px;
}

    .unlocked-action-card .card-image-block img {
        /* Imagen a color y con brillo normal */
        filter: brightness(100%) grayscale(0%);
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

.unlocked-action-card .unlocked-overlay {
    /* El overlay existe para mostrar el candado, pero es más sutil */
    background: rgba(119, 144, 237, 0.1); /* Overlay muy ligero de color primario */
}

    .unlocked-action-card .unlocked-overlay i {
        /* Candado abierto en color primario */
        color: #7790ED;
        font-size: 2.5rem;
        text-shadow: 0 0 10px rgba(119, 144, 237, 0.5);
    }

.unlocked-action-card .unlocked-title {
    font-size: 1.1rem;
    font-weight: 900;
    color: black; /* Título en color primario */
    margin-bottom: 3px;
}

.unlocked-action-card .unlocked-subtitle {
    font-size: 0.9rem;
    font-weight: 700;
    color: #7790ED;
    margin-bottom: 5px;
}

/* ========================================================================= */
/* --- AJUSTE SOLICITADO: BOTÓN DE ACCIÓN ANCLADO AL FONDO (unlocked-action-card) --- */
/* ========================================================================= */

/* 1. Hace que la tarjeta sea un contenedor Flexbox vertical y asegura que ocupe el 100% del alto disponible en su grilla */
.unlocked-action-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Asegura que la tarjeta tome toda la altura en la grilla */
}

    /* 2. Asegura que el cuerpo de la tarjeta tome todo el espacio restante (flex-grow: 1) y se organice como una columna, empujando el contenido hacia abajo */
    .unlocked-action-card .card-body {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }


/* Estilo para el botón dentro de la tarjeta desbloqueada */
.btn-unlocked-action {
    /* *** MODIFICACIÓN CLAVE: El margen automático empuja el botón a la parte inferior del flex-container (.card-body) *** */
    margin-top: auto !important;
    background-color: black;
    border-color: #7790ED;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    width: 100%; /* Ocupa todo el ancho */
}

    .btn-unlocked-action:hover {
        background-color: #5d75d4;
        border-color: #5d75d4;
    }




/* Responsive adjustments */
@media (max-width: 767.98px) {
    .search-hero-area .search-form-container .col-12 {
        margin-bottom: 5px; /* Espaciado entre botones en móvil */
    }

    .btn-more-options {
        height: 45px; /* Altura cómoda para el dedo */
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .company-details-card {
        padding: 20px;
    }

        .company-details-card .company-name {
            font-size: 1.8rem;
        }

    .detail-item {
        padding: 12px 15px;
        margin-bottom: 5px; /* Menos espacio en móvil */
    }

    .btn-export-pdf {
        height: 40px;
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    .btn-detail-action {
        height: 40px;
        font-size: 0.8rem;
        padding: 0.5rem 0.8rem;
    }

    .other-sections-card .card-title {
        font-size: 1.5rem;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .d-flex.align-items-center {
        margin-top: 15px;
        width: 100%;
        justify-content: space-between;
    }

    .badge-consultas-restantes {
        margin-bottom: 0 !important;
        margin-right: 0 !important; /* Resetar margen si se apila */
    }

    .search-section .row > div {
        margin-bottom: 5px;
    }

    .search-hero-section .hero-title {
        font-size: 2rem;
    }

    .stats-section .border-end {
        border-right: none !important; /* Quita el separador vertical en móvil */
        border-bottom: 1px solid #e9ecef; /* Añade un separador horizontal */
    }

    .stat-box {
        padding-bottom: 20px;
    }
}



/* ... otros estilos responsivos y offcanvas ... */

@media (max-width: 991.98px) {
    .blocked-action-card .card-image-block {
        height: 120px;
    }

    /* Ajustes de tipografía para móvil */
    .home-hero h1 {
        font-size: 2.5rem;
    }

    .welcome-title {
        font-size: 1.8rem;
    }

    .welcome-subtitle {
        font-size: 2.2rem;
    }



    .info-block {
        flex-direction: column; /* Apila imagen y texto en pantallas pequeñas */
        text-align: center;
    }

        .info-block.image-right .content,
        .info-block.image-left .content,
        .info-block.image-right .section-image,
        .info-block.image-left .section-image {
            order: unset; /* Resetea el orden para que la imagen siempre quede arriba */
        }

    .section-image {
        margin-bottom: 30px;
    }






    /* Ajustes para el botón de búsqueda y el campo de texto en móvil */
    .search-btn-col {
        position: absolute;
        right: 15px;
        top: 0;
        width: 45px;
        height: 45px;
        z-index: 10;
        /* Ajuste de la posición vertical para el campo de texto */
        transform: translateY(60px);
    }

    .search-card .tab-pane .row {
        position: relative;
    }

    .search-card .btn-search.d-lg-none {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 45px !important;
        padding: 0;
    }

    .search-card input[type="text"] {
        padding-right: 50px;
        margin-top: 60px; /* Separación del input de las pestañas */
    }

    /* Pestañas en móvil ahora ocupan todo el ancho y son más grandes */
    .search-card .nav-pills {
        display: flex;
        width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 !important;
    }

        .search-card .nav-pills .nav-item {
            flex-grow: 1;
            margin: 0 5px 0 0 !important;
        }
}



/* ====================================================================== */
/* ESTILOS ESPECÍFICOS PARA LA VISTA DE PLANES (Create.cshtml) */
/* ====================================================================== */

/* Contenedor principal de los planes */
.planes-wrapper {
    max-width: 1200px;
}

.planes-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #7790ED; /* Color azul de ArmandoData */
    margin-bottom: 0.5rem;
}

.planes-subtitle {
    font-size: 1.1rem;
    color: #6c757d;
}

.planes-cards-row {
    align-items: stretch; /* Asegura que todas las tarjetas tengan la misma altura */
}

/* Estilo base de la tarjeta del plan */
.plan-card {
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
    height: 100%; /* Asegura que tome la altura completa de la columna */
    display: flex;
    flex-direction: column;
}

    .plan-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

/* Tarjeta Destacada (10 Consultas) */
.plan-card-highlight {
    border: 2px solid #ff7f00; /* Color naranja de destaque */
    box-shadow: 0 8px 16px rgba(255, 127, 0, 0.2);
}


/* Redefinición del Precio para su uso en el Header */
.plan-price-main {
    /* Resetea los estilos para no interferir si se usa en otro lugar */
    margin: 0;
    padding: 0;
    line-height: 1;
}

    /* Estilo del Precio dentro del Header */
    .plan-price-main.price-header-style {
        font-size: 1.5rem; /* Más pequeño para el header */
        font-weight: 900;
        color: white; /* Color blanco en el header */
        margin: 0.5rem 0 0.2rem 0;
    }

        .plan-price-main.price-header-style .price-value {
            font-size: 2.5rem; /* El valor numérico es un poco más grande */
            font-weight: 900;
            line-height: 1;
        }

        .plan-price-main.price-header-style .price-currency {
            font-size: 1rem;
            font-weight: 700;
            color: white;
            display: inline; /* Se muestra en la misma línea */
            margin-left: 5px;
        }





/* Cabecera de la tarjeta del plan */
.card-header {
    border-bottom: none;
    background-color: transparent;
    padding: 1.5rem 1rem 0.5rem 1rem;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    position: relative;
}



.plan-title {
    font-size: 1.75rem;
    font-weight: 900;
    margin: 0;
    line-height: 1.2;
}

.plan-badge {
    position: absolute;
    top: -15px;
    right: 15px;
    background-color: #004b8d;
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Cuerpo de la tarjeta */
.plan-card .card-body {
    padding: 1.5rem;
    display: flex; /* Asegura que el contenido se reparta */
    flex-direction: column;
    justify-content: space-between;
}

.plan-details {
    margin-bottom: 1.5rem;
}

.plan-description {
    font-size: 1rem;
    color: #6c757d;
    min-height: 50px; /* Altura mínima para alinear las descripciones */
}



.plan-savings {
    color: #28a745; /* Verde para destacar el ahorro */
    font-weight: 700;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

/* Botones y Acciones */
.plan-footer-actions {
    margin-top: auto; /* Empuja el footer de acciones hacia abajo */
}

.plan-btn {
    width: 100%;
    text-transform: uppercase;
    font-weight: 700;
    padding: 10px 15px;
    border-radius: 8px;
    transition: background-color 0.3s;
}



/* Colores de las cabeceras de los planes */
/* Plan 1 Consulta (Azul Claro) */
.plan-header-1 {
    background-color: #7790ED; /* Azul Claro/Bootstrap Primary */
    color: white;
    padding: 1.5rem 1rem 0.5rem 1rem;
}

/* Plan 10 Consultas (Azul Oscuro - Destacado) */
.plan-card-highlight {
    border: 2px solid #004b8d; /* Borde Azul Oscuro para destaque */
    box-shadow: 0 8px 16px rgba(0, 75, 141, 0.2);
}

.plan-header-10 {
    background-color: #004b8d; /* Azul Oscuro */
    color: white;
    padding: 1.5rem 1rem 0.5rem 1rem;
}

/* Plan 100 Consultas (Negro) */
.plan-header-100 {
    background-color: #212529; /* Negro/Dark Grey */
    color: white;
    padding: 1.5rem 1rem 0.5rem 1rem;
}



/* Estilos de la Lista de Beneficios */
.plan-features {
    text-align: left;
    margin-top: 1.5rem;
    padding: 0;
    list-style: none; /* Quitamos los puntos por defecto */
    font-size: 0.95rem;
    line-height: 1.5;
}

    .plan-features li {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: flex-start;
    }

.feature-icon {
    color: #004b8d; /* azul  */
    margin-right: 8px;
    font-size: 1.1em;
    padding-top: 2px;
}

.feature-text {
    color: #343a40;
}



/* Botón 1 Consulta (Azul Claro) */
.plan-btn-1 {
    background-color: #7790ED;
    color: white;
    border-color: #007bff;
}

    .plan-btn-1:hover {
        background-color: #0056b3;
        border-color: #0056b3;
        color: white; /* Corregido: Asegura que la letra sea blanca */
    }

/* Botón 10 Consultas (Azul Oscuro) */
.plan-btn-10 {
    background-color: #004b8d;
    color: white;
    border-color: #004b8d;
}

    .plan-btn-10:hover {
        background-color: #003366;
        border-color: #003366;
        color: white; /* Corregido: Asegura que la letra sea blanca */
    }

/* Botón 100 Consultas (Negro) */
.plan-btn-100 {
    background-color: #212529; /* Negro */
    color: white;
    border-color: #212529;
}

    .plan-btn-100:hover {
        background-color: #000000;
        border-color: #000000;
        color: white; /* Corregido: Asegura que la letra sea blanca */
    }


.planes-check-policy-wrapper {
    margin-bottom: 15px; /* Más espacio antes del botón de pago */
}

/* Estilo para el Checkbox de Políticas */
.planes-check-policy {
    background-color: #f7f9fb;
    border: 1px solid #e9ecef;
    padding: 10px 15px; /* Ajuste de padding */
    border-radius: 8px; /* Borde más redondeado */
    text-align: left;
    font-size: 0.9rem; /* Un poco más grande para mejor legibilidad */
    line-height: 1.3;
    display: flex; /* Usamos flexbox para alinear el checkbox y el texto */
    align-items: center; /* Alineación vertical centrada */
}

    .planes-check-policy .form-check-input {
        margin-top: 0; /* Elimina el margen superior por defecto */
        margin-left: 0; /* Elimina margen izquierdo si lo hay */
        margin-right: 10px; /* Espacio entre el checkbox y el texto */
        flex-shrink: 0; /* Evita que el checkbox se encoja */
    }

    .planes-check-policy label.form-check-label {
        margin-bottom: 0; /* Elimina margen inferior del label */
        color: #343a40;
    }

    .planes-check-policy a {
        color: #007bff; /* Azul Bootstrap para enlaces */
        font-weight: 700;
        text-decoration: underline; /* Subrayado para el enlace */
    }

        .planes-check-policy a:hover {
            color: #0056b3;
        }



/* ========================================================================= */
/* --- NUEVOS ESTILOS: SECCIÓN DE ESTADÍSTICAS (CLEAN LOOK) --- */
/* ========================================================================= */

/* Tarjeta informativa izquierda (Texto y Tip) */
.search-info-card {
    background-color: #ffffff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Sombra muy suave */
    border: 1px solid #f0f0f0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.search-info-text {
    font-size: 0.95rem;
    color: #495057;
    line-height: 1.5;
    margin-bottom: 15px;
}

.search-tip-text {
    font-size: 0.95rem;
    color: #7790ED; /* Azul corporativo */
    font-weight: 700;
}

    .search-tip-text i {
        color: #ffc107; /* Color bombillo amarillo */
        margin-right: 5px;
    }



/* Estadísticas Derecha (Limpias sin cajas) */

.stat-clean-wrapper {
    display: flex;
    gap: 20px;
    justify-content: space-between;
    height: 100%; /* Para que todas las tarjetas midan lo mismo */
}

.stat-clean-item {
    flex: 1; /* Esto hace que todos tengan el mismo ancho */
    background: #f8faff;
    padding: 20px 15px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.2s ease;
}

    .stat-clean-item:hover {
        transform: translateY(-3px);
        background: #ffffff;
        box-shadow: 0 4px 12px rgba(119, 144, 237, 0.1);
    }

    .stat-clean-item .number {
        font-size: 1.4rem;
        font-weight: 900;
        color: #222028;
        margin-bottom: 4px;
        display: block;
    }

    .stat-clean-item .label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #7790ED; /* Azul ArmandoData */
        font-weight: 700;
    }

    .stat-clean-item a {
        color: #7790ED; /* Azul ArmandoData */
        text-decoration: none; /* Quita el subrayado por defecto */
        font-size: 0.9rem; /* Tamaño reducido (aprox 14px) */
        font-weight: 700; /* Para que resalte un poco más */
        transition: color 0.3s ease;
    }

        .stat-clean-item a:hover {
            color: #0056b3 !important; /* Color un poco más claro al pasar el mouse */
            text-decoration: underline;
        }


    /* Línea separadora vertical */
    .stat-clean-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 15%; /* Dejar un poco de espacio arriba */
        height: 70%; /* Altura de la línea */
        width: 1px;
        background-color: #dee2e6; /* Gris muy claro */
    }

.stat-clean-label {
    font-size: 0.85rem;
    color: #222028;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 8px;
    min-height: 32px; /* Asegura alineación si el texto ocupa 2 líneas */
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-clean-value {
    font-size: 1.1rem;
    font-weight: 900; /* Extra Bold */
    color: #7790ED;
    margin-bottom: 0;
    text-transform: uppercase;
    /* Mantiene la animación existente */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

    .stat-clean-value.animate-stat {
        opacity: 1;
        transform: translateY(0);
    }

/* Ajustes Responsive */
@media (max-width: 991.98px) {
  

    .stat-clean-item:not(:last-child)::after {
        display: none; /* Ocultar línea vertical en móvil */
    }

    .stat-clean-item {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
        padding-bottom: 15px;
    }

        .stat-clean-item:last-child {
            border-bottom: none;
        }

    .stat-clean-label {
        min-height: auto;
    }
    .stats-description {
        padding-right: 0;
        margin-bottom: 2rem;
        text-align: center;
    }

    .stat-clean-wrapper {
        flex-direction: column;
    }
}




/* Estilo para el contenedor del botón de Stripe */
.stripe-button-container .stripe-button-el {
    width: 100% !important;
}


/* --- Estilos para Radio Buttons de Tipo de Búsqueda (Search.cshtml) --- */

.radio-group-armando {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    gap: 10px; /* Espacio entre los botones */
}

    /* Ocultar el input de radio nativo */
    .radio-group-armando .form-check-input {
        /* Ocultar visualmente, pero mantener accesible */
        position: absolute;
        opacity: 0;
        pointer-events: none;
        width: 0;
        height: 0;
    }

    /* El label actúa como el botón */
    .radio-group-armando .form-check-label {
        display: block; /* Ocupa el espacio */
        cursor: pointer;
        background-color: #f8f9fa; /* Fondo claro del "botón" */
        border: 1px solid #dee2e6; /* Borde suave del "botón" */
        border-radius: 8px; /* Bordes redondeados */
        padding: 8px 15px; /* Espaciado interno del "botón" */
        transition: all 0.3s ease;
        user-select: none;
        font-size: 0.9rem;
        font-weight: 700;
        color: #495057;
        margin-bottom: 0; /* Eliminar margen inferior del label */
        line-height: 1.2; /* Ajuste para mejor visualización */
    }

        .radio-group-armando .form-check-label:hover {
            background-color: #e9ecef;
            border-color: #ced4da;
        }

    /* Estilo para el label cuando el radio está seleccionado */
    .radio-group-armando .form-check-input:checked + .form-check-label {
        background-color: var(--primary-blue, #007bff); /* Utiliza el color azul principal de ArmandoData */
        border-color: var(--primary-blue, #007bff);
        color: #ffffff;
    }