/*
 * Velzon: #page-topbar suele ir a z-index 1002 y .vertical-overlay a 1003.
 * Si el overlay está visible (p. ej. body.vertical-sidebar-enable), queda ENCIMA del
 * toolbar: los clics no llegan al modo oscuro ni al hamburger, pero el Theme Customizer
 * (offcanvas Bootstrap ~1045) sigue respondiendo.
 */
#page-topbar {
    z-index: 1005;
}

.layout-wrapper.landing {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
    overflow-x: clip;
    min-height: 100vh;
    min-height: 100dvh;
    /* Velzon pone --vz-secondary-bg (claro en tema light); en overscroll móvil se veía una franja blanca */
    background-color: #030303;
}

/* Sin barra horizontal en móvil: 100vw, AOS y sombras del fondo */
body.page-landing,
html:has(.layout-wrapper.landing),
body:has(.layout-wrapper.landing) {
    overflow-x: hidden;
    max-width: 100%;
}

/*
 * Móvil (scroll rápido / overscroll): si html-body siguen en blanco por defecto,
 * se ve una franja clara un instante. Mismo tono que .background (#030303 en background.css).
 */
html:has(body.page-landing) {
    background-color: #030303;
    min-height: 100%;
    /* Evita “rebote” vertical que en algunos navegadores móviles deja ver el color por defecto */

}

/* DataTables Responsive: quita el indicador rojo del toggle (detalle) */
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent.parent > th.dtr-control:before {
    background-color: transparent !important;
    border-color: var(--vz-secondary-bg) !important;
}

body.page-landing {
    background-color: #030303;
    min-height: 100vh;
    min-height: 100dvh;
    /* Desktop: navbar ancha; móvil se redefine abajo (barra + safe area) */
    --landing-scroll-offset: 7rem;
}

@media (max-width: 991.98px) {
    html:has(body.page-landing),
    body.page-landing {
        --landing-scroll-offset: calc(4.5rem + env(safe-area-inset-top, 0px));
    }

    html:has(body.page-landing) {
        /* Refuerzo si el navegador aplica scroll a #section sin el offset del script */
        scroll-padding-top: var(--landing-scroll-offset);
    }
}

/* Overlay del menú (Velzon usa 100vw; en iOS suele desbordar unos px) */
.layout-wrapper.landing .vertical-overlay {
    width: 100%;
    max-width: 100%;
}

@media (max-width: 991.98px) {
    /* AOS translate puede ensanchar el layout en pantallas estrechas */
    .layout-wrapper.landing [data-aos] {
        max-width: 100%;
    }

    .layout-wrapper.landing .container {
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
    }

    .navbar-landing .navbar-cta .btn-link.text-nowrap {
        white-space: normal;
        text-align: center;
        line-height: 1.35;
    }
}

.primary-text {
    color: #fefd02 !important;
    text-shadow: 0 0 32px rgba(230, 3, 2, 0.55);
}

.navbar-landing {
    background: rgba(0, 0, 0, 0.65) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Alineación vertical uniforme (logo, enlaces, botones, redes) */
.navbar-landing > .container-fluid {
    min-height: 3.75rem;
}

.navbar-landing .navbar-brand {
    line-height: 1;
}

/* Landing: logo a la izquierda; menú + CTAs + redes a la derecha (coincide con navbar-expand-xl = 1200px) */
@media (min-width: 1200px) {
    .navbar-landing .navbar-landing-collapse {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
    }

    .navbar-landing .navbar-landing-collapse .navbar-nav {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        row-gap: 0.25rem;
    }
}

/*
 * Reserva de ancla si no hay JS (refuerzo). El scroll fino lo hace public/js/landing-anchor-offset.js
 * usando la altura real del #navbar.
 */
body.page-landing section[id] {
    scroll-margin-top: var(--landing-scroll-offset);
}

.hero-diagnostic {
    min-height: 100dvh;
    position: relative;
    z-index: 1;
}

.hero-diagnostic .display-5 {
    letter-spacing: -0.02em;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.85);
}

.hero-diagnostic .lead {
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75);
    color: rgba(255, 255, 255, 0.88) !important;
}

.section {
    background-color: transparent !important;
    position: relative;
    z-index: 1;
}

section.hero-diagnostic {
    padding: 0 !important;
}

/* Secciones sobre fondo oscuro: títulos y texto legibles */
.section-landing h2,
.section-landing h3,
.section-landing h4,
.section-landing h5,
.section-landing h6 {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.65);
}

.section-landing .lead,
.section-landing .text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

.section-landing .text-dark {
    color: #fff !important;
}

.evaluation-search{
    background: rgb(43 43 43 / 32%)!important;
}
.custom-border-top{
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Tarjetas glass */
.glass-card {
    width: 100%;
    height: auto;
    min-height: 100%;
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-radius: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.2);
    position: relative;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}


.glass-card:hover {
    border-color: rgba(254, 253, 2, 0.25);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0 0 1px rgba(230, 3, 2, 0.15);
}

