@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(../materialdesignicons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(../materialdesignicons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(../materialdesignicons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
       
}


.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
    font-size: 24px;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  vertical-align: middle;
 /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;
  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;
  /* Support for IE. */
  font-feature-settings: 'liga';
}
/* CSS extraído del código seleccionado */
#infoCocina, #consulta {
	background: url(../Fotos/fondomarino.png);
	background-repeat: repeat;
}
/* Header */
#encabezado {
  margin-top: 0px;
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../Fotos/palapa1.png);
  border: none;
  margin-bottom: 0px;
  padding-top: 2px;
  padding-bottom: 2px;
  height: auto;
  border-bottom: 3px solid #bf0811;
}

.logo {
    background-color: none;
    height: auto;
    box-shadow: none;
    margin-top: 0px;
    padding-bottom: 5px;
    padding-top: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
.logo span {
    text-align: center;
    color: #002e82;
    font-size: 24px;
    margin-left: 20px;
    font-weight: bold;
  }
  
  #UserAct {
    margin-right: 20px;
    display: inline-block;
    text-decoration: none;
    box-shadow: none;
    text-align: center;
    text-shadow: none;
    color: #bf0811;
    padding-top: 10px;
    font-size: 20px;
  }
  
  .useract {
    display: none;
    color: #bf0811;
  }

 h3#titlemesas{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #002e82;
    text-decoration: none;
    text-shadow: none;
    margin: 5px;
    padding: 5px; /* Fondo rojo */
    border-bottom: 1px solid #002e82; /* Borde rojo */
    
} 

#links {
    margin: 10px auto;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 10px;
    justify-content: center;
    align-items: center;
    background: none;
}

#links1 {
    margin: 10px auto;
    padding: 0px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 5px;
    justify-content: center;
    align-items: center;
    background: none;
    width: 90%;
    cursor: pointer;
}

.btnlks {
    padding: 10px;
    border: 3px solid #002e82;
    justify-content: center;
    color: #002e82;
    background: none;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.btnwho {
    padding: 10px;
    border: 3px solid #002e82;
    justify-content: center;
    color: #002e82;
    background: none;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    border-radius: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Variantes de color para btnlks */
.btnlks.red-variant {
    border-color: #bf0811;
    color: #bf0811;
}

.btnlks.active {
    color: white;
    background: #002e82;
}

.btnlks.red-variant.active {
    color: white;
    background: #bf0811;
}

/* Efectos hover para mejor UX */
.btnlks:hover {
    background-color: rgba(0, 46, 130, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.btnlks.red-variant:hover {
    background-color: rgba(191, 8, 17, 0.1);
}

h2{
    font-size: clamp(18px, calc(5vw + 1rem), 24px);
}

/* Estilos responsivos para btnlks */
@media (max-width: 768px) {
    .btnlks {

        font-size: 11px;
    }
    
    #phtologo {
        display:none;
        
    }
       .btnlks .btntxt {
        display: inline-block !important;
    }
    
    .btnlks .iconmob {
        display: inline-block !important;
        font-size: 30px;
        margin-right: 0px;
    }

    #contentlf {
        display: grid;
        grid-template-columns: 1fr; /* Una sola columna en pantallas pequeñas */
    }

    #edoFactul {
        display: flex;
        flex-direction: row; /* Una sola columna en pantallas pequeñas */
    }

   
}

@media (max-width: 1024px) and (min-width: 769px) {
    .btnlks {

        font-size: 18px;
    }
    
    
     .btnlks .btntxt {
        display: inline-block !important;
    }
    
    .btnlks .iconmob {
        display: inline-block !important;
        font-size: 20px;
        margin-right: 5px;
    }

    #contentlf {
        display: grid;
        grid-template-columns:1fr 3fr; /* Una sola columna en pantallas pequeñas */
    }

    #edoFactul {
        display: flex;
        flex-direction: row; /* Una sola columna en pantallas pequeñas */
    }
}

/* Estilos para iconos y texto dentro de btnlks */
.btnlks .iconmob {
    margin-right: 5px;
}

.btnlks .btntxt {
    font-size: inherit;
}

/* Estilos específicos para diferentes tipos de botones en allaccess */
.btnlks#comandero {
    border-color: #bf0811;
    color: #bf0811;
}

.btnlks#bebidas {
    border-color: #bf0811;
    color: #bf0811;
}

.btnlks#report {
    border-color: #bf0811;
    color: #bf0811;
}

