@import url('https://fonts.cdnfonts.com/css/jockey-one');


.login-validate{
    background-image: url(../assets/img/login_imagen.jpg);
}

#UserEmail, #UserPass{
    color: burlywood !important;
}

.table-margin{
    margin-left: 15px !important;
    margin-right: 15px !important;
}

table{
    border-collapse: collapse; /* Colapsar bordes */
    width: 100%; /* Ancho de la tabla */
    font-size: 11px !important;
}

table tbody td button{
    font-size: 9px !important;
    padding: 0px 12px !important;
    margin: 1px 1px !important;
}

.table-container{
    max-height: 60vh !important;
    overflow-y: auto !important;
}

.modal-header{
    background-color: orangered !important;
    color: white !important;
}

.form-group{
    padding-bottom: 10px !important;
    margin: 1px 0 0 0 !important; 
}

.titulo_modal{
    font-family: 'Jockey One', sans-serif;
    font-size:24px !important;
}

.formato_celda_izquierda{
    text-align: left !important;
}

.contenido-precios{
    height: 60vh;
    overflow-y: auto;
}
.boton-eliminar {
    background-color: red; /* Cambiar el fondo a rojo */
    border-color: darkred; /* Cambiar el borde a rojo oscuro */
    color: red !important; /* Cambiar el texto a blanco */
}

.btn-eliminar{
    color: red;
}

select {
    appearance: none; /* Eliminar el estilo por defecto del select */
    -webkit-appearance: none; /* Para Safari */
    -moz-appearance: none; /* Para Firefox */
    background-color: white;
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 16px;
    width: 200px; /* Ajusta según tus necesidades */
    cursor: pointer;
}

/* Contenedor para el select */
.select-container {
    position: relative;
    display: inline-block;
}

/* Triángulo del lado derecho */
.select-container::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 10px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid black;
    transform: translateY(-50%);
    pointer-events: none; /* Asegura que el triángulo no interfiera con el click */
}
.btn-sm {
    font-size: 0.75rem; /* Ajusta el tamaño del texto en los botones */
    padding: 0.25rem 0.5rem; /* Ajusta el padding en los botones */
}
.btn-danger {
    background-color: #dc3545 !important; /* Color de fondo de peligro */
    border-color: #dc3545 !important;     /* Borde rojo */
    color: white !important;              /* Texto blanco */
    margin: 0px 0px;
    padding: 0.25rem 0.5rem; /* Ajusta el padding en los botones */
}
.btn-warning {
    background-color: #dc5 !important; /* Color de fondo de peligro */
    border-color: #d4322245 !important;     /* Borde rojo */
    color: white !important;              /* Texto blanco */
    margin: 0px 0px;
    padding: 0.25rem 0.5rem; /* Ajusta el padding en los botones */
}
.boton-eliminar {
    background-color: transparent; 
    border: none;
    color: #000;
}
.boton-eliminar:hover {
    background-color: rgba(0, 0, 0, 0.1); 
}
.btn {
    padding: 0.25rem 0.5rem; /* Ajusta el padding según sea necesario */
    font-size: 0.875rem; /* Ajusta el tamaño de fuente si es necesario */
}
.btn-sm {
    padding: 0.25rem 0.5rem; /* Ajusta el padding según sea necesario */
    font-size: 0.75rem; /* Ajusta el tamaño de fuente si es necesario */
}
.custom-card-title {
    font-size: 20px;
}
.custom-card-text {
    font-size: 14px;    
}
.button-group .btn {
    padding: 0.25rem 0.5rem; /* Ajusta el padding según sea necesario */
    font-size: 0.75rem; /* Ajusta el tamaño de fuente si es necesario */
    margin-top: 10px;
}
.card-body.custom-card-body {
    position: relative; /* Asegura que los elementos se posicionen correctamente dentro de la tarjeta */
    padding: 1rem; /* Ajusta el espacio interno si es necesario */
    background-color: #fff; /* Asegúrate de que el fondo sea blanco o el color deseado */
    border-radius: 0.25rem; /* Opcional: Añade bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Ajusta el efecto de sombra para simular 3D */
}
.custom-card-width {
    max-width: 400px; /* Ajusta el valor según el tamaño deseado */
    width: 100%; /* Asegura que el card use el ancho disponible */
}
.button-group {
    margin-top: 1rem; /* Espacio entre el contenido y los botones */
}
.img-reducida {
    width: 30%;
}
.input-group {
    display: flex;
    align-items: center;
}
.input-group-append {
    display: flex;
    align-items: center;
}
.text-tight{
    font-size: 9px;
}
.mt-5{
    margin-top: 5vh;
}

