html, body {
  overflow: hidden;
  position: fixed;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
    font-family: 'Arial', sans-serif;
    overscroll-behavior: none;
}

.login-screen-title {
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
}

button {
    width: 100%;
}
     
.view {
    position: absolute; /* Cambia a absolute para posicionarlo dentro de #app */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*overflow: auto; /* Asegura que el contenido sea desplazable si excede */
}

.panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 280px; /* Ancho del panel */
    transform: translateX(100%); /* Oculto por defecto */
    transition: transform 0.3s ease;
    background: #ffffff; /* Asegúrate de que el fondo sea visible */
    z-index: 10001; /* Garantiza que esté por encima de otros elementos */
    color: #000; /* Asegúrate de que el texto sea legible */
}

.panel-open {
    transform: translateX(0); /* Muestra el panel */
}

.panel .page-content {
    padding: 16px; /* Añade espacio dentro del panel */
}

.panel .page {
    height: 100%; /* Asegura que ocupe toda la altura del panel */
    overflow-y: auto; /* Permite desplazamiento si el contenido es largo */
}

.pin-button {
  border: 1px solid black;
  width: 60px;
  height: 60px;
  border-radius: 5px;
}

.pin-button button {
  font-size: 36px;
  font-weight: bold;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  border-color: #1C1C1C;
  color: #1C1C1C;
}


.pin-row-2 {
    text-align: center;
    width: 40%;
    margin: 0 auto;
    margin-top: 0px;
    margin-top: 10px;
}

.page-previous {
    pointer-events: none; /* Desactiva la interacción */
    visibility: hidden;   /* Oculta visualmente los elementos */
}

/* Estilo para los puntos del PIN */
#pin-indicator {
  margin-bottom: 20px;
}
.pin-dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background-color: #ddd;
  border-radius: 50%;
}
.pin-dot.active {
  background-color: #007aff; /* Color activo */
}

.grid-cols-3 {
    gap: 10px; /* Espacio entre las columnas */
    justify-items: center; /* Centra los botones en cada celda */
}

.button.pin-key,
.button.pin-action {
    height: 60px; /* Ajusta la altura del botón */
    font-size: 18px; /* Tamaño de texto */
    margin: 1px; /* Espacio entre los botones */
}

.custom-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 125px;
}

.custom-button .icon {
  font-size: 36px; /* Ajusta el tamaño del icono si es necesario */
  margin-bottom: 4px; /* Espaciado entre el icono y el texto */
}

.custom-button .button-text {
  font-size: 20px; /* Ajusta el tamaño del texto según tus necesidades */
}

.navbar-inner .center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.color-verde {
    background-color: #25bd1d;
    width: 8px;
    height: 80px;
}

.color-rojo {
    background-color: red;
    width: 8px;
    height: 80px;
}

.paddingLeft {
    padding-left: 0px !important;
}


/* Asegurar que la tabla sea flexible */
.data-table {
    width: 100%;
    overflow-x: auto; /* Para casos extremos */
}

.data-table table {
    width: 100%; /* Hacer que ocupe todo el ancho */
    border-collapse: collapse;
    table-layout: fixed; /* Las columnas se ajustan automáticamente */
}

/* Estilizar las celdas */
.data-table th, .data-table td {
    text-align: left;
    padding: 12px;
    word-wrap: break-word; /* Ajusta texto largo */
}

/* Fijar la cabecera de la tabla */
.table-header thead tr th {
    position: sticky;
    top: 0;
    z-index: 10000 !important; /* Asegura que esté por encima */
    background-color: #FFFFFF; /* Fondo opaco */
    color: white; /* Texto visible */
    padding: 12px;
    text-align: left;
    border-bottom: none; /* Elimina bordes */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombras para destacar */
    isolation: isolate; /* Crea un contexto de apilamiento único */
    font-weight: bold;
}

/* Opcional: Añadir una línea divisoria más destacada */
.table-header thead tr th:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #004a99; /* Color para la línea divisoria */
}

/* Ajuste general del cuerpo de la tabla */
.data-table {
    max-height: calc(100vh - 100px); /* Ajusta el espacio según el diseño */
    overflow-y: auto; /* Permitir scroll vertical */
    background-color: white; /* Fondo blanco detrás de la tabla */
}