.btnlks#litsFact {
    border-color: #bf0811;
    color: #bf0811;
}

.btnlks#who, .btnlks#socialstuff, .btnlks#gps, .btnlks#factu {
    border-color: #bf0811;
    color: #bf0811;
}

/* Nota: Las clases .joaquin, .ezequiel, .magaly son para control de permisos de usuario */

/* Estilos adicionales para mejorar la accesibilidad */
.btnlks:focus {
    outline: 2px solid #4CAF50;
    outline-offset: 2px;
}

.btnlks:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}


/* Estilo para el contenedor de la barra de navegación */
nav.ctlmeS {
    background-color: rgba(151,182,211,0.8); /* Fondo azul oscuro */
    padding: 5px 10px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5); /* Sombra para dar profundidad */
    margin:5px; /* Separación inferior */
}

/* Estilo para la lista dentro de la barra de navegación */
nav.ctlmeS ul.ctlnav {
    list-style-type: none; /* Eliminar viñetas */
    padding: 5px; /* Espaciado interno */
    margin: 0px; /* Centrar el contenedor horizontalmente */
    display: grid; /* Mostrar los elementos en un grid */
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Columnas dinámicas */
    gap: 10px 50px; /* Espaciado entre los elementos */
    align-items: center; /* Alinear los elementos verticalmente */
    max-width: 100%; /* Asegurar que no exceda el ancho del contenedor padre */
    box-sizing: border-box; /* Espaciado uniforme entre los elementos */
}

/* Estilo para los elementos de la lista */
nav.ctlmeS ul.ctlnav li {
    margin: 0; /* Elimina márgenes adicionales */
    padding: 0px; /* Elimina padding adicional */
    display: flex; /* Asegura que los elementos sean flexibles */
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center;
    border: 2px solid white; /* Borde blanco */
    border-radius: 10px; /* Bordes redondeados */
    background-color: #002e82; /* Fondo azul */
    cursor: pointer; /* Cambia el cursor al pasar sobre el elemento */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
}

/* Estilo para los enlaces */
nav.ctlmeS ul.ctlnav li a {
    text-decoration: none; /* Eliminar subrayado */
    text-shadow: none;
    color: white; /* Color del texto */
    font-weight: bold; /* Texto en negrita */
    font-size: 14px; /* Tamaño del texto */
    padding: 10px 5px; /* Espaciado interno */
 
    transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
    text-align: center; /* Centrar el texto */
    display: block; 
}

/* Efecto al pasar el cursor sobre los enlaces */
nav.ctlmeS ul.ctlnav li:hover {
    background-color: #bf0811; /* Cambiar el color de fondo al pasar el cursor */
    transform: scale(1.02); /* Aumentar ligeramente el tamaño */
      box-shadow: inset 0 4px 12px rgba(0,0,0,0.4); /* Agregar sombra */
}

/* Estilo para el enlace activo */
nav.ctlmeS ul.ctlnav li a.active {
    background-color: #001a66; /* Fondo más oscuro para el enlace activo */
    color: #ffcc00; /* Texto amarillo */
}


/* Content */
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dos columnas iguales */
    gap: 5px;
    margin: 0 auto; /* Centra el contenido horizontalmente */
    padding: 0 0 50px 0; /* Elimina cualquier padding adicional */
    box-sizing: border-box;
    justify-content: center;
     height: 100%;
     min-height: 100vh;
    background: none;
}

#printtkt {
    grid-column: 1; /* Ocupa las dos primeras columnas */
    padding: 5px 5px 50px 5px;
    background: rgba(191, 8, 17, 1);
    margin: 5px;
    border-radius: 10px;
    height: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.4);
}

#printtkt .toptext, .toptextcls, .toptextped, .toptextcob, .toptextpcob, .pkdt, .toptextS {
    text-shadow: none;
    margin: 10px;
    font-weight: bold;
    font-size: 16px;
    text-wrap: wrap;
    text-align: center;
    color: white;
    display: block;
    text-decoration: none;
    padding: 10px;
    border-top: 2px solid white; /* Borde blanco */
    border-bottom: 2px solid white; /* Borde blanco */
  
}

#mesasActivas {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px, 1fr));
    gap: 10px;
    list-style-type: none;
    margin: 5px; /* Elimina márgenes */
    padding: 5px; /* Elimina padding */

    
    
}

#mesasCerradas {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
    gap: 10px;
    list-style-type: none;
    margin: 5px 5px 15px 5px; /* Elimina márgenes */
    padding: 5px; /* Elimina padding */

    
    
}