.mt-2{
    margin-top: 2vh;
}
input[readonly] {
    background-color: #e0f7fa; /* Color de fondo azul claro */
    color: #0277bd; /* Color de texto azul oscuro */
    cursor: not-allowed; /* Cambia el cursor para indicar que no son editables */
}
.selected {
    background-color: rgba(255, 255, 255, 0.2); /* Blanco con 50% de transparencia */
    color: orange; /* Ajusta el color del texto según el contraste que prefieras */
}
#UserEmail, #UserPass {
    text-transform: uppercase;
}
.texto-rojo {
    color: red;
    font-size: 18px; 
}
.table-row:nth-child(odd) {
    background-color: #3380b0; /* Color para filas impares */
}
.table-row:nth-child(even) {
    background-color: #e7f0f1fa; /* Color para filas pares */
}
.input-text {
    text-align: right; /* Alinear texto a la derecha */
    padding-right: 10px; /* Agregar un espacio a la derecha para que el texto no se recorte */
    width: 100%; /* Asegurarte de que el campo ocupe el ancho completo de su contenedor */
}
.row {
    margin-bottom: 1px; /* Ajusta el espacio entre las filas */
}
.row > div {
    margin-bottom: 1px; /* Ajusta el espacio entre columnas dentro de la fila */
}
.form-group {
    margin-bottom: 0; /* Asegura que no haya margen adicional en el grupo de formulario */
}
.form-group label {
    display: block; /* Asegura que el label ocupe todo el ancho */
    margin-bottom: 2px; /* Espacio entre el label y el input */
    font-size: 14px; /* Ajusta el tamaño de la fuente si es necesario */
}

.form-group input {
    margin-top: 0; /* Asegúrate de que no haya margen arriba */
    padding: 0px; /* Ajusta el padding del input */
    height: 24px; /* Asegura que la altura sea consistente */
}
label {
    margin-right: 5px; /* Puedes ajustar a 0 si es necesario */
    color: #000000; /* Negro puro */
}
input {
    margin-left: 0;
    padding-left: 5px; /* Para un poco de espacio interno */
}

/* FLUXAR*/
.main-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #2c3e50;
    color: white;
    z-index: 999;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    flex-wrap: wrap;
}
.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.user-info img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.navbar-menu {
    display: flex;
    gap: 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.navbar-menu > li {
    position: relative;
}
.navbar-menu a {
    color: white;
    text-decoration: none;
    padding: 8px 10px;
    display: block;
}
.navbar-menu li:hover > ul {
    display: block;
}
.navbar-menu ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #34495e;
    padding: 0;
    margin: 0;
    list-style: none;
    min-width: 180px;
    z-index: 1000;
}
.navbar-menu ul li a {
    padding: 10px;
    white-space: nowrap;
}

/* REGISTRO MANUAL*/
body{font-family: Arial, Helvetica, sans-serif; margin:20px;}
#reader { 
    width: 320px; 
}

.info { 
    margin-top: 10px; 
    padding: 10px; 
    border: 1px solid #ddd; 
    width: 600px;
}
.btn { 
    padding:8px 12px; 
    margin:4px; 
    cursor:pointer; 
}
.btn-primary{
    background:#2d89ef;
    color:white;
    border: none;
}
.btn-success{
    background:#28a745;
    color:white;
    border:none;
}
.btn-warning{
    background:#ffc107;
    color:#222;
    border:none;
}
.input-group {
    display: flex;
    align-items: stretch;
}
#graficoTickets {
  height: 500px; /* Ajusta la altura según tus necesidades */
}
#metodo_pago {
    appearance: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
}
.h3 {
    font-size: 10px !important; /* Título más pequeño */
    font-weight: bold !important; /* Mantener negrita */
}
.table-olive.table-bordered th,
.table-olive.table-bordered td {
    border: 1px solid #4A7043 !important; /* Bordes verde oscuro */
}
.table-olive thead {
    background-color: #6B8E23 !important; /* Verde olivo oscuro */
    color: white !important;
}
.table-olive tbody tr {
    background-color: #F5F6CE !important; /* Verde olivo claro */
}
.table-olive tbody th {
    background-color: #80ba57 !important; /* Verde olivo claro */
}
.table-olive tfoot {
    background-color: #80ba57 !important; /* Verde olivo claro */
    font-weight: bold !important;
}
.table-olive .text-end {
    text-align: right !important;
    color: black !important; /* Color negro para valores numéricos */
    font-weight: bold !important; /* Negrita para valores numéricos */
}
.table-olive .text1 {
    text-align: left !important;
    color: black !important; /* Color negro para valores numéricos */
    font-weight: bold !important; /* Negrita para valores numéricos */
}
    /* Alternar colores entre filas */
    #detallePagosBody tr:nth-child(odd) {
        background-color: #ffffff !important; /* Blanco */
    }

    #detallePagosBody tr:nth-child(even) {
        background-color: #e6f0ff !important; /* Azul claro */
    }

    /* Efecto hover (iluminar al pasar el mouse) */
    #detallePagosBody tr:hover {
        background-color: #b8daff !important;
        cursor: pointer;
    }

    /* Encabezado con letras negras y negrita */
    .table thead th {
        color: black !important;
        font-weight: bold !important;
        background-color: #a4f3a4 !important; /* verde suave o el que quieras */
    }