/* =========================================================

   RESET GENERAL

========================================================= */



html,

body {

    height: 100%;

    margin: 0;

    padding: 0;

    overscroll-behavior-y: none;

}



body {

    overflow: auto;

    background: #f8f9fa;

}



/* =========================================================

   FORM PRINCIPAL

========================================================= */



form {

    height: 100vh;

    display: flex;

    flex-direction: column;

}



/* =========================================================

   HEADER GENERAL

========================================================= */



.nr-topbar {

    position: sticky;

    top: 0;

    left: 0;

    right: 0;

    background: #fff;

    z-index: 1030;

    box-shadow: 0 2px 10px rgba(0,0,0,.05);

}



/* =========================================================

   HEADER SUPERIOR

========================================================= */



.market-header {

    background: #fff;

    border-bottom: 1px solid #e5e5e5;

    padding: 4px 18px;

}



/* =========================================================

   ROW HEADER

========================================================= */



.header-row {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

}



@media (max-width:768px) {



    .header-row {

        gap: 0 !important;

    }

}



/* =========================================================

   LOGO

========================================================= */



.logo {

    display: flex;

    align-items: center;

    gap: 3px;

    margin-left: 10px;

}



    .logo img {

        width: 30px;

        height: 30px;

        object-fit: contain;

    }



    .logo span {

        font-size: 20px;

        font-weight: 700;

        color: #198754;

        white-space: nowrap;

        line-height: 1;

    }



/* =========================================================

   BUSCADOR

========================================================= */



.search-box {

    flex: 1;

    position: relative;

    min-width: 260px;

    margin-left: 10px;

}



    .search-box i {

        position: absolute;

        left: 16px;

        top: 50%;

        transform: translateY(-50%);

        color: #9aa0a6;

        font-size: 18px;

    }



    .search-box input {

        width: 100%;

        padding: 12px 16px 12px 42px;

        border-radius: 40px;

        border: 1px solid #dee2e6;

        background: #f8f9fa;

        font-size: 15px;

        transition: .2s;

    }



        .search-box input:focus {

            background: white;

            border-color: #198754;

            box-shadow: 0 0 0 3px rgba(25,135,84,.1);

            outline: none;

        }



/* =========================================================

   ACCIONES HEADER

========================================================= */



.header-actions {

    display: flex;

    gap: 20px;

    font-weight: 500;

    align-items: center;

}



    .header-actions a {

        text-decoration: none;

        color: #212529;

        transition: .15s;

        margin-left: 10px;

    }



        .header-actions a:hover {

            color: #198754;

        }



@media (max-width:768px) {



    .header-actions {

        display: none !important;

    }

}



/* =========================================================

   BOTÓN PRESUPUESTO

========================================================= */



.btn-presupuesto {

    background: #d1f2e0;

    color: #198754;

    border: 1px solid #b6e6cf;

    padding: 4px 14px;

    border-radius: 30px;

    font-weight: 600;

    transition: .2s;

    text-decoration: none;

}



    .btn-presupuesto:hover {

        background: #bdf0d4;

        color: #146c43;

        transform: translateY(-1px);

        box-shadow: 0 4px 10px rgba(25,135,84,.15);

    }



/* =========================================================

   MENÚ ICONOS

========================================================= */



.icon-scroll {

    display: flex;

    overflow-x: auto;

    gap: 16px;

    padding: 4px 12px;

    background: #f3f4f6;

    border-bottom: 1px solid #e5e5e5;

    scroll-behavior: smooth;

}



    /* ====  LINKS Y LINKBUTTONS  === */



    .icon-scroll a,

    .icon-scroll .icon-item {

        text-decoration: none !important;

        color: inherit !important;

        background: transparent !important;

        border: none !important;

        outline: none !important;

        padding: 0 !important;

        font-family: inherit;

        appearance: none;

        -webkit-appearance: none;

    }



        .icon-scroll a:visited {

            color: inherit;

        }



        .icon-scroll a:hover {

            text-decoration: none;

        }



/* ====  ITEM  === */