.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    pointer-events: none;
    z-index: 1;
}

.glass-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent, rgba(255, 255, 255, 0.08));
    pointer-events: none;
    z-index: 1;
}

.glass-card .card-body {
    position: relative;
    z-index: 2;
}

.glass-card h5,
.glass-card h6 {
    color: #fff;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.glass-card .text-muted {
    color: rgba(255, 255, 255, 0.72) !important;
}

/* Proceso: mismas tarjetas glass compactas */
.glass-panel {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 1rem;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
}

.glass-panel h6 {
    color: #fff;
}

.glass-panel .text-muted {
    color: rgba(255, 255, 255, 0.68) !important;
}

.diag-carousel img {
    object-fit: cover;
    max-height: 420px;
}

/* Iconos unificados (home) — marca rojo / amarillo */
.home-icon {
    width: 3.25rem;
    height: 3.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    background: linear-gradient(155deg, rgba(230, 3, 2, 0.4), rgba(20, 20, 20, 0.55));
    border: 1px solid rgba(254, 253, 2, 0.22);
    color: #fefd02;
    line-height: 1;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
}



.home-icon i {
    font-size: 1.35rem;
}

.home-icon--sm {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.65rem;
}

.home-icon--sm i {
    font-size: 1.05rem;
}

.glass-card .home-icon {
    margin-bottom: 1rem;
}

.glass-panel .home-icon {
    margin-bottom: 0.85rem;
}

.navbar-brand-img {
    height: 38px;
    width: auto;
    object-fit: contain;
}

.logo-hero {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: contain;
}

.navbar-landing .navbar-cta .btn-link {
    text-decoration: none;
}

.navbar-landing .navbar-cta .btn-link:hover {
    color: #fefd02 !important;
}

.navbar-landing .navbar-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.navbar-landing .navbar-social-link:hover {
    color: #fefd02 !important;
    background-color: rgba(255, 255, 255, 0.06);
}

.navbar-landing .navbar-social-link i {
    font-size: 1.2rem;
    line-height: 1;
}

/* Solo homepage: botones primarios marca roja. El CRM (/admin) usa el primario del tema (app/custom). */
.layout-wrapper.landing .btn-primary {
    background-color: #f80000 !important;
    border-color: #f80000 !important;
    color: #ffffff !important;
}
.layout-wrapper.landing .btn-primary:hover {
    background-color: #000000 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.navbar-landing .navbar-nav .nav-item .nav-link {
    color: #ffffff !important;
    display: inline-flex;
    align-items: center;
    line-height: 1.25;
    /* Sustituye padding asimétrico del tema Velzon (14px) por bloque simétrico */
    padding: 0.5rem 0.65rem !important;
    font-size: 15px;
}

@media (min-width: 1200px) {
    .navbar-landing .navbar-nav .nav-item .nav-link {
        padding: 0.55rem 0.6rem !important;
    }
}

.navbar-landing .navbar-nav .nav-item .nav-link.active {
    color: #fefd02 !important;
}

.navbar-landing .navbar-nav .nav-item .nav-link:hover {
    color: #fefd02 !important;
}

/* Bloque contacto glass */
.glass-contact {
    background: rgba(12, 12, 12, 0.55);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.glass-contact .border-end {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.glass-contact a:hover {
    color: #fefd02 !important;
}

.glass-contact a,
.glass-contact .text-white {
    overflow-wrap: anywhere;
}

/* Mapa embebido — contacto */
.contact-map-wrap {
    border-radius: 1rem;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.35);
    min-height: 280px;
}

.contact-map-iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 360px;
    border: 0;
}

@media (min-width: 992px) {
    .contact-map-wrap {
        min-height: 100%;
    }

    .contact-map-iframe {
        min-height: 420px;
    }
}

/* Contadores sobre fondo oscuro */
.section-stats h2 {
    color: #fff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}

.section-stats .text-muted {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Galería: marco sutil */
.gallery-frame {
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.section-testimonials {
    background: rgba(230, 3, 2, 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.section-testimonials-title {
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

/* AOS: respetar “reducir movimiento” del sistema */
@media (prefers-reduced-motion: reduce) {
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        pointer-events: auto;
    }
}

/* Badge estándar BOTY: estado pendiente (CRM y tablas) */
.badge-status-pending {
    background-color: rgb(131, 131, 131) !important;
    color: #fff !important;
    font-size: 12px;
}


@media (max-width: 500px) {
    .logo-hero {
        height: auto !important;
        max-height: 280px;
        width: 100%;
        max-width: min(100%, 320px);
        object-fit: contain;
    }
    .col-lg-12{
        padding-left: 0!important;
        padding-right: 0!important;
    }
    table.dataTable>tbody>tr.child ul.dtr-details{
        width: 100%!important;
    }
    table.dataTable>tbody>tr.child ul.dtr-details>li{
        display: flex;
        justify-content: space-between;
    }

    .navbar-header {
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
        align-items: center;
        margin: 0 auto;
        height: 48px;
        padding: 0 1.5rem 0 .75rem;
    }
}