/* Resaltar la fila en hover */
.data-table tbody tr:hover {
    background-color: #f0f8ff; /* Color de fondo al pasar el mouse */
    transition: background-color 0.3s ease;
}

/* Alternancia de colores en filas */
.data-table tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* Sin bordes si es la última fila */
.data-table tbody tr:last-child td {
    border-bottom: none;
}

.data-table th:nth-child(1), .data-table td:nth-child(1) {
    width: 70%; /* La columna de nombres ocupa más espacio */
}

.data-table th:nth-child(2), .data-table td:nth-child(2) {
    width: 30%; /* La columna de botones ocupa menos espacio */
}

.page-estatica {
    overflow: hidden !important; /* Elimina el scroll */
    height: 100%; /* Ajusta el tamaño al contenedor */
}

.page-content {
    padding-top: calc(56px + env(safe-area-inset-top)); /* Altura dinámica para el navbar */
    padding-bottom: calc(56px + env(safe-area-inset-top)); /* Altura dinámica para el navbar */
    box-sizing: border-box;
    overflow: auto; 
    height: 100%; /* Ajusta el tamaño al contenedor */
    background: white !important;
}

.page-content-listado {
    padding-top: calc(56px + env(safe-area-inset-top)); /* Altura dinámica para el navbar */
    box-sizing: border-box;
    overflow: hidden; /* Elimina el scroll */
    height: 100%; /* Ajusta el tamaño al contenedor */
    background: white !important;
}

.navbar {
    position: sticky; /* Asegura que el navbar siempre esté visible */
    top: 0;
    z-index: 1100; /* Asegura que se superponga al contenido */
    background-color: white; /* Fondo para evitar transparencia */
    border-bottom: 1px solid #ddd; /* Línea de separación opcional */
    will-change: transform;
    transition: transform 0.3s ease-out;
}

.toolbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 1000; /* Asegura que esté por encima */
    height: 30px; /* Ajusta según la plataforma */
}

.ios .toolbar-inner, .md .toolbar-inner {
    height: 100%; /* Asegura que use toda la altura */
    padding: 0 8px; /* Asegura consistencia horizontal */
}

.toolbar-inner {
    display: flex; /* Asegura alineación interna */
    justify-content: space-around; /* Ajusta según tus necesidades */
    align-items: center; /* Centra verticalmente */
    height: auto; /* Asegúrate de no limitar la altura */
    background-color: white;
    padding: 0; /* Elimina márgenes internos */
}

.searchbar {
  margin: 0px;
  z-index: 1500; /* Asegura que esté sobre el contenido */
  background-color: white;
}

.simple-list li {
  display: grid; /* Diseño en cuadrícula para consistencia */
  grid-template-columns: auto 1fr; /* Etiqueta ocupa espacio mínimo, contenido el resto */
  column-gap: 10px; /* Espaciado entre etiqueta y contenido */
  align-items: flex-start; /* Alineación superior para contenido largo */
  line-height: 1.5; /* Consistencia en la altura de línea */
  /*margin-bottom: 8px;  Espacio entre filas */
  text-align: right; /* Alinea todo el contenido a la derecha */
}

.simple-list li strong {
  font-weight: bold; /* Mantiene las etiquetas en negrita */
  word-wrap: break-word; /* Permite dividir etiquetas largas */
  word-break: break-word;
  white-space: normal; /* Asegura que las etiquetas largas no se desborden */
  text-align: right; /* Alinea las etiquetas a la derecha */
  font-size: 15px;
}

.simple-list li span {
  font-size: 13px; 
  word-wrap: break-word; /* Permite dividir palabras largas */
  word-break: break-word;
  white-space: pre-wrap; /* Mantiene saltos de línea existentes */
  overflow-wrap: break-word; /* Maneja palabras largas correctamente */
  text-align: right; /* Alinea el contenido a la derecha */
}

.listaCabecera {
  font-size: 14px !important;
  margin-bottom: 0px !important;
  height: 20px !important;
}

.itemsCabecera {
  font-size: 12px !important;
}

/* Estilo para el textarea de observaciones */
textarea.observaciones {
  display: block; /* Asegura que ocupe toda la línea */
  width: 100%; /* Ocupa todo el ancho disponible */
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
  height: auto; /* Permite ajustar su altura automáticamente */
  min-height: 118px; /* Altura mínima */
  max-height: 118px; /* Altura máxima */
  resize: none; /* Desactiva el redimensionamiento */
  padding: 8px; /* Espaciado interno */
  font-family: inherit; /* Usa la fuente del contenedor */
  font-size: 14px; /* Ajuste de tamaño de texto */
  overflow-y: auto; /* Permite scroll vertical si excede el tamaño */
}

