/*ESTILOS DEL TEMA ECO2*/
:root {
    --primary: #1e7a46;
    /* verde protagonista */
    --accent: #ffd166;
    /* acento cálido */
    --ink: #1f2937;
    /* texto */
    --muted: #6b7280;
    /* texto suave */
    --bg: #f7faf8;
    /* fondo sutil */
}

/*ESTILOS DEL TEMA ECO2*/

img {
    width: 100%;
}

ol,
ul {
    padding-left: 0rem !important;
}

ul,
ol {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-left: 0;
}

body {
    font-family: 'Roboto', sans-serif;
    min-height: 100vh;
}

html {
    scroll-padding-top: 70px;
    /* lo que mide tu nav fijo */
}

html,
body {
    height: 100%
}

body {
    color: var(--ink);
    background: var(--bg)
}

.carousel-item img {
    width: 100%;
    height: 600px;
    max-height: 600px;
    object-fit: cover;
    object-position: center;
}

.custom-tooltip {
    --bs-tooltip-bg: #044620;
    /* Fondo */
    --bs-tooltip-color: #ffd166;
    /* Texto */
    --bs-tooltip-border-radius: 0.75rem;
    --bs-tooltip-padding-x: 0.75rem;
    --bs-tooltip-padding-y: 0.5rem;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.popover.fade {
    transition: opacity .12s ease, transform .18s ease;
    transform: translateY(4px);
}

.popover.show {
    transform: translateY(0);
}


/*BOTONERAS CON ICONOS*/
.icon-nav {
    font-size: 2em;
}

/*BOTONERAS CON ICONOS*/

/*Para el nav del index*/
/* Submenús para dropdown en hover */
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -0.25rem;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

/*Para el nav del index*/

.animate-ampliar {
    animation: ampliar 2s ease-in-out infinite;
}

@keyframes ampliar {
    0% {
        transform: scale(100%);
    }

    50% {
        transform: scale(110%);
    }

    100% {
        transform: scale(100%);
    }
}


/*para los botones de pagination*/
.page-item.active .page-link {
    background-color: var(--primary) !important;
}

/*para los botones de pagination*/


/*para los head de datatables*/

.table th,
.table td {
    vertical-align: middle;
}

.table thead {
    background: linear-gradient(90deg, #1e7a46, #3bb273);
    color: #fff;
}

table.dataTable thead th {
    background: linear-gradient(#1e7a46 0%, #76b698 100%) !important;
    color: white !important;
    font-weight: bold;
    text-transform: capitalize;
    border: none !important;
    padding: 12px 10px;
    font-size: 14px;
}

table.dataTable thead {
    margin-top: 5px !important;
}

table.dataTable {
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    border: none !important;
}

.dt-search {
    margin-bottom: 7px;
}

/*para los head de datatables*/

/*para los dropdwown de datatables*/
table.dataTable thead th:first-child {
    border-top-left-radius: 8px;
}

table.dataTable thead th:last-child {
    border-top-right-radius: 8px;
}

.dropdown-menu {
    z-index: 9999 !important;
    position: absolute !important;
}

table,
.dataTables_wrapper,
.dataTables_scrollBody {
    overflow: visible !important;
}

/*para los dropdwown de datatables*/


/* Cambiar color de los dots del loader */
div.dt-processing>div:last-child>div:nth-child(1) {
    background-color: var(--primary) !important;
}

div.dt-processing>div:last-child>div:nth-child(2) {
    background-color: var(--primary) !important;
}

div.dt-processing>div:last-child>div:nth-child(3) {
    background-color: var(--primary) !important;
}

div.dt-processing>div:last-child>div:nth-child(4) {
    background-color: var(--primary) !important;
}

/* Cambiar color de los dots del loader */


/*PARA RECORTAR LAS IMÁGENES DE LAS CARDS, PARA DAR UNA OPCION DE RECORTE*/
.img-cortada {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: .5rem .5rem 0 0;
}

.navbar-brand strong {
    letter-spacing: .2px
}

.chip {
    --bs-btn-padding-y: .375rem;
    --bs-btn-padding-x: .85rem;
    --bs-btn-font-size: .9rem
}

.chip.active,
.chip:hover {
    background: var(--primary) !important;
    color: #fff !important
}

.hero {
    background: linear-gradient(120deg, rgba(30, 122, 70, .9), rgba(30, 122, 70, .65)), url('https://images.unsplash.com/photo-1514996937319-344454492b37?q=80&w=1600&auto=format&fit=crop') center/cover no-repeat;
    color: #fff
}

.hero .form-control::placeholder {
    color: #e5e7eb
}

.carousel-caption {
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, .35);
    border-radius: 14px
}

/* Slide: altura uniforme */
#promoCarousel .carousel-item>img {
    height: clamp(220px, 40vw, 420px);
    width: 100%;
    object-fit: cover
}

/* Buscador protagonista en HERO */
.search-hero .input-group {
    border-radius: 14px;
    overflow: hidden
}

.search-hero .form-control {
    padding-left: .25rem
}

.search-hero .input-group .form-control {
    box-shadow: none
}

.search-hero .input-group.input-group-lg .input-group-text {
    padding-left: 1rem;
    padding-right: .75rem
}

.search-hero .btn {
    font-weight: 600
}

/* Card contenedor del buscador + tip */
.search-card {
    background: #fff;
    border-radius: 14px;
    padding: 1rem
}

.search-tip {
    color: var(--muted)
}

.category-badge {
    /*position: absolute;*/
    background: var(--accent);
    color: #000;
    font-weight: 600;
    border-radius: 999px;
    padding: .25rem .6rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08)
}