.icon-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-width: 70px;

    cursor: pointer;

    transition: .2s;

}



    /* ===  TEXTO  === */



    .icon-item span {

        margin-top: 6px;

        font-size: 12px;

        color: #212529;

        transition: .25s;

    }



    /* ====  ICONOS LUCIDE  === */



    .icon-item i {

        width: 17px;

        height: 17px;

        stroke: #6c757d;

        transition: .25s;

    }



    /* ====  SVG PERSONALIZADOS (DRON)  === */



    .icon-item svg {

        stroke: #6c757d;

        transition: .25s;

    }



    /* ====  HOVER  === */



    .icon-item:hover i,

    .icon-item:hover svg {

        stroke: #198754;

        transform: scale(1.18);

    }



    .icon-item:hover span {

        color: #198754;

    }



/* ====  SCROLL  === */



.icon-scroll::-webkit-scrollbar {

    height: 6px;

}



.icon-scroll::-webkit-scrollbar-thumb {

    background: #ccc;

    border-radius: 10px;

}



/* =========================================================

   DRON DESTACADO

========================================================= */



.icon-item-dron span {

    color: #ff8c00 !important; /* naranja */

    font-weight: 700;

}



.icon-item-dron i,

.icon-item-dron svg {

    stroke: #ff8c00 !important; /* naranja */

}



/* HOVER */



.icon-item-dron:hover i,

.icon-item-dron:hover svg {

    stroke: #dc3545 !important; /* rojo */

    transform: scale(1.18);

}



.icon-item-dron:hover span {

    color: #dc3545 !important; /* rojo */

}



/* =========================================================

   CONTENIDO

========================================================= */



.main-content {

    flex: 1;

    overflow-y: auto;

    overflow-x: hidden;

    min-height: 0;

    padding-bottom: 40px;

    overscroll-behavior: contain;

}



/* =========================================================

   FOOTER

========================================================= */



.nr-footer {

    position: relative;

    width: 100%;

    background: #a9782c;

    color: white;

    padding: 18px 30px;

    margin-top: auto;

}



.nr-footer-content {

    display: flex;

    justify-content: space-between;

    align-items: center;

    flex-wrap: wrap;

    gap: 30px;

}



.nr-footer-item {

    display: flex;

    align-items: center;

    gap: 14px;

    font-size: 18px;

    font-weight: 500;

}



    .nr-footer-item i {

        font-size: 30px;

        border: 2px solid white;

        border-radius: 50%;

        padding: 10px;

    }



/* =========================================================

   REDES FOOTER

========================================================= */



.nr-footer-social {

    display: flex;

    align-items: center;

    gap: 14px;

}



.social-btn {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    text-decoration: none;

    border: 2px solid rgba(255,255,255,.9);

    color: white;

    transition: .25s;

}



    .social-btn i {

        font-size: 24px;

    }



    /* INSTAGRAM */



    .social-btn.instagram:hover {

        background: linear-gradient( 45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888 );

        transform: translateY(-3px) scale(1.05);

        box-shadow: 0 8px 20px rgba(0,0,0,.25);

    }



    /* FACEBOOK */



    .social-btn.facebook:hover {

        background: #1877f2;

        transform: translateY(-3px) scale(1.05);

        box-shadow: 0 8px 20px rgba(0,0,0,.25);

    }



/* =========================================================

   SIDE MENU

========================================================= */



.side-menu {

    position: fixed;

    top: 0;

    left: -320px;

    width: 320px;

    height: 100%;

    background: white;

    padding: 30px 25px;

    box-shadow: 0 0 35px rgba(0,0,0,.25);

    transition: .35s;

    z-index: 11001;

}



    .side-menu.active {

        left: 0;

    }



    /* LINKS */



    .side-menu a {

        display: block;

        font-size: 20px;

        margin-bottom: 18px;

        text-decoration: none !important;

        color: #333 !important;

        transition: .15s;

    }



        .side-menu a:hover {

            color: #198754 !important;

        }



    .side-menu hr {

        margin: 20px 0;

    }



    .side-menu .btn {

        font-size: 16px;

        padding: 10px;

    }



/* =========================================================

   OVERLAY

========================================================= */



.overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0,0,0,.45);

    display: none;

    z-index: 11000;

}



    .overlay.active {

        display: block;

    }







/* =========================================================

   RESPONSIVE CELULAR

========================================================= */