.listobservaciones {
    display: contents !important;
}

.client-row {
    cursor: pointer;
    background: #f7f7f8;
    transition: background 0.3s ease;
}

.client-row:hover {
    background: #e0e0e5;
}

.client-info {
    padding: 10px;
}

.client-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
}

.client-details {
    font-size: 12px;
    color: #666;
}

.block {
  position: static !important; /* Elimina 'relative' */
}

.titulo {
  font-size: 15px;
  font-weight: bold;
}

/* Contenedor de pestañas del pedido siempre visible en la pantalla */
.footer-content {
    display: none; 
    position: fixed;
    bottom: 0; 
    width: 100%; 
    background-color: white; 
    padding: 10px; 
    border-top: 1px solid #ccc; 
    text-align: center;
}

#footer-lineas {
    display: block;
    text-align: right !important;
    font-size: 17px;
    font-weight: bold;
    right: 5px;
}

.cfooter-button {
    position: fixed;
    border-top: 0px solid;
    display: flex;
    justify-content: center; /* Alinea el contenido al extremo derecho */
    align-items: center;       /* Centra el botón verticalmente si hay más contenido */
    padding-bottom: 50px; 
}

#footer-button .button {
  margin: 0; /* Elimina márgenes adicionales */
}

/* Ajuste adicional para evitar superposición */
#tab-lineas .list {
  overflow-y: auto; /* Habilitar scroll vertical */
  max-height: calc(100vh - 220px); /* Ajusta el tamaño considerando el footer */  
  padding-bottom: calc(150px + env(safe-area-inset-bottom)); /* Ajusta según el tamaño del footer */
}

#tab-lineas-nuevoPedido .list {
  overflow-y: auto; /* Habilitar scroll vertical */
  max-height: calc(100vh - 325px); /* Ajusta el tamaño considerando el footer */  
  padding-bottom: calc(100px + env(safe-area-inset-bottom)); /* Ajusta según el tamaño del footer */
}

.popup-direccion .list li {
    display: inline flow-root list-item;
    flex-wrap: wrap; /* Permite que el contenido se divida en varias líneas si es necesario */
    align-items: center; /* Alinea el contenido verticalmente */
    padding: 10px; /* Espaciado interno */
    margin-bottom: 10px; /* Espaciado entre <li> para evitar solapamiento */
    text-align: left; /* Alinea el contenido a la izquierda */
    box-sizing: border-box; /* Incluye padding en el tamaño total del <li> */
}

.popup-direccion .list li label {
    white-space: normal; /* Permite que el texto se ajuste al ancho */
    word-wrap: break-word; /* Divide las palabras largas */
    word-break: break-word;
    font-size: 14px;
}

.popup-direccion .list li input {
    margin-right: 10px; /* Espacio entre el radio button y el texto */
}

.popup-direccion .list ul {
    list-style: none; /* Elimina los puntos de la lista para un diseño más limpio */
    padding: 3px;
}

.popup-direccion .page-content {
    max-height: calc(100vh - 100px); /* Ajusta el contenido al viewport */
    overflow-y: auto; /* Habilita el scroll vertical si el contenido es extenso */
}

/* Elimina las flechas de subir y bajar valores de inputs numéricos */
input[type="number"]::-webkit-inner-spin-button, 
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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

.item-title-addLinea {
    font-size: 14px !important;
    font-weight: bold;
}

.unique-alignment {
    display: flex;
    flex-direction: column; /* Organiza las filas en columna */
    gap: 8px; /* Espaciado entre filas */
    margin-left: 25px;
}

.unique-alignment .form-row {
    display: flex;
    align-items: center; /* Alinea verticalmente */
    justify-content: flex-start; /* Alinea horizontalmente a la izquierda */
    gap: 8px; /* Espaciado entre la etiqueta y el input */
}

.unique-alignment .form-row label {
    flex-shrink: 0; /* Evita que las etiquetas se reduzcan */
    width: 80px; /* Ancho fijo o ajustable de las etiquetas */
}

