:root {
    --theme-color: #FAB702;
    --theme-color-hover: #c59100;
}
a {
    color: #FAB702;
    text-decoration: none;
}
/* Fuentes Futura anteriores - comentadas para poder volver si es necesario
@font-face {
    font-family: FuturaStd-Light;
    src: url(../fonts/FuturaStd-Light.otf);
}
@font-face {
    font-family: FuturaStd-Medium;
    src: url(../fonts/FuturaStd-Medium.otf);
}
@font-face {
    font-family: FuturaStd-Bold;
    src: url(../fonts/FuturaStd-Bold.otf);
}
body {
    font-family: FuturaStd-Light, sans-serif;
    color: #666666;
}
*/

/* Figtree - Nueva fuente principal del sitio */
@font-face {
    font-family: 'Figtree-Light';
    src: local('Figtree Light'), local('Figtree-Light');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Figtree-Medium';
    src: local('Figtree Medium'), local('Figtree-Medium');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Figtree-Bold';
    src: local('Figtree Bold'), local('Figtree-Bold');
    font-weight: 700;
    font-style: normal;
}
body {
    font-family: 'Figtree', sans-serif;
    font-weight: 300;
    color: #666666;
}
.text-theme {
    color: var(--theme-color);
    text-decoration: none;
}
a.text-theme:hover {
    color: var(--theme-color-hover);
    text-decoration: underline;
}
.bg-theme {
    background-color: var(--theme-color);
}
.btn-theme {
    color: #000;
    background-color: var(--theme-color);
    border-color: var(--theme-color);
}
.btn-theme:hover {
    color: #000;
    background-color: var(--theme-color-hover);
    border-color: var(--theme-color-hover);
}
.toastify.success {
    background: #198754 !important;
}
.toastify.error {
    background: #dc3545 !important;
}
.toastify.warning {
    color: #000 !important;
    background: #ffc107 !important;
}
.toastify.info {
    background: #0d6efd !important;
}
.header {
    position: relative;
    padding: 15px 0;
    z-index: 10;
}
.header * {
    position: relative;
    z-index: 2;
}
.overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}
.dark-4 {
    background: rgba(0, 0, 0, 0.4);
}

.card-default
{
    border-bottom: 5px solid #DDDDDD !important;
    border-radius: 6px !important;
    border-color: #DDDDDD;
}
.card-default > .card-header {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.card-success
{
    border-bottom: 5px solid green !important;
    border-radius: 6px !important;
    border-color: #d6e9c6;
}
.card-success > .card-header {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
}
.card-warning
{
    border-bottom: 5px solid orange !important;
    border-radius: 6px !important;
}
.card-warning > .card-header {
    color: #856404;
    background-color: #fff3cd;
    border-color: #ffeeba;
}
.img-background {
    background: #FFF url(/storage/images/bg-1.png) repeat-x bottom;
}
.mh-162 {
    min-height: 162px !important;
}
.table.especificaciones th img {
    width: 30px;
}
div.heading-title {
    position: relative;
    margin-bottom: 40px;
}
div.heading-title.heading-dotted {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX///+QkJApn3LQAAAAAnRSTlMAgJsrThgAAAAOSURBVHheYwCCUAdcJAAnnALqo5TBzAAAAABJRU5ErkJggg==) repeat-x center;
}
div.heading-title.text-center h1, 
div.heading-title.text-center h2, 
div.heading-title.text-center h3, 
div.heading-title.text-center h4, 
div.heading-title.text-center h5, 
div.heading-title.text-center h6 {
    padding-left: 15px;
    padding-right: 15px;
}

div.heading-title h1, 
div.heading-title h2, 
div.heading-title h3, 
div.heading-title h4, 
div.heading-title h5, 
div.heading-title h6 {
    margin: 0;
    padding: 0;
    background-color: #fff;
    position: relative;
    display: inline-block;
    padding-left: 0;
    padding-right: 15px;
}
h1 > span, 
h2 > span, 
h3 > span, 
h4 > span, 
h5 > span, 
h6 > span{
    color: var(--theme-color);
}
.offcanvas-bottom {
    height: 50vh !important;
}
.md-search-result {
    background-color: #fff;
    position: fixed;
    top: 70px;
    border: solid 1px #666;
    padding: 10px;
    width: 100%;
    left: 0;
    height: calc(100vh - 70px);
    overflow: hidden;
}
.quick-cart .card-body{
    flex: 1 1 auto;
    padding: 1rem 1rem;
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
}
p.title {
    font-size: 1.5rem;
    margin-bottom: 0px;
    font-weight: bolder;
}
div.image-overlay{
    background-color: rgb(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ============================================ */
/* Tooltip personalizado para validación de filtros */
/* ============================================ */

/* Estilo para selects con error de validación */
.form-select.is-invalid,
.form-control.is-invalid {
    border-color: #dc3545 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Tooltip personalizado sin dependencia de Bootstrap/Popper */
.custom-filter-tooltip {
    /* position es controlado por JavaScript (fixed o absolute) */
    background-color: #dc3545;
    color: white;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    max-width: 300px;
    min-width: 200px;
    width: max-content;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
}

.custom-filter-tooltip::before {
    content: '';
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border: 8px solid transparent;
    border-right-color: #dc3545;
}

/* Flecha hacia arriba cuando el tooltip está debajo del elemento */
.custom-filter-tooltip[data-placement="bottom"]::before {
    right: auto;
    left: 20px;
    top: -8px;
    transform: none;
    border: 8px solid transparent;
    border-bottom-color: #dc3545;
    border-right-color: transparent;
}

/* Estilos específicos cuando el tooltip está en el sidebar */
.offcanvas-body .custom-filter-tooltip,
#sidebar-filtros-content .custom-filter-tooltip {
    max-width: 100%;
    font-size: 12px;
}