:root{
    --fuente-titulo: 'Lato', sans-serif;
}
*, *:before, *:after {
    box-sizing: inherit;
}
html {
    box-sizing: border-box;
}
body{
    font-family: var(--fuente-titulo);
}
.contenedor{
    width: 90%;
    margin: 0 auto;
}
.table_tiendas{
   border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #ccc;
}
.table_tiendas thead{
    background-color: #f5f5f5;
}
.table-striped thead tr th {
    background-color: #f5f5f5;
    font-weight: bold;
    position: relative;
  }
.table_tiendas tr th{
    padding: 5px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #ccc;
    font-size: 0.75rem;
}
.table_tiendas th {
    background-color: #f5f5f5;
    font-weight: bold;
  }

  .table_tiendas tr:hover {
    background-color: #f0f0f0;
  }
.table_tiendas tbody td{
    padding: 5px;
    border: 1px solid #dbdada;
    font-size: 0.75rem;
}
.table_tiendas tbody{
    max-height: 240px; /* Ajusta la altura máxima del área de contenido según tus necesidades */
    overflow: scroll; /* Agrega una barra de desplazamiento vertical para el área de contenido */
}
.table_tiendas thead {
    position: sticky;
    top: 65.5px;/* Cambia el color de fondo según tu diseño */
    z-index: 2; /* Asegura que la cabecera esté por encima del contenido de la tabla */
    background-color: red;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.table_tiendas caption {
    position: sticky;
    top: 0;/* Cambia el color de fondo según tu diseño */
    z-index: 2; /* Asegura que la cabecera esté por encima del contenido de la tabla */
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

}
/* Estilos para las clases de Bootstrap (opcional) */
.table-striped tbody tr:nth-of-type(2n) {
  background-color: #f7f7f7;
}
.icon-edit{
    padding: 5px;
    cursor: pointer;
}
.info_tiendas{
    margin: 0;
    font-size: 13px;
    color: #89949d;
    font-weight: normal;
}
.agregar_list{
    color: #50ab1c;
    position: absolute;
    left: 10px;
    top: 5px;
    cursor: pointer;
    font-size: 20px;
}
.relative{
    position: relative;
}
.flex{
    display: flex;
    gap: 10px;
    align-items: center;
}
.scroll{
    overflow-x: scroll;
}
.delete-list{
    cursor: pointer;
    background-color: #f25454;
    padding: 5px;
    border-radius: 5px;
    margin: 0 5px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
.lists_prices{
    display: flex;
    justify-content: center; /* Distribuye los elementos equitativamente */
  }
.display_flex{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Crea 3 columnas de igual tamaño */
}
.item{
    width: 440px; /* Establece el ancho deseado para los elementos hijos */
    padding: 10px;
    margin: 5px;
   
}
.btn_abs{
    position: absolute;
    right: 5px;
    top: 5px;
    cursor: pointer;
    color: #fff;
    background-color: #6dc24c;
    padding: 2px 5px;
    border-radius: 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.font-bold{
    font-weight: bold;
}
.txt_rigth{
    text-align: right;
}
.d-flex{
    display: flex;
    justify-content: space-between;
}

/* Estilos para navegadores webkit (Chrome, Safari) */
/* Ancho y color de la barra de desplazamiento */
table.tabla.table_tiendas.table-striped::-webkit-scrollbar {
    width: 12px!important /* Ancho de la barra de desplazamiento vertical */
  }
  
  /* Estilos para la parte del "pulgar" de la barra de desplazamiento */
  table.tabla.table_tiendas.table-striped::-webkit-scrollbar-thumb {
    background-color: blue!important; /* Cambia el color del pulgar de la barra de desplazamiento a azul */
    border-radius: 6px!important; /* Radio de borde del pulgar */
  }
  
  /* Estilos para navegadores no webkit (Firefox, Edge) */
  /* Ancho y color de la barra de desplazamiento */
  table.tabla.table_tiendas.table-striped {
    scrollbar-width: thin!important; /* Delgado para mostrar solo cuando se necesita */
    scrollbar-color: blue transparent!important; /* Cambia el color de la barra de desplazamiento a azul */
  }
  .table-striped thead th.border-left, .table_tiendas tbody td.border-left{
    border-left: 2px solid #b7b7b7;;
  }
  .table-striped thead th.border-rigth, .table_tiendas tbody td.border-rigth{
    border-right: 2px solid #b7b7b7;;
  }
  .formatt_arrows{
    cursor: pointer;
    font-size: 1.3rem;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #281cab;
  }

.add_def{
    position: sticky;
    left: 5px;
    top: 5px;
    cursor: pointer;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 1.3rem;
    background-color: #0b7466;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
#table_productos {
    min-width: 350px;
    max-width: 30%;
    overflow: scroll;
}
.copy_price{
    position: absolute;
    top: 5px;
    left: 5px;
    margin: 0 5px;
    cursor: pointer;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    background-color: rgba(237,182,12,1);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.moneda {
    color: rgb(53, 151, 36);
    font-weight: bold;
}

.read_only{
    background-color: #f9c357;
    padding: 5px 10px;
    margin: 0 5px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    cursor: pointer;
}
.show_pesos{
    background-color: #a257f9;
    padding: 5px 10px;
    margin: 0 5px;
    color: white;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    cursor: pointer;
}
.dolares{
    background-color: #b6ff76;
    padding: 5px 10px;
    margin: 0 5px;
    color: rgb(129, 129, 129);
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    cursor: pointer;
}
.dolar_peso{
    background-color: #ff76b6;
    padding: 5px 10px;
    margin: 0 5px;
    color: rgb(255, 255, 255);
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2rem;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
    cursor: pointer;
}
.sort_table{
    cursor: pointer;
    font-size: 0.8rem;
    color: #7c7c7c;
    padding: 5px 10px;
    position: absolute;
    bottom: 0;
    left: 0;
    transition: color .300s ease-in-out;
}
.sort_table:hover{
    color: #0073ff;
}
.formmat_fecha{
    font-size: 0.7rem;
    color: #6f6f6f;
}
.formmat_fecha span{
    font-weight: normal;
}
.fs-7{
    font-size: 0.7rem;
    padding: 3px 0;
}
.table_tiendas tr th.productos_table p{
    font-size: 0.6rem;
    width: 100px;
}
.error_fatal{
    color: #ffffff;
    font-weight: bold;
    background-color: #ff6f6f;
    padding: 4px 5px;
    margin: 0px 2px;
    border-radius: 15px;
}
.aprobar{
    color: #ffffff;
    font-weight: bold;
    background-color: #6ad36a;
    padding: 4px 5px;
    margin: 0px 2px;
    border-radius: 15px;
    cursor: pointer;
}
.version_list{
    position: absolute;
    bottom: 5px;
    right: 5px;
    cursor: pointer;
    color: #fff;
    background-color: #4c6cc2;
    padding: 3px 5px;
    border-radius: 5px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
.mb-2{
    margin: 10px;
}
.nota_warn{
    color: #ffffff;
    font-weight: bold;
    background-color: #ffa600;
    padding: 4px 5px;
    margin: 0px 2px;
    border-radius: 5px;
    font-size: 0.7rem;
    max-width: 600px;
}
.es_default{
    font-size: 0.6rem;
    color: #00aaff;
}
 .table_tiendas tr.focus_table td{
    background-color: #fffdea;
    border: 1px solid #ffe4a9;
}
.table_tiendas tr.focus_table th{
    background-color: #efe6c7;
    border: 1px solid #dfbc72;
}
.table_tiendas tr.focus_table td.border-rigth{
    border-right: 2px solid #ffe4a9;
}
.table_tiendas tr.focus_table td.border-left{
    border-left: 2px solid #ffe4a9;
}
.disabled{
    background: #f4f4f4;
}
.send_price{
    position: absolute;
    bottom: 5px;
    left: 5px;
    margin: 0 5px;
    cursor: pointer;
    color: #fff;
    padding: 5px;
    border-radius: 5px;
    background-color: rgb(0, 159, 187);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}
.actions_tables{
    padding: 0.5rem 1rem;
    background: #6fbbff;
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
input#buscador {
    border: 1px solid #c7c7c7;
}
.btn_search{
    margin: 0 0.5rem;
    padding: 0.5rem;
    font-weight: bold;
    color: #b9ddff;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid #b9ddff;
    box-shadow: rgba(104, 182, 255, 0.2) 0px 2px 8px 0px;
    font-size: 0.5rem;

    transition: all 0.3s ease-in-out;
}
.btn_search:hover{
    background-color: #a3cff7;
    color: white;
    box-shadow: rgb(0 0 0 / 8%) 1.95px 1.95px 2.6px;
}
.alert.alert-danger{
    background: #ffbfbf;
    padding: 0.4rem;
    font-size: 0.8rem;
    color: #af2424;
    font-weight: bold;
    border-left: 4px solid #af2424;
}
.font-normal{
    font-weight: normal;
}
.tc_actual_view{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.mxn_manual{
    margin: 0.2rem;
    color: #449ae5;
    font-size: 1rem;
    position: absolute;
    bottom: 5px;
    left: 5px;
    cursor: pointer;
}
.edita_price{
    margin: 0.2rem;
    color: #a77a00;
    font-size: 0.8rem;
    position: absolute;
    cursor: pointer;
    bottom: 5px;
    left: 5px;
}
.btn_nextDay.toggle-on, .btn_nextDay.toggle-off:hover{
    cursor: pointer;
    font-size: 1.3rem;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #4e1cab;
    border: 2px solid #4e1cab;

    transition: all 0.3s ease-in-out;
}
.btn_nextDay.toggle-off, .btn_nextDay.toggle-on:hover{
    cursor: pointer;
    font-size: 1.3rem;
    color: #ffffffb6;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #4e1cab8a;
    border: 2px solid #4e1cab;
}
.order_list{
    cursor: pointer;
    font-size: 1.3rem;
    color: #fff;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: #ab1c74;
}
.alert-warning-fix{
    position: fixed;
    background: #ffeda9;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ad8100;
    border-left: 5px solid #ad8100;
    max-width: 520px;
}

.table_tiendas tr.focus_table td.tomorrow_price{
    position: relative;
    background-color: #f5f2cf;
    border: 1px solid #dfc692;
}
.table_tiendas tbody td.tomorrow_price{
    background-color: #eff9ff;
    border: 1px solid #a8d0d9
}
input[type=text].input-read{
    border: none;
    background: transparent;
    padding: 5px;
    border-radius: 5px;
    color: #535353;
}