.unique-alignment .form-row input,
.unique-alignment .form-row .stepper {
    flex-grow: 1; /* Permite que los elementos se adapten al espacio restante */
    max-width: 200px; /* Ajusta el ancho máximo según tu diseño */
}

.dialog-button-promo-primero {
    margin-right: 8px !important;
    padding: 0px !important;
}

.dialog-button-promo-segundo {
    margin-right: 8px !important;
    margin-left: 10px !important;
    padding: 0px !important;
}

.dialog-button-promo-tercero {
    margin-left: 4px !important;
    padding: 0px !important;
}

textarea.mensaje {
  display: block; /* Asegura que ocupe toda la línea */
  width: 98%; /* Ocupa todo el ancho disponible */
  box-sizing: border-box; /* Incluye padding y borde en el ancho total */
  height: auto; /* Permite ajustar su altura automáticamente */
  min-height: 250px; /* Altura mínima */
  max-height: 250px; /* Altura máxima */
  resize: none; /* Desactiva el redimensionamiento */
  padding: 8px; /* Espaciado interno */
  font-family: inherit; /* Usa la fuente del contenedor */
  font-size: 14px; /* Ajuste de tamaño de texto */
  overflow-y: auto; /* Permite scroll vertical si excede el tamaño */
  margin-left: 5px;
}




/* Modificar en Android el badge para que ocupe lo del texto también */
.md .tabbar i.icon::before {
    width: 111px;
    height: 22px;
    left: 44px;
}

/* Estilos solo para Android */
.md .margintopandroid {
  margin-top: -20px;
}

.md .tabbar .tab-link {
    border: none !important;
}

.md .marginFichaPedido {
    margin-top: -10px !important;
}

.md .etiqEnvio {
    padding-top: 0px !important;
}





/*
 * Maquetación específica para IPhone e ios
 */

@supports (-webkit-touch-callout: none) {
    .paddingBottom {
        padding-bottom: 230px !important;
    }
}

.ios .block-strong-ios{
    padding-top: 0!important;
    padding-bottom: 0!important;
}

.ios .footer-button-ios {
  font-size: 14px !important; /* Tamaño más pequeño */
}

/* iPhone 14 Pro, 15 y 16 */
@media only screen
and (device-width : 393px) 
and (device-height : 852px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
    .framework7-root{height:393px}
    body {
        /*
        IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente     
        */
        padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
        padding-top: env(safe-area-inset-top); /* iOS 11.2 */
    }
    .ios .view-popup, .ios .smart-select-popup{
        margin-top: 35px;
        height: 95%;
    } 
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 393px) 
and (device-height : 852px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
    .framework7-root{height:852px}
    
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 26px) !important;
        height: calc(env(safe-area-inset-bottom) + 26px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: 10px;
    }
    #toolbarMain .tab-link.active {
        margin-top: 10px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 10px;
        padding-top: 8px;
    }
    /*.ios .view-popup, .ios .smart-select-page .searchbar{
        margin-top: 45px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 52px;
    }
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }*/

    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos  {
        padding-top: 40px !important;
        padding-bottom: calc(230px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 50px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    /*.page-content.login-screen-content{
        padding-top: 15px !important;
    }*/ 
}

/* iPhone 8 y SE 2020 */
@media only screen
and (device-width : 375px)
and (device-height : 667px)
and (-webkit-device-pixel-ratio : 2)
and (orientation : portrait) {
    .framework7-root{height:667px}

    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 60px) !important;
        height: calc(env(safe-area-inset-bottom) + 60px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 36px) !important;
        height: calc(env(safe-area-inset-bottom) + 36px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: 30px;
    }
    #toolbarMain .tab-link.active {
        margin-top: 30px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 0px;
        padding-top: 15px;
    }
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }
    .ios .toolbar.tabbar.button-big {
        height: calc(constant(safe-area-inset-bottom) + 68px) !important;
        height: calc(env(safe-area-inset-bottom) + 68px) !important;
    }
    .ios .navbar-inner {
        height: 100%;
        padding-top: 8px;
    }
    .ios .view-popup, .ios .smart-select-page .navbar .navbar-inner{
        margin-top: 0px;
        padding-top: 0px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 35px;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos  {
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }    
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 60px !important;
        padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
    }
    .page-content.login-screen-content{
        padding-top: 10px !important;
    }
}