@media (max-width: 768px) {



    .btn-floating {

        right: 15px;

        width: 60px;

        height: 60px;

    }



        .btn-floating:hover {

            width: 200px;

        }



        .btn-floating span {

            font-size: 15px;

        }

}



/* =========================================================

   WHATSAPP ICONO MAS GRANDE

========================================================= */



.btn-floating.whatsapp img {

    width: 42px;

    height: 42px;

    min-width: 40px;

}



/* Icono cerrado */



.btn-floating.whatsapp::before {

    width: 44px;

    height: 44px;

}



/* =========================================================

   POSICION ICONO WHATSAPP CERRADO

========================================================= */



.btn-floating.whatsapp::before {

    background-image: url('Images/WhatSapp.png');

    width: 42px;

    height: 42px;

    transform: translate(-1px);

}



/* =========================================================

   MODAL PRESUPUESTO

========================================================= */



.modal {

    z-index: 11000 !important;

}



.modal-backdrop {

    z-index: 10900 !important;

}



#modalPresupuesto .modal-dialog {

    height: 95vh;

    margin: auto;

}



#modalPresupuesto .modal-content {

    height: 95vh;

    display: flex;

    flex-direction: column;

}



#modalPresupuesto .modal-body {

    flex: 1;

    overflow-y: auto;

}



.modal-body h6 {

    font-weight: 600;

    color: #198754;

}



/* ITEMS */



.modal-body .presupuesto-item:nth-of-type(even) {

    background-color: #f8f9fa;

    border-radius: 6px;

    padding: 6px 8px;

}



.modal-body .presupuesto-item:nth-of-type(odd) {

    background-color: #ffffff;

    border-radius: 6px;

    padding: 6px 8px;

}



/* =========================================================

   FORM PRESUPUESTO

========================================================= */



.presupuesto-form {

    background: #f8f9fa;

    border-radius: 12px;

    padding: 18px;

    margin-top: 15px;

    border: 1px solid #e6e6e6;

}



.presupuesto-form-title {

    font-size: 14px;

    font-weight: 600;

    color: #198754;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.presupuesto-form .form-control {

    border-radius: 8px;

    height: 42px;

    font-size: 14px;

    border: 1px solid #dee2e6;

    transition: .2s;

}



    .presupuesto-form .form-control:focus {

        border-color: #198754;

        box-shadow: 0 0 0 3px rgba(25,135,84,.1);

    }



.presupuesto-form .row {

    align-items: center;

}



/* ALERT */



.alert {

    border-radius: 10px;

    font-size: 14px;

}



/* =========================================================

   MOBILE

========================================================= */



@media(max-width:768px) {



    /* LOGO */



    .logo img {

        width: 35px;

        height: 35px;

    }



    .logo span {

        font-size: 24px;

    }



    /* HEADER */



    .header-actions {

        width: 100%;

        justify-content: center;

        font-size: 14px;

    }



    .search-box {

        display: none;

    }



    /* ICONOS */



    .icon-scroll {

        gap: 15px;

        padding: 6px 10px;

    }



    .icon-item {

        min-width: 60px !important;

    }



        .icon-item i,

        .icon-item svg {

            width: 18px !important;

            height: 18px !important;

        }



        .icon-item span {

            font-size: 10px !important;

        }



    /* FOOTER */



    .nr-footer {

        padding: 12px 15px;

    }



    .nr-footer-content {

        gap: 15px;

    }



    .nr-footer-item {

        gap: 10px;

        font-size: 14px;

    }



        .nr-footer-item i {

            font-size: 18px;

            padding: 6px;

        }



    /* REDES */



    .nr-footer-social {

        width: 100%;

        display: flex;

        justify-content: flex-start;

        align-items: center;

        margin-top: 0;

        margin-bottom: 0;

        padding-left: 2px;

        position: relative;

        top: 4px;

    }



    .social-btn {

        width: 44px;

        height: 44px;

    }



        .social-btn i {

            font-size: 20px;

        }



    /* FORM */



    .presupuesto-form {

        padding: 14px;

    }

}



/* =========================================================

   OCULTAR BOTONES FLOTANTES AL ABRIR MODAL EN CELULAR

========================================================= */