.div-category-badge {
    padding: 0.75rem;
}

/*falta corregir esto*/
.category-badge-abs {
    position: absolute;
    background: var(--accent);
    color: #000;
    font-weight: 600;
    border-radius: 999px;
    padding: .25rem .6rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08)
}

.card-merchant {
    border: 0;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .06)
}

.card-merchant img {
    aspect-ratio: 4/3;
    object-fit: cover
}

.meta {
    font-size: .92rem;
    color: var(--muted)
}

.hours {
    font-size: .9rem
}

.hours .badge {
    font-weight: 600
}

.open-badge {
    background: #16a34a
}

.warning-badge {
    background: #ffc107
}

.closed-badge {
    background: #ef4444
}

.muted-link {
    color: inherit;
    text-decoration: none
}

.muted-link:hover {
    color: var(--primary)
}

.filter-bar {
    position: sticky;
    top: 64px;
    z-index: 1020;
    background: linear-gradient(#fff, #fff8)
}

.shadow-soft {
    box-shadow: 0 10px 25px rgba(0, 0, 0, .06)
}

footer a {
    color: inherit
}

/*hack para acomodar los input floating en selectize*/
.form-floating>.selectize-control {
    height: calc(3.5rem + 2px);
    /* igual al input normal */
}

.form-floating>.selectize-control .selectize-input {
    height: 100%;
    padding-top: 1.625rem;
    /* para que no se superponga con el label */
    padding-bottom: 0.625rem;
}

.form-floating>label {
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
    opacity: .65;
}

/*hack para acomodar los input floating en selectize*/

/*importnate para Accesibilidad: respetá usuarios con “reducir movimiento”.*/
@media (prefers-reduced-motion: reduce) {
    .animate__animated {
        animation: none !important;
    }
}

/*importnate para Accesibilidad: respetá usuarios con “reducir movimiento”.*/

/*para el link de whatsapp*/
.whatsapp_link_div {
    position: fixed;
    right: 10px;
    bottom: 20px;
    z-index: 1050;
    transform: none !important;
    animation: fadeIn 1s ease both;
}

/* Segundo botón */
.whatsapp_link_div:nth-of-type(2) {
    bottom: 60px;
}

/* Tercer botón */
.whatsapp_link_div:nth-of-type(3) {
    bottom: 120px;
}

.whatsapp_link_div {
    animation: fadeIn 1s ease both;
}

@keyframes fadeIn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.whatsapp_link_div svg {
    width: 80px;
    filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4));
}

.whatsapp_link_div circle {
    fill: #25d366;
}

.whatsapp_link_div path {
    fill: #fff;
}