/* iPhone X y XS */
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {
    .framework7-root{height:375px}
    .page-content{padding-left: 44px;padding-right: 44px;}
    .page-content-listado{padding-left: 44px;padding-right: 44px;}
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 22px) !important;
        height: calc(env(safe-area-inset-bottom) + 22px) !important;
        left: 0;
        bottom: 0;
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 44px) !important;
        height: calc(env(safe-area-inset-bottom) + 44px) !important;
        left: 0;
        bottom: 0;
    }
    .ios .toolbar-inner {
        padding: 8px 44px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        padding-top: 11px;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) {
    .framework7-root{height:812px}

    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 26px) !important;
        height: calc(env(safe-area-inset-bottom) + 26px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: -5px;
    }
    #toolbarMain .tab-link.active {
        margin-top: -10px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 10px;
        padding-top: 15px;
    }
    .ios .view-popup, .ios .smart-select-page .searchbar{
        margin-top: 45px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 52px;
    }
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }
    .ios .toolbar.tabbar.button-big {
        height: calc(constant(safe-area-inset-bottom) + 65px) !important;
        height: calc(env(safe-area-inset-bottom) + 65px) !important;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos  {
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 50px !important;
        padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
    }
    .page-content.login-screen-content{
        padding-top: 15px !important;
    }
}

/* iPhone XR, XS Max y 11 */
@media only screen
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 2)
and (orientation : landscape),
screen
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
    .framework7-root{height:414px}
    .page-content{padding-left: 44px;padding-right: 44px;}
    .page-content-listado{padding-left: 44px;padding-right: 44px;}
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 22px) !important;
        height: calc(env(safe-area-inset-bottom) + 22px) !important;
        left: 0;
        bottom: 0;
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 44px) !important;
        height: calc(env(safe-area-inset-bottom) + 44px) !important;
        left: 0;
        bottom: 0;
    }
    .ios .toolbar-inner {
        padding: 8px 44px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        padding-top: 11px;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 2)