#pedidosCobrados {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px, 1fr));
    gap: 10px;
    list-style-type: none;
    margin: 5px 5px 15px 5px; /* Elimina márgenes */
    padding: 5px; /* Elimina padding */

    
    
}



#pedidosLlevar {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(130px, 1fr));
    gap: 10px;
    list-style-type: none;
    margin: 5px; /* Elimina márgenes */
    padding: 5px; /* Elimina padding */

    
    
}

.mesaS {
    padding: 10px 5px;
    background: #97b6d3;
    border: 2px solid #002e82;
    border-radius: 10px;
    color:#002e82;
    text-decoration: none;
    text-shadow: none;
    font-weight: bold;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);     
    text-align: center;
    margin: 0px;
    cursor: pointer;
}

.mesaS:hover {
    padding: 10px 5px;
    background:  #bf0811;
    border: 2px solid #002e82;
    border-radius: 10px;
    color: white;
    text-decoration: none;
    text-shadow: none;
    font-weight: bold;
    text-align: center;
    margin: 0;
    cursor: pointer;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.4);
}
#btnpnt{
    display: none;
    position: relative;
    top: 0px;
    margin: 5px;
    padding: 25px;
    align-items: center;
    background: #bf0811;
    border: 3px solid #bf0811;
    border-radius: 10px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);     
}

#btnprint {
    
    color: white;
    border: none;
    padding: 15px;
    margin: 10px 0px;
    width: auto;
    text-align: center;
    border: 3px solid white;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 10px;
}


#ticketpntp {
    grid-column: 3; /* Ocupa las dos últimas columnas */
    padding: 0 0 50px 0;
    text-align: center;
    margin: 0px;
    width: 100%;
    height: 100%;
    margin-top: 0px;
    align-items: center;
    overflow: auto;
    background: none;
}
#ticketpnt {
    padding: 0px;
    text-align: center;
    margin-top: 10px;
    align-items: center;
    background: none;
   

}

#cambMs{
    background: #002e82;
    color: white;
    border: none;
    padding: 10px;
    margin: 0px 10px;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);     
}

#cambMs label{
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-top: 5px;
    padding: 5px;
}
.inpcmb{
    padding: 15px;
    margin: 15px;
    width: 150px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
}
#hcCam, #cmbms{

    background: #bf0811;
    color: white;
    border: none;
    padding: 15px;
    margin: 5px;
    text-align: center;
    border: 3px solid white;
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
}


#cambMss {
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    background: #002e82;
    color: white;
    border: none;
    padding: 10px;
    margin: 0;
    text-align: center;
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);     
}

#cambMss label{
    flex:1 0 80px;
    color: white;
    font-weight: bold;
    font-size: 16px;
    text-align: center;
    margin-top: 5px;
    padding: 5px;
}

.inpcmbs{
    flex:1 0 80px;
    padding: 15px;
    margin: 15px;
    width: 150px;
    border-radius: 10px;
    border: 1px solid #ccc;
    box-sizing: border-box;
    text-align: center;
    font-weight: 600;
}
#hcCams{
    flex:1 0 80px;
    background: #bf0811;
    color: white;
    padding: 15px;
    margin: 5px;
    text-align: center;
    border: 3px solid white;
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
}

.genRpt{
    display:inline-block;
    background: #bf0811;
    color: white;
    padding: 15px;
    margin: 5px;
    text-align: center;
    border: 3px solid white;
    border-radius: 10px;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
}

#cobrarForm {
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background:rgba(102, 102, 102, 0.4);
    margin-top: 5px;
    margin-bottom: 15px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);   
    text-decoration: none;
    text-shadow: none; 
    color: #002e82; 
}

#cobrarForm h3 {
    margin-bottom: 10px;
    font-size: 18px;
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    background-color: #002e82;
    color: white;
}

#cobrarForm label {
display: grid;
    grid-template: repeat(auto-fit, minmax(100px, 1fr));
    gap:1px;    
  font-weight: bold;
    margin:0;
    text-align: left;
   /*   display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;*/
}

#cobrarForm div {
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
    align-items: center;   
    justify-content: space-between;
    flex-wrap: wrap;

}

.formaPg {
    display: grid;
    grid-template: repeat(auto-fit, minmax(80px, 1fr));
    gap:1px;

}
 