@media (max-width: 768px) {



    /* Modal abierto */

    body.modal-open .btn-floating {

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform: translateY(20px);

        transition: opacity .25s ease, transform .25s ease, visibility .25s;

    }



    /* Estado normal */

    .btn-floating {

        transition: opacity .25s ease, transform .25s ease, visibility .25s, width .4s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease;

    }

}



/* =========================================================

   MODAL UBICACION PRO NORTE RAICES

========================================================= */



.modal-ubicacion {

    z-index: 12000 !important;

}



    /* =========================================================

   DIALOG

========================================================= */



    .modal-ubicacion .modal-dialog {

        max-width: 980px;

        margin: 18px auto;

    }



    /* =========================================================

   CONTENT

========================================================= */



    .modal-ubicacion .modal-content {

        background: linear-gradient( 135deg, rgba(10,10,10,.96), rgba(20,20,20,.94) );

        backdrop-filter: blur(18px);

        border: 1px solid rgba(255,255,255,.06);

        border-radius: 26px;

        overflow: hidden;

        box-shadow: 0 30px 80px rgba(0,0,0,.55);

        height: 78vh;

    }



    /* =========================================================

   HEADER

========================================================= */



    .modal-ubicacion .modal-header {

        padding: 18px 24px 16px 24px;

        background: linear-gradient( 180deg, rgba(255,255,255,.03), rgba(255,255,255,0) );

        border-bottom: 1px solid rgba(255,255,255,.06);

    }



/* =========================================================

   HEADER FLEX

========================================================= */



.ubicacion-header {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}



/* =========================================================

   ICONO

========================================================= */



.ubicacion-icon {

    width: 42px;

    height: 42px;

    border-radius: 14px;

    background: rgba(167,138,66,.10);

    display: flex;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

}



    .ubicacion-icon i {

        font-size: 20px;

        color: #b7a269;

    }



/* =========================================================

   TITULO

========================================================= */



.ubicacion-header h2 {

    color: white;

    font-size: 24px;

    font-weight: 700;

    margin: 0;

    line-height: 1.1;

}



/* =========================================================

   SUBTITULO

========================================================= */



.ubicacion-header p {

    color: rgba(255,255,255,.62);

    margin-top: 4px;

    margin-bottom: 0;

    font-size: 13px;

}



/* =========================================================

   GRID

========================================================= */



.ubicacion-grid {

    display: grid;

    grid-template-columns: 310px 1fr;

    height: 100%;

}



/* =========================================================

   PANEL IZQUIERDO

========================================================= */



.ubicacion-info {

    padding: 22px;

    background: linear-gradient( 180deg, rgba(255,255,255,.02), rgba(255,255,255,.01) );

    border-right: 1px solid rgba(255,255,255,.06);

    display: flex;

    flex-direction: column;

    overflow: hidden;

}



/* =========================================================

   LOGO

========================================================= */



.ubicacion-logo {

    width: 135px;

    margin-bottom: 22px;

    opacity: .95;

    object-fit: contain;

}



/* =========================================================

   ITEMS

========================================================= */



.ubicacion-item {

    display: flex;

    gap: 12px;

    margin-bottom: 18px;

}



    /* =========================================================

   ICONOS ITEMS

========================================================= */



    .ubicacion-item i {

        font-size: 18px;

        color: #9c8a56;

        position: relative;

        top: 2px;

        flex-shrink: 0;

    }



    /* =========================================================

   TITULO ITEM

========================================================= */



    .ubicacion-item h5 {

        color: white;

        font-size: 15px;

        margin-bottom: 4px;

        font-weight: 600;

    }



    /* =========================================================

   TEXTO ITEM

========================================================= */



    .ubicacion-item p {

        color: rgba(255,255,255,.70);

        font-size: 12px;

        line-height: 1.55;

        margin: 0;

    }



/* =========================================================

   BOTON

========================================================= */