and (orientation : portrait),
screen
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
    .framework7-root{height:896px}

    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 26px) !important;
        height: calc(env(safe-area-inset-bottom) + 26px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: -5px;
    }
    #toolbarMain .tab-link.active {
        margin-top: -10px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 10px;
        padding-top: 15px;
    }
    .ios .view-popup, .ios .smart-select-page .searchbar{
        margin-top: 45px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 52px;
    }
    
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }
    .ios .toolbar.tabbar.button-big {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos  {
        padding-top: 40px !important;
        padding-bottom: calc(230px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 50px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content.login-screen-content{
        padding-top: 15px !important;
    }
}


/* iPhone 12, 12 Pro, 13, 13 Pro y 14 */
@media only screen
and (device-width : 390px) 
and (device-height : 844px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
    .framework7-root{height:390px}
    .page-content{padding-left: 44px;padding-right: 44px;}
    .page-content-listado{padding-left: 44px;padding-right: 44px;}
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 22px) !important;
        height: calc(env(safe-area-inset-bottom) + 22px) !important;
        left: 0;
        bottom: 0;
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 44px) !important;
        height: calc(env(safe-area-inset-bottom) + 44px) !important;
        left: 0;
        bottom: 0;
    }
    .ios .toolbar-inner {
        padding: 8px 44px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        padding-top: 20px;
    } 
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 390px) 
and (device-height : 844px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
    .framework7-root{height:844px}
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 26px) !important;
        height: calc(env(safe-area-inset-bottom) + 26px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: 10px;
    }
    #toolbarMain .tab-link.active {
        margin-top: 10px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 10px;
        padding-top: 15px;
    }
    .ios .view-popup, .ios .smart-select-page .searchbar{
        margin-top: 45px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 52px;
    }
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }
    .ios .toolbar.tabbar.button-big {
        height: calc(constant(safe-area-inset-bottom) + 36px) !important;
        height: calc(env(safe-area-inset-bottom) + 36px) !important;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos  {
        padding-top: 40px !important;
        padding-bottom: calc(230px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 50px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content.login-screen-content{
        padding-top: 15px !important;
    }
} 


/* iPhone 12 Pro Max */
@media only screen
and (device-width : 428px) 
and (device-height : 926px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
    .framework7-root{height:428px}
    body {
        /*
        IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente     
        */
        padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
        padding-top: env(safe-area-inset-top); /* iOS 11.2 */
    }
    .ios .view-popup, .ios .smart-select-popup{
        margin-top: 35px;
        height: 95%;
    } 
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 428px) 
and (device-height : 926px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
    .framework7-root{height:926px}
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 26px) !important;
        height: calc(env(safe-area-inset-bottom) + 26px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: 10px;
    }
    #toolbarMain .tab-link.active {
        margin-top: 10px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 10px;
        padding-top: 15px;
    }
    .ios .view-popup, .ios .smart-select-page .searchbar{
        margin-top: 45px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 52px;
    }
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }
    .ios .toolbar.tabbar.button-big {
        height: calc(constant(safe-area-inset-bottom) + 36px) !important;
        height: calc(env(safe-area-inset-bottom) + 36px) !important;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(150px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos  {
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 50px !important;
        padding-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
    }
    .page-content.login-screen-content{
        padding-top: 15px !important;
    }
} 

/* iPhone 14 Pro Max */
@media only screen
and (device-width : 430px) 
and (device-height : 932px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape){
    .framework7-root{height:430px}
    body {
        /*
        IMPORTANTE! Es obligatorio para adaptar el toolbar en el iPhone X y que se visualice correctamente     
        */
        padding-top: constant(safe-area-inset-top); /* iOS 11.0 */
        padding-top: env(safe-area-inset-top); /* iOS 11.2 */
    }
    .ios .view-popup, .ios .smart-select-popup{
        margin-top: 35px;
        height: 95%;
    } 
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
}
@media only screen
and (device-width : 430px) 
and (device-height : 932px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait){
    .framework7-root{height:932px}
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel {
        height: 100%;
        top:0;
    }
    html.with-statusbar.device-ios .panel, html.with-statusbar.ios:not(.device-ios):not(.device-android) .panel .page {
        padding-top: 22px;
    }
    .navbar {
        height: calc(constant(safe-area-inset-bottom) + 56px) !important;
        height: calc(env(safe-area-inset-bottom) + 56px) !important;
        left: 0;
        bottom: 0;
        
    }
    .toolbar {
        height: calc(constant(safe-area-inset-bottom) + 26px) !important;
        height: calc(env(safe-area-inset-bottom) + 26px) !important;
        left: 0;
        bottom: 0;
    }
    #toolbarMain .tab-link{
        margin-top: 10px;
    }
    #toolbarMain .tab-link.active {
        margin-top: 10px;
        z-index: 1000;
    }
    .ios .toolbar-inner {
        padding: 8px 8px;
        height: auto;
        background-color: white;
        margin-top: -8px !important;
    }
    .ios .navbar-inner {
        height: 100%;
        margin-top: 10px;
        padding-top: 15px;
    }
    .ios .view-popup, .ios .smart-select-page .searchbar{
        margin-top: 45px;
    }
    .ios .view-popup, .ios .smart-select-page .page-content .list-block{
        margin-top: 52px;
    }
    .ios #tab-notifications.tab-link.active .badge{
        position: absolute;
        right: 25%;
        top: 8px;
    }
    .ios .toolbar.tabbar.button-big {
        height: calc(constant(safe-area-inset-bottom) + 36px) !important;
        height: calc(env(safe-area-inset-bottom) + 36px) !important;
    }
    html.with-statusbar.device-ios .framework7-root, html.with-statusbar.ios:not(.device-ios):not(.device-android) .framework7-root { padding-top: 0;}
    html.with-statusbar .statusbar {display: none;}
    .page-content {
        padding-top: 30px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    #tab-pendientes, #tab-todos {
        padding-top: 40px !important;
        padding-bottom: calc(230px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-magintop40{
        padding-top: 40px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content-listado {
        padding-top: 50px !important;
        padding-bottom: calc(180px + env(safe-area-inset-bottom)) !important;
    }
    .page-content.login-screen-content{
        padding-top: 15px !important;
    }  
}








/* Estilos responsive */
@media screen and (max-width: 768px) {
    .data-table td {
        font-size: 14px; /* Reduce el tamaño del texto */
        padding: 8px; /* Reduce el espacio interno */
    }
    
    .table-header thead tr th {
        position: sticky;
        font-size: 14px; /* Reduce el tamaño del texto */
        padding: 8px; /* Reduce el espacio interno */
    }
}