#cobrarForm input[type="radio"],
#cobrarForm select {
  
    display: flex;
    flex-direction: row;
    align-items: center;   
    justify-content: space-between;
    flex-wrap: wrap;
    font-size:14px;
    margin:0;
    background: none;
    color: #002e82;
}
.cobroF{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Dos columnas iguales */
    gap: 5px;
}

#cobrarForm input[type="number"] {
 
    align-items: center;
 
    margin: 2px 0px;
}

#btnCobrar {
    display: inline-block;
    padding: 20px;
    background-color: #002e82;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
}

#btnCobrar:hover {
    background-color: #0044cc;
}
#cronoticketp {
    grid-column: 2; /* Ocupa las dos últimas columnas */
    width: auto;
    padding: 0 0 50px 0;
    text-align: center;
    width: 100%;
    margin-top: 5px;
    overflow: auto;
    background: none;
    min-height: calc(100vh - 50px);

}

#cronoticket {
    margin:none;
    box-shadow: inset 0 4px 12px rgba(0,0,0,0.4);
    border-radius: 10px;

}
   

#vtaprevia , #cocinaRep, #servicioRep {
    font-weight: bold;
    border-radius:10px;
    margin:0;
    min-height: calc(100vh - 50px);
}

#vtaprevia h3 {
    padding:15px;
    color:white;
    background:rgba(102,102,102,0.8);
    text-decoration:none;
    text-shadow:none;
    font-size: 20px;
    font-weight:600;
    border-radius:10px;
    margin:0;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4); 
}

#vtaprevia h4 {
    padding: 5px;
    color:white;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    margin:0;
    border-radius:10px;
    background: #bf0811;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
     box-shadow: inset 0 4px 12px rgba(0,0,0,0.4);
}

#vtaprevia p {
    padding: 3px;
    color: #002e82;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    margin: 3px;
    background: none;

}




/* Footer */
#footerPpal {
    position: fixed;
    width: 100%;
    bottom: 0px;
    background:none;
    margin: 0px;
    padding: 0px;
    z-index: +5;
}

.Fmenu {
    display: flex;
    justify-content: space-around; 
    align-items: center;
    background: #97b6d3;
    padding: 5px;
    margin: 0px;
    height: auto;   
}
.Fmenu li {
    list-style-type: none;
    color: #002e82;
    padding: 5px;
    margin: 0px;
    text-align: center;
    background: none;
    cursor:pointer;
    
}

.Fmenu li a {
    padding: 5px;
    margin: 0px;
    color: #002e82;
    text-align: center;
     text-decoration: none;
    text-shadow: none;
    background: none;
}

#contentlf {
       margin:10px 5px; 
       padding-top: 0px; 
       clear: both; 
       display: grid; 
       grid-template-columns: 1fr 3fr; 
    }

.fledo,  #limpiarFecha {
    border: 2px solid #002e82;
    padding: 10px;
    border-radius: 10px;
    background: none;
    box-shadow: none;
    text-align: center;
    color: #002e82 !important;
    text-shadow: none;
    background-color: rgba(151,182,211,1);
}

.filerestado {
   color: #002e82 !important;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    text-shadow: none;
    text-align: center;
    cursor: pointer;
    padding: 10px;
    
}




#seleccomand{
    background: none;
    color: white;
    border: none;
    padding: 10px;
    margin: 5px;
    text-align: center;
    border-radius: 5px;
    text-decoration: none;
    text-shadow: none;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

#pnII {
    width: 15%;
    display: none;
    float: left;
    padding-left: 2%;
}

#foosele {
    width: 100%;
    padding-left: 8%;
    clear: both;
}

#foosele li {
    width: 80%;
    padding: 10px 0px;
}

#foosele .btnselec {
    display: block;
    text-align: center;
}


#ticket {
    max-width: 100mm; /* Tamaño estándar de un ticket */
    margin: 0 auto;
    height: auto;
    padding: 10px;
    background: white;
    border: 1px solid #ddd;
}

/* Header */
#ticket div {
    text-align: center;
    margin-bottom: 10px;
}

/* Table */
table {
    width: 100%;
    border-collapse: collapse;
    font-size:14px;
}

table th, table td {
    padding: 5px;
    border-bottom: 1px solid #ddd;
}

table th {
    text-align: left;
    font-weight: bold;
}

table td {
    text-align: left;
}

/* Totals */
#ticket div.total {
    text-align: right;
    font-weight: bold;
    margin-top: 10px;
}

/* Footer */
#ticket div.footer {
    text-align: center;
    margin-top: 20px;
    font-size: 14px;
}