input#empty_field{
  display: none !important;
}

@media print {
  body.single, body.page, body.archive{
    margin-left: 0 !important;
  }
}

table.table td{
  padding: 2px !important;
  background-color: #d7d7d7 !important;
}

.title-theme{
  color: #000;
  font-weight: bold;
  padding: 10px;
  margin: 5px 0;
  background-color: #d7d7d7;
  border-end-end-radius: 30px;
  border-top-right-radius: 30px;
  font-size: 18px;
  text-transform: uppercase;

}

.color-titulo, h1{
    color: #f39200;
}
.table-responsive{
  min-height: 50vh;
}
.color-link{
  color: #0d6efd;
}

.cn-text-container{
  color: #9d9d9c;
}

.custom-icon{
  width: 20px;
  height: auto;
}

/*
====================================
scrollbar
====================================
*/
::-webkit-scrollbar{
  width:5px;
}
::-webkit-scrollbar-track{
  background:#fff;
}
::-webkit-scrollbar-thumb{
  background:#ddd;
  border-radius:5px;
}
::-webkit-scrollbar-thumb:hover{
  background:#ccc;
}


/*
====================================
tooltip
====================================
*/


/*
====================================
tooltip
====================================
*/
.custom-tooltip {
    position: relative;
    display: inline-block;
}

.custom-tooltip .custom-tooltiptext {
    visibility: hidden;
    opacity: 0;
    width: 280px;
    max-width: calc(100vw - 40px);
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1000;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    box-sizing: border-box;
    /* Prevenir que el tooltip cause overflow */
    word-wrap: break-word;
    hyphens: auto;
}

.custom-tooltip .custom-tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

/* Estados de alineación para JavaScript */
.custom-tooltip.align-left .custom-tooltiptext {
    left: 0;
    transform: translateX(0);
}

.custom-tooltip.align-right .custom-tooltiptext {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.custom-tooltip.align-left .custom-tooltiptext::after {
    left: 20px;
    margin-left: 0;
}

.custom-tooltip.align-right .custom-tooltiptext::after {
    left: auto;
    right: 20px;
    margin-left: 0;
}

/* Activación del tooltip */
.custom-tooltip:hover .custom-tooltiptext,
.custom-tooltip.active .custom-tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Estilos específicos para móviles */
@media (max-width: 768px) {
    .custom-tooltip .custom-tooltiptext {
        font-size: 14px;
        padding: 12px;
        width: 280px;
        max-width: calc(100vw - 20px); /* Menos margen en móviles */
    }
}

@media (max-width: 480px) {
    .custom-tooltip .custom-tooltiptext {
        width: 250px;
        max-width: calc(100vw - 10px);
        padding: 10px;
        font-size: 13px;
    }
}

body {
    overflow-x: hidden;
}

/*
====================================
input date y time clickeable enteramente
====================================
*/
input[type="date"] {
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}
input[type="time"] {
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  background: transparent;
  bottom: 0;
  color: transparent;
  cursor: pointer;
  height: auto;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: auto;
}

/*
====================================
quitar flecha de campos numericos
====================================
*/


input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/*quitar flechas Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/*
====================================
menu
====================================
*/

header nav button.menu-toggle{
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 20px 20px 20px auto;
  font-size: 25px;

}

header nav div.menu-menu-principal-container{
  margin: 20px;
}

header nav div.menu-menu-principal-container ul{
  justify-content: flex-end;

}

header nav div.menu-menu-principal-container ul li{
  padding-right: 30px;
  text-align: right;

}

/*
====================================
spinners
====================================
*/

.lds-ellipsis {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 14px;
}
.lds-ellipsis div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #9d9d9c;
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.lds-ellipsis div:nth-child(1) {
  left: 8px;
  animation: lds-ellipsis1 0.6s infinite;
}
.lds-ellipsis div:nth-child(2) {
  left: 8px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(3) {
  left: 32px;
  animation: lds-ellipsis2 0.6s infinite;
}
.lds-ellipsis div:nth-child(4) {
  left: 56px;
  animation: lds-ellipsis3 0.6s infinite;
}
@keyframes lds-ellipsis1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes lds-ellipsis3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes lds-ellipsis2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/*
====================================
Tablas
====================================
*/

.table-responsive{
  max-height: 100vh;
  overflow: auto;
}

/*
====================================
WooCommerce
====================================
*/

.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) #respond input#submit.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) a.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) button.button.alt,
.woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)) input.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce #respond input#submit.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce a.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce button.button.alt,
:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce input.button.alt {
    background-color: #f39200 !important;
}

/*
====================================
The following CSS can be used to create a "fade-in" effect for your lazy-loaded images (LiteSpeed Cahe)
====================================
*/

/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}