.btn-como-llegar {

    margin-top: auto;

    height: 44px;

    border-radius: 12px;

    background: linear-gradient( 90deg, #7f8f2f, #b4c64a );

    color: white;

    text-decoration: none;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-weight: 700;

    letter-spacing: .3px;

    font-size: 12px;

    transition: .25s;

}



    .btn-como-llegar:hover {

        transform: translateY(-2px);

        color: white;

        box-shadow: 0 10px 24px rgba(180,198,74,.16);

    }



/* =========================================================

   MAPA

========================================================= */



.ubicacion-mapa {

    position: relative;

    background: black;

    overflow: hidden;

}



    /* =========================================================

   IFRAME

========================================================= */



    .ubicacion-mapa iframe {

        width: 100%;

        height: 100%;

        border: 0;

        filter: grayscale(.15) brightness(.75) contrast(1.05);

        transition: transform 1.2s ease, filter .8s ease;

    }



/* =========================================================

   EFECTO HOVER

========================================================= */



.modal-ubicacion:hover .ubicacion-mapa iframe {

    transform: scale(1.01);

    filter: grayscale(.1) brightness(.82) contrast(1.08);

}



/* =========================================================

   BOTON CERRAR

========================================================= */



.modal-ubicacion .btn-close {

    filter: invert(1);

    opacity: .8;

    transform: scale(.85);

    transition: .2s;

}



    .modal-ubicacion .btn-close:hover {

        opacity: 1;

        transform: scale(.95);

    }



/* =========================================================

   BACKDROP

========================================================= */



.modal-backdrop.show {

    opacity: .82;

}



/* =========================================================

   NOTEBOOK PEQUEÑA

========================================================= */



@media(max-width:1200px) {



    .modal-ubicacion .modal-dialog {

        max-width: 920px;

    }



    .ubicacion-grid {

        grid-template-columns: 290px 1fr;

    }



    .ubicacion-logo {

        width: 120px;

    }

}



/* =========================================================

   TABLET

========================================================= */



@media(max-width:991px) {



    .modal-ubicacion .modal-dialog {

        margin: 12px;

    }



    .modal-ubicacion .modal-content {

        height: auto;

    }



    .ubicacion-grid {

        grid-template-columns: 1fr;

        height: auto;

    }



    .ubicacion-info {

        border-right: none;

        border-bottom: 1px solid rgba(255,255,255,.06);

    }



    .ubicacion-mapa {

        height: 320px;

    }

}



@media (max-width:768px) {



    .btn-presupuesto {

        display: block;

        width: fit-content;

        margin: 10px auto;

        padding-bottom: 10px;

    }

}



.menu-link {

    text-decoration: none;

    color: inherit;

    background: none;

    border: none;

    padding: 0;

    cursor: pointer;

}



/* =========================================================

   LINK DRON DESTACADO

========================================================= */



.menu-link-dron {

    color: #ff8c00 !important; /* naranja */

    font-weight: 700;

    transition: .25s;

}



    /* HOVER */



    .menu-link-dron:hover {

        color: #dc3545 !important; /* rojo */

    }





.menu-title {

    font-size: 14px;

    font-weight: 600;

    color: #6c757d;

    letter-spacing: .5px;

    text-transform: uppercase;

}



@media (max-width:768px) {



    .icon-scroll {

        overflow-x: scroll !important;

        -webkit-overflow-scrolling: touch;

        scrollbar-width: auto;

    }



        .icon-scroll::-webkit-scrollbar {

            height: 8px;

        }



        .icon-scroll::-webkit-scrollbar-thumb {

            background: #198754;

            border-radius: 20px;

        }



        .icon-scroll::-webkit-scrollbar-track {

            background: #dfe5df;

        }

}



.selector-modal {

    width: 130px;

    height: 38px;

    display: grid;

    grid-template-columns: 38px 1fr 38px;

    border: 1px solid #198754;

    border-radius: 7px;

    overflow: hidden;

}



.btn-modal-cantidad,

.txt-modal-cantidad {

    min-width: 0;

    border: 0;

    outline: none;

    text-align: center;

    font-weight: 800;

}



.btn-modal-cantidad {

    background: #eef8f2;

    color: #198754;

    font-size: 18px;

    cursor: pointer;

}



    .btn-modal-cantidad:hover {

        background: #198754;

        color: #ffffff;

    }



.txt-modal-cantidad {

    width: 100%;

    background: #ffffff;

    color: #212529;

    -moz-appearance: textfield;

}



    .txt-modal-cantidad::-webkit-inner-spin-button {

        appearance: none;

    }



.presupuesto-item {

    position: relative;

    gap: 10px;

}



.js-modal-estado {

    position: absolute;

    right: 0;

    bottom: -15px;

    font-size: 11px;

}