/* styles.css */

:root {
    --primary-color     : #f2f7ff; /* #f2f7ff; */
    --secondary-color   : #f2f7ff; /* #f2f7ff; */
    --color1-primary    : black; /* Dark text */
    --color2-primary    : #ff4d4f; /* #c53030;  Buttons */
    --color2-secondary  : #e63946; /* Hover */
    --color3-primary    : #FFFFE6; /* Text */
    --safe-top          : var(--safe-area-inset-top, env(safe-area-inset-top, 0px));
}

body {
    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    /* Otros estilos personalizados */
}

h1 {
    color: #333;
    text-align: center; /* Centrar el texto */
}

.h3-tabla {
    color: #333;
    text-align: center; /* Centrar el texto */
}


.table-tabla {
    width: 100%;
    /*border-collapse: separate;  Permite controlar los bordes de celdas individuales */
    border-spacing: 0; /* Elimina el espacio entre las celdas */
    margin-bottom: 5px;
    background-color: white; /* Fondo semitransparente blanco para las tablas */
    border-radius: 10px; /* Esquinas redondeadas para la tabla */
    overflow: hidden; /* Asegura que el contenido interno no desborde los bordes redondeados */
    text-align: center; /* Centra horizontalmente el texto dentro de las celdas */
}

.r-table {
    width: 100%;
    /*border-collapse: separate;  Permite controlar los bordes de celdas individuales */
    border-spacing: 0; /* Elimina el espacio entre las celdas */
    margin-bottom: 1em;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo semitransparente blanco para las tablas */
    border-radius: 1em; /* Esquinas redondeadas para la tabla */
    overflow: hidden; /* Asegura que el contenido interno no desborde los bordes redondeados */
    text-align: center; /* Centra horizontalmente el texto dentro de las celdas */
}

.r-table td {
    padding-top: 0.5em;
    padding-bottom: 0.5em;
  }  

.r-thead th{
    /*padding: 8px;*/
    background-color: lightgray;
    color: #333;
    padding-top: 0.5em; /* Aumenta el espacio en la parte superior */
    padding-bottom: 0.5em; /* Aumenta el espacio en la parte inferior */
}

.table-tabla tr {
    height: 40px;
  }

.table-info {
    width: auto; /* Permite que la tabla se adapte al contenido */
    border-spacing: 0; /* Elimina el espacio entre las celdas */
    margin: var(--adaptive-table-info-margin-y, 20px) auto; /* Centra horizontalmente la tabla y añade espacio vertical */
    border-radius: var(--adaptive-table-info-radius, 10px); /* Esquinas redondeadas para la tabla */
    overflow: hidden; /* Asegura que el contenido interno no desborde los bordes redondeados */
    text-align: left; /* Alinea el texto a la izquierda dentro de las celdas */
    table-layout: auto; /* Deja que el navegador decida el ancho de las columnas basándose en el contenido */
}
.table-info td {
    background-color: white; /* Fondo semitransparente blanco para todas las celdas de la tabla */
}
.table-info td:first-child {
    background-color: lightgray; /* Fondo semitransparente blanco para la primera columna */
    text-align: left; /* Alinea el texto a la izquierda en la primera columna */
}

.table-info td {
    text-align: left; /* Alinea el texto a la izquierda en todas las celdas */
    padding: var(--adaptive-table-info-pad-y, 10px) var(--adaptive-table-info-pad-x, 10px); /* Añade algo de padding para mejor apariencia */
}

/* Evita el fondo blanco en el modal de detalles del ticket */
#alert-ticket-details .table-info {
    background-color: #d9d9d9;
}
#alert-ticket-details .table-info td,
#alert-ticket-details .table-info td:first-child {
    background-color: transparent !important;
}



.thead-tabla th{
    /*padding: 8px;*/
    background-color: lightgray;
    color: #333;
    padding-top: 10px; /* Aumenta el espacio en la parte superior */
    padding-bottom: 10px; /* Aumenta el espacio en la parte inferior */
}



.tr-tabla td {
    border-bottom: 1px solid lightgray; /* Línea separadora entre filas*/
    padding-top: 10px; /* Aumenta el espacio en la parte superior */
    padding-bottom: 10px; /* Aumenta el espacio en la parte inferior */
}




/* Aplicar la imagen de fondo solo a la tabla con la clase "ticket-table" */
.table-plate {
    margin: 0 auto; /* Centra horizontalmente la tabla */
    border: none;
    border-collapse: collapse;
    border-color: transparent;
}

/* Añadir espacio alrededor del contenido de las celdas */
.table-plate /*td*/ {
  padding: 0;
  text-align: center; /* Centra horizontalmente el texto dentro de las celdas */
}

/* Estilo para la etiqueta label */
.custom-label {
    font-size: 10px; /* o puedes especificar un tamaño de fuente específico, como por ejemplo font-size: 10px; */
    margin-bottom: 0;
    color: red; /* Establece el color del texto del label */
}

/* Estilos para la etiqueta h2 */
.custom-heading {
    font-size: 32px; /* o puedes especificar un tamaño de fuente específico, como por ejemplo font-size: 10px; */
    margin-top: 0;
}

/* Eliminar bordes de la tabla y las celdas */
.ticket-table /*td*/, .ticket-table /*th*/ {
    border: none;
    border-collapse: collapse;
    border-color: transparent;
}


/* Añadir espacio alrededor del contenido de las celdas */
.turno-table {
/*  padding: 40px;*/
  text-align: center; /* Centra horizontalmente el texto dentro de las celdas */
}


/* Eliminar bordes de la tabla y las celdas */
.turno-table /*td*/, .turno-table /*th*/ {
    margin: 0 auto; /* Centra horizontalmente la tabla */
    border: none;
    border-collapse: collapse;
    border-color: transparent;
}

/* Estilo para la etiqueta label */
.tome-su-turno {
    font-size: 24px; /* o puedes especificar un tamaño de fuente específico, como por ejemplo font-size: 10px; */
    margin-bottom: 0;
    color: white; /* Establece el color del texto del label */
}

@keyframes intermitente {
    0% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 1;}
}

.clase-intermitente {
    color: red; /* Aplica el color rojo al texto */
    animation: intermitente 2s linear 1;
}


#total-cola {
    text-align: center;
}

.header {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos */
    padding: 10px; /* Espacio alrededor */
}

header {
    display: flex;
    justify-content: space-between; /* Asegura que los hijos estén en los extremos */
    padding: calc(5px + var(--safe-top)) 10px 5px; /* Respeta la barra de estado en Android/iOS */
    background-color: black; /* Blanco con transparencia */
    color: white;
    height: calc(36px + var(--safe-top)); /* Header + safe area superior */
    box-sizing: border-box;
    align-items: center; /* Centra verticalmente los elementos dentro del header */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* Asegura que el header esté por encima de otros elementos */
}

#moduloSelect {
    margin-left: 20px; /* Espacio entre el título y el select */
}

html, body {
    height: 100%;  /* Asegura que estos elementos tomen al menos la altura completa del viewport */
    margin: 0;     /* Elimina los márgenes por defecto */
    padding: 0;    /* Elimina el padding por defecto */
    display: flex; /* Establece flexbox para el layout */
    flex-direction: column; /* Organiza los elementos en una columna */
}

main {
    flex: 1;  /* Hace que el main ocupe todo el espacio disponible, empujando el footer hacia abajo */    
}

.main {
    padding-top: calc(36px + var(--safe-top)); /* Evita solaparse con status bar + header */
    padding-bottom: 120px;    
}

.header-content {
    width: 100%; /* Ocupa todo el ancho del header */
    display: flex; /* Utiliza flexbox para alinear los hijos */
    align-items: center; /* Centra verticalmente el contenido dentro de header-content */
    justify-content: space-between; /* Separa los elementos a cada extremo */
}

.left, .right {
    flex: 1; /* Permite que ambos lados se expandan y ocupen espacio equitativo */
    white-space: nowrap; /* Evita que el texto se salte a la siguiente línea */
}

.left {
    text-align: left; /* Alinea 'suturno' a la izquierda */
}

.right {
    text-align: right; /* Alinea el nombre del usuario a la derecha */
}




/* Eliminar bordes de la tabla y las celdas */

.tabla-sin-borde {
    border: none;
    border-bottom: none;
    border-collapse: collapse;
    border-color: transparent;
}

.button-container {
    display: flex;
    align-items: center; /* Alinea verticalmente los elementos en el centro */
    justify-content: flex-start; /* Alinea horizontalmente los elementos al inicio */
    gap: 10px; /* Espacio entre los elementos */
}

.button-container form {
    margin: 0; /* Elimina cualquier margen por defecto */
}

.navbar {
    background-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 10px; /* Ajusta el valor según el radio de redondez deseado */
}


.table-tabla-d {
    width: 100%;
    border-spacing: 0; /* Elimina el espacio entre las celdas */
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 0.5); /* Fondo semitransparente blanco para las tablas */
    border-radius: 10px; /* Esquinas redondeadas para la tabla */
    overflow: hidden; /* Asegura que el contenido interno no desborde los bordes redondeados */
    text-align: center; /* Centra horizontalmente el texto dentro de las celdas */
}

.table-tabla-d th {
    background-color: #FFFFFF; /* Fondo blanco para los encabezados */
    color: #000000; /* Texto negro para los encabezados */
    padding: 8px; /* Añade algo de padding para mejor visualización */
    text-align: left; /* Alinea el texto de los títulos a la izquierda */
    width: 50%; /* Ajusta el ancho al 50% si es necesario */
}

.table-tabla-d td {
    background-color: transparent; /* Fondo transparente para los datos */
    color: #333333; /* Texto más oscuro para los datos */
    padding: 8px; /* Consistencia en el padding */
    text-align: right; /* Alinea el texto de los valores a la derecha */
    width: 50%; /* Ajusta el ancho al 50% si es necesario */
}

.table-tabla-d td {
    white-space: nowrap; /* Evita que el contenido se divida en múltiples líneas */
}

#msg-user {
    text-align: center;
}

.progress-container {
    width: 100%;
    background-color: #e0e0df;
    border-radius: 25px;
    padding: 5px;
    margin: 20px 0;
}

.progress-bar {
    height: 30px;
    width: 0%; /* Inicialmente vacía */
    background-color: #76c7c0;
    border-radius: 20px;
    text-align: center;
    line-height: 30px; /* Igual a la altura para centrar verticalmente */
    color: white;
    font-weight: bold;
    transition: width 0.5s; /* Animación de transición */
}


.circle-icon {
    background-color: var(--color2-secondary); /* Fondo del círculo */

}
.circle-icon:hover {
    background-color: var(--color2-primary); /* Fondo del círculo */
    
}
.circle-icon span.material-symbols-outlined {
    color: white !important; /* Cambia el color del ícono a blanco */
}

footer .footer-info {
    background-color: black;
    color: #666; /* Color del texto del footer */
}

footer .dock {
    background-color: var(--color3-primary);
}
footer .dock a {
    color: black;
    /* Color del texto */
}
  body:not(.adaptive-shell) .nav-tabs {
    border-bottom: none !important;
  }
  body:not(.adaptive-shell) .nav-tabs .nav-link.active {
    font-weight: bold;
    background-color:  #f2f2f2; /* azul por defecto de Bootstrap */
    color: #333
    border-color: #dee2e6 #dee2e6 #fff;
  }


  body:not(.adaptive-shell) .nav-tabs .nav-link {
    background-color: rgba(255, 255, 255, 0.5); /* fondo para no activos */
    color: #333; /* color normal (negro o gris oscuro) */
    font-weight: normal;
  }


  body:not(.adaptive-shell) .pagination .page-link {
    color: #333; /* Cambia el color azul del texto a gris oscuro (o el que tú quieras) */
  }
body:not(.adaptive-shell) .page-item.active .page-link {
  background-color: #000000; /* Fondo azul */
  color: #fff;               /* Texto blanco */
  border: none;  
}


  body:not(.adaptive-shell) .tab-content {
    margin-top: 0 !important;
  }

  body:not(.adaptive-shell) .nav-tabs + .tab-content {
    border-top: none;
  }

  body:not(.adaptive-shell) .nav-tabs .nav-link {
    margin-bottom: -1px; /* Para que se pegue mejor a la tabla */
  }

body.adaptive-shell .btn {
    background-color: var(--color2-secondary);    
    color: #f0f0f0;
    font-size: var(--adaptive-btn-font-size, 1em);
    line-height: 1.15;
    padding: var(--adaptive-btn-pad-y, 0.44em) var(--adaptive-btn-pad-x, 0.88em);
    border-radius: var(--adaptive-btn-radius, 0.5em);
}

body.adaptive-shell .btn:hover {
    background-color: var(--color2-primary);
    color: white;
}

body.adaptive-shell .btn-ghost {
    background-color: #ffffff;
    color: #24262b;
    border: 1px solid rgba(199, 207, 219, 0.88);
}

body.adaptive-shell .btn-ghost:hover {
    background-color: #ffffff;
    color: #24262b;
}

.ql-editor p {
margin-bottom: 15px; /* o el valor que prefieras */
}
.ql-editor li {
margin-bottom: 10px; /* o el valor que prefieras */
}  

/* CSS para Login / Register / Change_Password */

.logreg_container {

    text-align: center;
    width: 350px; /* Ajusta el tamaño según sea necesario */
}



form.logreg {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    box-sizing: border-box;
}


body.body_logreg {
    font-family: Arial, sans-serif;
    background: linear-gradient(to right, #7A9999, #7A9999);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    margin: 0;
    padding: 0;
}



body.body_logreg input[type="email"],
body.body_logreg input[type="password"] {
    width: 100%;
    border: none;
    outline: none;
}

body.body_logreg .icon {
    padding: 3%;
    background: #ddd;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box; /* Incluye el padding en el cálculo del tamaño del icono */
}

body.body_logreg form.logreg button {
    width: 100%;
    padding: 10px;
    border: none;
    background-color: #333;    
    color: #f0f0f0;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

body.body_logreg button:hover {
    background-color: black;
    color: white;
}

body.body_logreg h1 {
    font-size: 2rem;      /* ajusta aquí el tamaño que quieras */
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 1rem;
}


/* ===== ADAPTIVE OVERRIDES (preservadas) ===== */

/* styles_adaptive.css
 * Capa base EXCLUSIVA para pantallas adaptive (base_adaptive.html).
 * Todo se scopea a body.adaptive-shell para no tocar pantallas legacy.
 */

body.adaptive-shell {
    --primary-color: #f2f7ff;
    --secondary-color: #f2f7ff;
    --color1-primary: black;
    --color2-primary: #ff4d4f;
    --color2-secondary: #e63946;
    --color3-primary: #FFFFE6;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --adaptive-form-action-h: 5.6dvh;
    --adaptive-form-action-font: var(--adaptive-normal-font-size, var(--adaptive-content-font-size, 4dvw));

    background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    color: #333;
}

/* Header adaptive: evita heredar header fijo en px del CSS legacy */
body.adaptive-shell > header {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    height: 100% !important;
    margin: 0 !important;
    /* Respeta la barra del sistema (Android/iOS) en adaptive. */
    padding-top: var(--safe-top) !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 0 !important;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    background-color: black;
    color: white;
}

body.adaptive-shell .header-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}

body.adaptive-shell .left,
body.adaptive-shell .right {
    flex: 1;
    white-space: nowrap;
}

body.adaptive-shell .left {
    text-align: left;
}

body.adaptive-shell .right {
    text-align: right;
}

/* Main adaptive: neutraliza paddings legacy pensados para header/footer fixed */
body.adaptive-shell > .d-flex > #main,
body.adaptive-shell > .d-flex > #main.adaptive-main {
    padding-top: var(--adaptive-main-pad-top, 1.6dvh) !important;
    padding-right: var(--adaptive-main-pad-x, 2.4dvw) !important;
    padding-bottom: 0 !important;
    padding-left: var(--adaptive-main-pad-x, 2.4dvw) !important;
}

@media (orientation: portrait) {
    body.adaptive-shell {
        --adaptive-main-pad-top: 1.9dvh;
        --adaptive-main-pad-x: 2.4dvw;
        --adaptive-table-info-margin-y: 1.6dvh;
        --adaptive-table-info-radius: 0.9dvh;
        --adaptive-table-info-pad-y: 0.9dvh;
        --adaptive-table-info-pad-x: 1.8dvw;
    }
}

@media (orientation: landscape) {
    body.adaptive-shell {
        --adaptive-main-pad-top: 1.2dvh;
        --adaptive-main-pad-x: 1.2dvw;
        --adaptive-table-info-margin-y: 1.1dvh;
        --adaptive-table-info-radius: 0.55dvh;
        --adaptive-table-info-pad-y: 0.55dvh;
        --adaptive-table-info-pad-x: 0.95dvw;
        --adaptive-form-action-h: 5dvh;
    }
}

/* Sistema reusable para formularios adaptive (tabla de 2 columnas + acciones). */
body.adaptive-shell .adaptive-form-container {
    margin-top: 0 !important;
    padding-top: 0 !important;
    --adaptive-form-width-portrait: 92dvw;
    --adaptive-form-width-landscape: 33.333dvw;
    --adaptive-form-width: var(--adaptive-form-width-portrait);
    --adaptive-form-col1: 42%;
    --adaptive-form-col2: 58%;
    width: var(--adaptive-form-width);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    --adaptive-form-radius: 0.9dvh;
    --adaptive-form-cell-pad-y: 0.9dvh;
    --adaptive-form-cell-pad-x: 1.8dvw;
    --adaptive-form-font: var(--adaptive-normal-font-size, var(--adaptive-content-font-size, 4dvw));
    --adaptive-form-field-h: 5.6dvh;
    --adaptive-form-action-h: var(--adaptive-form-field-h);
    --adaptive-form-action-font: var(--adaptive-form-font);
    --adaptive-form-field-radius: 0.5dvh;
    --adaptive-form-gap-inline: 1.2dvw;
    --adaptive-form-border-w: 0.08dvh;
    --adaptive-form-border-color: #BDC3CA;
    --adaptive-form-border-color-disabled: #CDD3DB;
    --adaptive-form-cell-bg: #E6E8EB;
    --adaptive-form-field-bg: #FFFFFF;
    --adaptive-form-field-bg-disabled: #FFFFFF;
    --adaptive-form-scan-chars: 11ch;
    --adaptive-form-user-action-size: 5.8dvw;
    --adaptive-form-user-action-icon-size: 4dvw;
    --adaptive-form-trailing-slot-w: var(--adaptive-form-user-action-size);
    --adaptive-form-trailing-glyph-size: var(--adaptive-form-user-action-icon-size);
    --adaptive-form-trailing-glyph-right: calc(var(--adaptive-form-cell-pad-x) + ((var(--adaptive-form-trailing-slot-w) - var(--adaptive-form-trailing-glyph-size)) / 2));
    --adaptive-form-trailing-glyph-shift-x: 0.16dvw;
}

@media (orientation: landscape) {
    body.adaptive-shell .adaptive-form-container {
        --adaptive-form-width: var(--adaptive-form-width-landscape);
        --adaptive-form-radius: 0.85dvh;
        --adaptive-form-cell-pad-y: 0.5dvh;
        --adaptive-form-cell-pad-x: 0.95dvw;
        --adaptive-form-font: var(--adaptive-normal-font-size, var(--adaptive-content-font-size, 0.82dvw));
        --adaptive-form-field-h: 5dvh;
        --adaptive-form-field-radius: 0.4dvh;
        --adaptive-form-gap-inline: 0.7dvw;
        --adaptive-form-border-w: 0.07dvh;
        --adaptive-form-user-action-size: 1.8dvw;
        --adaptive-form-user-action-icon-size: 1dvw;
        --adaptive-form-trailing-glyph-shift-x: 0.07dvw;
    }

    body.adaptive-shell .adaptive-form-container .adaptive-form-table {
        width: 100% !important;
        max-width: 100%;
        table-layout: fixed !important;
        display: table;
    }

    body.adaptive-shell .adaptive-form-container .adaptive-form-table:not(.adaptive-form-icons-grid) td:first-child {
        width: var(--adaptive-form-col1);
    }

    body.adaptive-shell .adaptive-form-container .adaptive-form-table:not(.adaptive-form-icons-grid) td:last-child {
        width: var(--adaptive-form-col2);
    }
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table {
    width: 100%;
    margin: 0 auto !important;
    border-spacing: 0;
    border-collapse: separate;
    border-radius: var(--adaptive-form-radius);
    overflow: hidden;
    table-layout: fixed;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td {
    padding: var(--adaptive-form-cell-pad-y) var(--adaptive-form-cell-pad-x);
    vertical-align: middle;
    font-size: var(--adaptive-form-font);
    background-color: var(--adaptive-form-cell-bg);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table tr:first-child td {
    padding-top: calc(var(--adaptive-form-cell-pad-y) * 2);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table tr:last-child td {
    padding-bottom: calc(var(--adaptive-form-cell-pad-y) * 2);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table:not(.adaptive-form-icons-grid) td:first-child {
    width: var(--adaptive-form-col1);
    text-align: left;
    white-space: nowrap;
    background-color: var(--adaptive-form-cell-bg);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table:not(.adaptive-form-icons-grid) td:last-child {
    width: var(--adaptive-form-col2);
    text-align: left;
}

/* Variante 4 columnas (label + campo + icono opcional + icono principal) */
body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid {
    table-layout: fixed;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .af-col-icon {
    width: var(--adaptive-form-trailing-slot-w);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid td:nth-child(2) {
    width: 100%;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid td.af-icon-slot {
    width: var(--adaptive-form-trailing-slot-w);
    min-width: var(--adaptive-form-trailing-slot-w);
    text-align: center;
    padding-left: 0;
    padding-right: 0;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid td:nth-child(2) > select:not([multiple]) {
    padding-right: var(--adaptive-form-cell-pad-x);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid td:nth-child(2)::after {
    display: none !important;
    content: none !important;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-icon {
    font-family: "Material Symbols Outlined";
    font-size: var(--adaptive-form-trailing-glyph-size);
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #6c757d;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--adaptive-form-trailing-slot-w);
    height: var(--adaptive-form-field-h);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid tr:has(td:nth-child(2) > select:disabled) td:nth-child(4) .adaptive-form-trailing-icon {
    color: #9AA3AF;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-btn {
    width: var(--adaptive-form-trailing-slot-w);
    min-width: var(--adaptive-form-trailing-slot-w);
    height: var(--adaptive-form-field-h);
    min-height: var(--adaptive-form-field-h);
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-btn:hover {
    background: transparent !important;
    color: inherit !important;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-btn .material-symbols-outlined {
    font-size: var(--adaptive-form-trailing-glyph-size);
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #6c757d;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid tr:has(td:nth-child(2) > select:disabled) td:nth-child(4) .adaptive-form-trailing-btn .material-symbols-outlined,
body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-btn.is-disabled .material-symbols-outlined {
    color: #9AA3AF;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-btn:disabled,
body.adaptive-shell .adaptive-form-container .adaptive-form-table.adaptive-form-icons-grid .adaptive-form-trailing-btn.is-disabled {
    cursor: not-allowed;
}

/* Finalizar ticket: comportamiento reusable sin estilos locales por plantilla. */
body.adaptive-shell .ticket-finalize-form-wrap.adaptive-form-container {
    margin: 0;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table select,
body.adaptive-shell .adaptive-form-container .adaptive-form-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.iti__tel-input):not(.adaptive-form-user-input) {
    width: 100%;
    min-width: 0;
    height: var(--adaptive-form-field-h);
    font-size: var(--adaptive-form-font);
    border: var(--adaptive-form-border-w) solid var(--adaptive-form-border-color);
    border-radius: var(--adaptive-form-field-radius);
    padding-left: var(--adaptive-form-cell-pad-x);
    padding-right: var(--adaptive-form-cell-pad-x);
    box-sizing: border-box;
    background-color: var(--adaptive-form-field-bg);
    color: inherit;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: calc(var(--adaptive-form-cell-pad-x) + var(--adaptive-form-trailing-slot-w) + var(--adaptive-form-gap-inline));
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table select:not([multiple])::-ms-expand {
    display: none;
}

/* Flecha universal de combos (Material Symbols Outlined). */
body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> select:not([multiple])) {
    position: relative;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> select:not([multiple]))::after {
    content: "arrow_drop_down";
    font-family: "Material Symbols Outlined";
    font-weight: 400;
    font-style: normal;
    font-size: var(--adaptive-form-trailing-glyph-size);
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #6c757d;
    position: absolute;
    right: var(--adaptive-form-trailing-glyph-right);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Icono unificado para campos time dentro de tablas adaptive. */
body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> input[type="time"]) {
    position: relative;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> input[type="time"])::after {
    content: "schedule";
    font-family: "Material Symbols Outlined";
    font-weight: 400;
    font-style: normal;
    font-size: var(--adaptive-form-trailing-glyph-size);
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #6c757d;
    position: absolute;
    right: var(--adaptive-form-trailing-glyph-right);
    top: 50%;
    transform: translateY(-50%) translateX(var(--adaptive-form-trailing-glyph-shift-x));
    pointer-events: none;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td > input[type="time"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
    padding-right: calc(var(--adaptive-form-cell-pad-x) + var(--adaptive-form-trailing-slot-w) + var(--adaptive-form-gap-inline));
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td > input[type="time"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    right: 0;
    width: var(--adaptive-form-trailing-slot-w);
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}

/* intl-tel-input: respeta paddings propios para no tapar texto con la bandera. */
body.adaptive-shell .adaptive-form-container .adaptive-form-table .iti input.iti__tel-input {
    width: 100%;
    min-width: 0;
    height: var(--adaptive-form-field-h);
    font-size: var(--adaptive-form-font);
    border: var(--adaptive-form-border-w) solid var(--adaptive-form-border-color);
    border-radius: var(--adaptive-form-field-radius);
    box-sizing: border-box;
    background-color: var(--adaptive-form-field-bg);
    color: inherit;
}

/* Teléfono (intl-tel-input): desplaza la bandera un poco a la derecha
   para alinear visualmente con el inicio de texto de otros inputs. */
body.adaptive-shell .adaptive-form-container .adaptive-form-table .iti .iti__selected-flag {
    padding-left: var(--adaptive-form-cell-pad-x);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table select:disabled,
body.adaptive-shell .adaptive-form-container .adaptive-form-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.iti__tel-input):not(.adaptive-form-user-input):disabled,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .iti input.iti__tel-input:disabled {
    background-color: var(--adaptive-form-field-bg-disabled);
    border-color: var(--adaptive-form-border-color-disabled);
    color: #6c757d;
    opacity: 1;
    -webkit-text-fill-color: #6c757d;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> select:disabled:not([multiple]))::after {
    color: #9AA3AF;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table select:focus,
body.adaptive-shell .adaptive-form-container .adaptive-form-table input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.iti__tel-input):not(.adaptive-form-user-input):focus,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .iti input.iti__tel-input:focus {
    outline: none;
    box-shadow: none;
    border-color: var(--adaptive-form-border-color);
}

/* Campo inline con icono interno (sin columnas extra). */
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control {
    position: relative;
    width: 100%;
    min-width: 0;
    min-height: var(--adaptive-form-field-h);
    border: var(--adaptive-form-border-w) solid var(--adaptive-form-border-color);
    border-radius: var(--adaptive-form-field-radius);
    background-color: var(--adaptive-form-field-bg);
    box-sizing: border-box;
    overflow: hidden;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > select,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
    width: 100%;
    min-width: 0;
    height: var(--adaptive-form-field-h);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0;
    padding-left: var(--adaptive-form-cell-pad-x);
    padding-right: var(--adaptive-form-cell-pad-x);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > select::-ms-expand {
    display: none;
}

/* Alinea el icono nativo de datetime-local con la misma columna de iconos. */
body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-start-picker {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: var(--adaptive-form-field-h);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 1;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-start-picker.is-active {
    pointer-events: auto;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-start-picker::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-end-picker {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 100%;
    height: var(--adaptive-form-field-h);
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    border: 0;
    z-index: 1;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-end-picker.is-active {
    pointer-events: none;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-end-picker::-webkit-calendar-picker-indicator {
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual-start-display {
    text-align: left;
    line-height: normal;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table #manual_end_display {
    text-align: left;
    line-height: normal;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > input:focus,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control > select:focus {
    outline: none;
    box-shadow: none;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control--one-action > input,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control--one-action > select {
    padding-right: calc(var(--adaptive-form-cell-pad-x) + var(--adaptive-form-trailing-slot-w));
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control--two-actions > input,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control--two-actions > select {
    padding-right: calc(var(--adaptive-form-cell-pad-x) + (var(--adaptive-form-trailing-slot-w) * 2) + var(--adaptive-form-gap-inline));
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-icon-btn {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: var(--adaptive-form-trailing-slot-w);
    min-width: var(--adaptive-form-trailing-slot-w);
    height: var(--adaptive-form-field-h);
    min-height: var(--adaptive-form-field-h);
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0;
    padding: 0;
    background: transparent !important;
    box-shadow: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    z-index: 2;
    cursor: pointer;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-icon-btn .material-symbols-outlined {
    font-size: var(--adaptive-form-trailing-glyph-size);
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    color: #6c757d;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control .adaptive-form-inline-actions {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    height: var(--adaptive-form-field-h);
    display: inline-flex;
    align-items: center;
    gap: calc(var(--adaptive-form-gap-inline) * 1.1);
    z-index: 2;
}

@media (orientation: landscape) {
    body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control .adaptive-form-inline-actions {
        gap: calc(var(--adaptive-form-gap-inline) * 0.25);
    }
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control .adaptive-form-inline-actions .adaptive-form-inline-icon-btn {
    position: static;
    transform: none;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control:has(> select:disabled) {
    background-color: var(--adaptive-form-field-bg-disabled);
    border-color: var(--adaptive-form-border-color-disabled);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-control:has(> select:disabled) .adaptive-form-inline-icon-btn .material-symbols-outlined,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-icon-btn.is-disabled .material-symbols-outlined {
    color: #9AA3AF;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-icon-btn:disabled,
body.adaptive-shell .adaptive-form-container .adaptive-form-table .adaptive-form-inline-icon-btn.is-disabled {
    cursor: not-allowed;
}

body.adaptive-shell .adaptive-form-container .ticket-space-with-edit {
    width: 100%;
}

body.adaptive-shell .adaptive-form-container .ticket-space-with-edit > select {
    padding-right: calc(var(--adaptive-form-cell-pad-x) + var(--adaptive-form-trailing-slot-w));
}

body.adaptive-shell .adaptive-form-container #finalize_space_select::-ms-expand {
    display: none;
}

body.adaptive-shell .adaptive-form-container .ticket-edit-toggle-btn {
    right: 0;
}

body.adaptive-shell .adaptive-form-container .ticket-edit-toggle-btn .material-symbols-outlined {
    transform: translateX(0);
}

/* Checkbox en recuadro (universal en formularios adaptive con checkbox directo). */
body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> input[type="checkbox"]) {
    position: relative;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> input[type="checkbox"])::after {
    content: "";
    display: block;
    height: var(--adaptive-form-field-h, 5.6dvh);
    border: var(--adaptive-form-border-w, 0.08dvh) solid var(--adaptive-form-border-color, #BDC3CA);
    border-radius: var(--adaptive-form-field-radius, 0.5dvh);
    background: var(--adaptive-form-field-bg, #fff);
    box-sizing: border-box;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table td:has(> input[type="checkbox"]) > input[type="checkbox"] {
    position: absolute;
    top: calc(var(--adaptive-form-cell-pad-y, 0.9dvh) + (var(--adaptive-form-field-h, 5.6dvh) / 2));
    left: var(--adaptive-form-cell-pad-x, 1.8dvw);
    transform: translateY(-50%);
    margin: 0;
    width: clamp(0.9em, 2.8dvw, 1.1em);
    height: clamp(0.9em, 2.8dvw, 1.1em);
    z-index: 1;
    accent-color: var(--color2-primary, #e63946);
}

/* Campo checkbox reusable (misma altura/borde que un input/select). */
body.adaptive-shell .adaptive-form-container .adaptive-form-checkbox-field {
    width: 100%;
    height: var(--adaptive-form-field-h, 5.6dvh);
    border: var(--adaptive-form-border-w, 0.08dvh) solid var(--adaptive-form-border-color, #BDC3CA);
    border-radius: var(--adaptive-form-field-radius, 0.5dvh);
    background: var(--adaptive-form-field-bg, #fff);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: var(--adaptive-form-cell-pad-x, 1.8dvw);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-checkbox-field > input[type="checkbox"] {
    margin: 0;
    width: clamp(0.9em, 2.8dvw, 1.1em);
    height: clamp(0.9em, 2.8dvw, 1.1em);
    accent-color: var(--color2-primary, #e63946);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-static-field {
    width: 100%;
    min-width: 0;
    height: var(--adaptive-form-field-h);
    border: var(--adaptive-form-border-w) solid var(--adaptive-form-border-color);
    border-radius: var(--adaptive-form-field-radius);
    padding-left: var(--adaptive-form-cell-pad-x);
    padding-right: var(--adaptive-form-cell-pad-x);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    background-color: var(--adaptive-form-field-bg, #fff);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-field {
    padding-left: 0;
    padding-right: 0;
    gap: var(--adaptive-form-gap-inline);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-field #requesting-user-icon {
    flex: 0 0 auto;
    margin-left: var(--adaptive-form-cell-pad-x);
    font-size: var(--adaptive-form-trailing-glyph-size);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-field .adaptive-form-user-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: var(--adaptive-form-cell-pad-x);
    padding-right: var(--adaptive-form-cell-pad-x);
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    outline: none;
    line-height: 1;
    font-size: var(--adaptive-form-font);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-field .adaptive-form-user-input::placeholder {
    color: #6c757d;
    opacity: 1;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-field .adaptive-form-user-input:focus {
    box-shadow: none;
    outline: none;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-field .adaptive-form-user-actions {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--adaptive-form-gap-inline);
    /* Alinea el icono final con la misma guía X de la flecha de los combos. */
    padding-right: var(--adaptive-form-cell-pad-x);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-paste-btn,
body.adaptive-shell .adaptive-form-container .adaptive-form-user-scan-btn {
    margin-left: 0;
    min-width: 0;
    width: var(--adaptive-form-user-action-size);
    height: var(--adaptive-form-user-action-size);
    flex: 0 0 var(--adaptive-form-user-action-size);
    padding: 0;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: inherit;
    box-shadow: none;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-user-paste-btn .material-symbols-outlined,
body.adaptive-shell .adaptive-form-container .adaptive-form-user-scan-btn .material-symbols-outlined {
    font-size: var(--adaptive-form-trailing-glyph-size);
    font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    display: block;
    line-height: 1;
    transform: translateX(var(--adaptive-form-trailing-glyph-shift-x));
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table tr:last-child td:first-child {
    border-bottom-left-radius: var(--adaptive-form-radius);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-table tr:last-child td:last-child {
    border-bottom-right-radius: var(--adaptive-form-radius);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-inline-field {
    display: flex;
    align-items: center;
    gap: var(--adaptive-form-gap-inline);
}

body.adaptive-shell .adaptive-form-container .adaptive-form-inline-input {
    flex: 1 1 auto;
    min-width: 0;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-inline-btn {
    flex: 0 0 auto;
    white-space: nowrap;
}

body.adaptive-shell .btn-container .btn {
    height: var(--adaptive-form-action-h, 5.6dvh);
    font-size: var(--adaptive-form-action-font, var(--adaptive-normal-font-size, var(--adaptive-content-font-size, 4dvw)));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

@media (orientation: portrait) {
    body.adaptive-shell .btn-container.btn-group-uniform {
        --adaptive-uniform-btn-w: 29.73dvw;
        --adaptive-uniform-btn-gap: var(--adaptive-btn-row-gap, 3dvw);
        justify-content: flex-start;
        gap: var(--adaptive-uniform-btn-gap);
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    body.adaptive-shell .btn-container.btn-group-uniform .btn {
        width: var(--adaptive-uniform-btn-w);
        min-width: var(--adaptive-uniform-btn-w);
        max-width: var(--adaptive-uniform-btn-w);
    }

    body.adaptive-shell .btn-container.btn-group-uniform:has(> .btn:only-child) {
        width: min(100%, var(--adaptive-uniform-btn-w));
    }

    body.adaptive-shell .btn-container.btn-group-uniform:has(> .btn:first-child:nth-last-child(2)) {
        width: min(100%, calc((var(--adaptive-uniform-btn-w) * 2) + var(--adaptive-uniform-btn-gap)));
    }

    body.adaptive-shell .btn-container.btn-group-uniform:has(> .btn:first-child:nth-last-child(3)) {
        width: min(100%, calc((var(--adaptive-uniform-btn-w) * 3) + (var(--adaptive-uniform-btn-gap) * 2)));
    }
}

body.adaptive-shell .adaptive-form-container .adaptive-form-scan-id {
    display: inline-block;
    box-sizing: border-box;
    width: calc(var(--adaptive-form-scan-chars) + (var(--adaptive-btn-pad-x, 0.88em) * 2) + (var(--adaptive-form-border-w) * 2));
    min-width: calc(var(--adaptive-form-scan-chars) + (var(--adaptive-btn-pad-x, 0.88em) * 2) + (var(--adaptive-form-border-w) * 2));
    max-width: calc(var(--adaptive-form-scan-chars) + (var(--adaptive-btn-pad-x, 0.88em) * 2) + (var(--adaptive-form-border-w) * 2));
    flex: 0 0 calc(var(--adaptive-form-scan-chars) + (var(--adaptive-btn-pad-x, 0.88em) * 2) + (var(--adaptive-form-border-w) * 2));
    height: var(--adaptive-form-field-h);
    font-size: var(--adaptive-btn-font-size, 1em);
    line-height: 1.15;
    padding-top: var(--adaptive-btn-pad-y, 0.44em);
    padding-bottom: var(--adaptive-btn-pad-y, 0.44em);
    padding-left: var(--adaptive-btn-pad-x, 0.88em);
    padding-right: var(--adaptive-btn-pad-x, 0.88em);
    border-radius: var(--adaptive-btn-radius, 0.5em);
    border-width: var(--adaptive-form-border-w);
    text-align: center;
}

body.adaptive-shell .adaptive-form-container .adaptive-form-scan-id::placeholder {
    font-size: inherit;
    line-height: inherit;
    opacity: 1;
    text-align: center;
}

/* Tipografía y tabs globales para todas las pantallas adaptive. */
body.adaptive-shell {
    --adaptive-normal-font-size: var(--adaptive-content-font-size, 4dvw);
    --adaptive-tabs-gap: 0.22dvw;
    --adaptive-tabs-border-w: 0.22dvw;
    --adaptive-tabs-radius: 1.05dvw;
    --adaptive-tabs-pad-y: 1.6dvw;
    --adaptive-tabs-pad-x: 2.8dvw;
    --adaptive-table-head-bg: lightgray;
    --adaptive-table-row-h: calc(var(--adaptive-content-font-size, 4dvw) * 2.4);
    --adaptive-pagination-h: calc(var(--adaptive-content-font-size, 4dvw) * 2.25);
    --adaptive-pagination-min-w: calc(var(--adaptive-content-font-size, 4dvw) * 1.9);
    --adaptive-pagination-pad-x: calc(var(--adaptive-content-font-size, 4dvw) * 0.55);
    --adaptive-pagination-radius: calc(var(--adaptive-content-font-size, 4dvw) * 0.20);
    --adaptive-pagination-gap: calc(var(--adaptive-content-font-size, 4dvw) * 0.10);
    --adaptive-tabs-content-gap: 1.8dvh;
    /* Geometría visual de tabs para my_accesses (forma/colores/separación) */
    --my-accesses-tabs-gap: 0.95dvw;
    --my-accesses-tabs-margin-bottom: 2.20dvw;
    --my-accesses-tabs-border-w: 0.24dvw;
    --my-accesses-tabs-radius: 1.35dvw;
    --my-accesses-tabs-pad-y: 0.45dvh;
    --my-accesses-tabs-pad-x: 2.2dvw;
    --my-accesses-tabs-active-lift: 0.24dvw;
}

body.adaptive-shell .table-tabla {
    font-size: var(--adaptive-normal-font-size);
}

body.adaptive-shell .app-tabs {
    gap: var(--adaptive-tabs-gap);
    border-bottom: var(--adaptive-tabs-border-w) solid #dee2e6 !important;
    margin-bottom: 0 !important;
}

body.adaptive-shell .app-tabs .nav-item {
    margin: 0 !important;
}

body.adaptive-shell .app-tabs .nav-link {
    font-size: var(--adaptive-normal-font-size) !important;
    border: var(--adaptive-tabs-border-w) solid #d7dde8;
    border-bottom: none;
    border-radius: var(--adaptive-tabs-radius) var(--adaptive-tabs-radius) 0 0;
    padding: 0 var(--adaptive-tabs-pad-x);
    margin-bottom: calc(var(--adaptive-tabs-border-w) * -1);
    line-height: 1;
    height: var(--adaptive-table-row-h);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    background-color: rgba(255, 255, 255, 0.5);
    color: #333 !important;
    font-weight: 400;
    text-decoration: none;
}

body.adaptive-shell .app-tabs .nav-link.active {
    font-size: var(--adaptive-normal-font-size) !important;
    background-color: var(--adaptive-table-head-bg);
    color: #333 !important;
    font-weight: 700;
    border-color: #dee2e6 #dee2e6 #fff;
}

body.adaptive-shell .app-tabs + .tab-content {
    margin-top: var(--adaptive-tabs-content-gap) !important;
    border-top: none;
}

body.adaptive-shell .pagination {
    gap: var(--adaptive-pagination-gap);
}

body.adaptive-shell .pagination .page-item {
    display: flex;
}

body.adaptive-shell .pagination .page-link {
    min-width: var(--adaptive-pagination-min-w);
    height: var(--adaptive-pagination-h);
    padding: 0 var(--adaptive-pagination-pad-x);
    font-size: var(--adaptive-normal-font-size) !important;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--adaptive-pagination-radius);
    color: #333;
    box-sizing: border-box;
}

body.adaptive-shell .pagination .page-link i {
    font-size: calc(var(--adaptive-normal-font-size) * 0.95);
    line-height: 1;
}

/* Tabs estándar adaptive para listados/summary (sin tocar font-size). */
body.adaptive-shell .my-accesses-tabs,
body.adaptive-shell .adaptive-summary-zone .summary-tabs {
    gap: var(--my-accesses-tabs-gap);
    border-bottom: var(--my-accesses-tabs-border-w) solid #c9d2df !important;
    margin-bottom: var(--my-accesses-tabs-margin-bottom) !important;
}

body.adaptive-shell .my-accesses-tabs .nav-link,
body.adaptive-shell .adaptive-summary-zone .summary-tabs .nav-link {
    border: var(--my-accesses-tabs-border-w) solid #bec7d3;
    border-bottom: none;
    border-radius: var(--my-accesses-tabs-radius) var(--my-accesses-tabs-radius) 0 0;
    padding-top: var(--my-accesses-tabs-pad-y) !important;
    padding-bottom: var(--my-accesses-tabs-pad-y) !important;
    padding-left: var(--my-accesses-tabs-pad-x) !important;
    padding-right: var(--my-accesses-tabs-pad-x) !important;
    margin-bottom: calc(var(--my-accesses-tabs-border-w) * -1);
    background-color: #eef2f8;
    color: #2e333a !important;
    font-weight: 400;
}

body.adaptive-shell .my-accesses-tabs .nav-link.active,
body.adaptive-shell .adaptive-summary-zone .summary-tabs .nav-link.active {
    background-color: #ffffff;
    border-color: #aebbcf;
    color: #1f2937 !important;
    font-weight: 700;
    position: relative;
    top: var(--my-accesses-tabs-active-lift);
}

/* El espacio con la tabla lo controla el margin-bottom de tabs. */
body.adaptive-shell .my-accesses-tabs + .tab-content,
body.adaptive-shell .adaptive-summary-zone .summary-tabs + .tab-content {
    margin-top: 0 !important;
}

/* Uniformidad explícita para listado/tabs de my_accesses. */
body.adaptive-shell .my-accesses-table,
body.adaptive-shell .my-accesses-table th,
body.adaptive-shell .my-accesses-table td,
body.adaptive-shell .my-accesses-tabs .nav-link,
body.adaptive-shell .my-accesses-tabs .nav-link.active {
    font-size: var(--adaptive-normal-font-size) !important;
}

body.adaptive-shell .pagination .page-item.active .page-link {
    background-color: #000000;
    color: #fff;
    border: none;
}

/* Menús laterales (izquierdo y usuario): controles con tamaño adaptivo uniforme. */
body.adaptive-shell .app-offcanvas .offcanvas-header {
    padding-top: calc(var(--bs-offcanvas-padding-y, 1rem) + var(--safe-top));
    padding-right: var(--bs-offcanvas-padding-x, 1rem);
    padding-bottom: var(--bs-offcanvas-padding-y, 1rem);
    padding-left: var(--bs-offcanvas-padding-x, 1rem);
}

body.adaptive-shell .app-offcanvas .offcanvas-body {
    padding-bottom: calc(var(--bs-offcanvas-padding-y, 1rem) + var(--safe-bottom));
}

body.adaptive-shell .app-offcanvas .offcanvas-header .btn-close {
    width: var(--adaptive-offcanvas-close-size, 4.2dvw);
    height: var(--adaptive-offcanvas-close-size, 4.2dvw);
    min-width: var(--adaptive-offcanvas-close-size, 4.2dvw);
    min-height: var(--adaptive-offcanvas-close-size, 4.2dvw);
    padding: 0;
    margin: 0;
    background-size: 72% 72%;
}

body.adaptive-shell .app-offcanvas .toggle-menu {
    width: var(--adaptive-offcanvas-toggle-hit, 6.6dvw);
    height: var(--adaptive-offcanvas-toggle-hit, 6.6dvw);
    min-width: var(--adaptive-offcanvas-toggle-hit, 6.6dvw);
    min-height: var(--adaptive-offcanvas-toggle-hit, 6.6dvw);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    line-height: 1;
}

body.adaptive-shell .app-offcanvas .toggle-menu i {
    font-size: var(--adaptive-offcanvas-toggle-icon-size, 4dvw);
    line-height: 1;
}

@media (orientation: landscape) {
    body.adaptive-shell {
        --adaptive-tabs-gap: 0.22dvw;
        --adaptive-tabs-border-w: 0.10dvw;
        --adaptive-tabs-radius: 0.52dvw;
        --adaptive-tabs-pad-y: 0.28dvw;
        --adaptive-tabs-pad-x: 0.44dvw;
        --adaptive-tabs-content-gap: 0dvh;
        --my-accesses-tabs-gap: 0.28dvw;
        --my-accesses-tabs-margin-bottom: 0.72dvw;
        --my-accesses-tabs-border-w: 0.10dvw;
        --my-accesses-tabs-radius: 0.56dvw;
        --my-accesses-tabs-pad-y: 0.45dvh;
        --my-accesses-tabs-pad-x: 0.9dvw;
        --my-accesses-tabs-active-lift: 0.10dvw;
        --adaptive-offcanvas-close-size: 0.95dvw;
        --adaptive-offcanvas-toggle-hit: 1.45dvw;
        --adaptive-offcanvas-toggle-icon-size: 0.78dvw;
    }

    /* Menús laterales (izquierdo y usuario) con escala consistente en horizontal. */
    body.adaptive-shell .app-offcanvas .offcanvas-title {
        font-size: var(--adaptive-landscape-offcanvas-title-font, 0.95dvw);
    }

    body.adaptive-shell .app-offcanvas .nav-link {
        font-size: var(--adaptive-landscape-offcanvas-link-font, 0.85dvw);
    }
}

/* Estilos de tablas del summary */
body.adaptive-shell .h3-tabla,
body.adaptive-shell h3 {
    color: #333;
}

body.adaptive-shell .table-tabla {
    width: 100%;
    border-spacing: 0;
    margin-bottom: calc(var(--adaptive-content-font-size, 4dvw) * 0.3);
    background-color: white;
    border-radius: calc(var(--adaptive-content-font-size, 4dvw) * 0.65);
    overflow: hidden;
    text-align: center;
}

body.adaptive-shell .table-tabla tr {
    height: var(--adaptive-table-row-h);
}

body.adaptive-shell .thead-tabla th {
    background-color: var(--adaptive-table-head-bg);
    color: #333;
    height: var(--adaptive-table-row-h);
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1;
    vertical-align: middle;
}

body.adaptive-shell .tr-tabla td {
    border-bottom: 1px solid lightgray;
    padding-top: calc(var(--adaptive-content-font-size, 4dvw) * 0.55);
    padding-bottom: calc(var(--adaptive-content-font-size, 4dvw) * 0.55);
}

/* Summary adaptive (viewport-based fallback sizing) */
body.adaptive-shell .adaptive-summary-zone .summary-adaptive-container {
    margin-top: 0 !important;
}

body.adaptive-shell .adaptive-summary-zone .summary-filter-form {
    margin-bottom: 1.8dvh !important;
    gap: 1dvh !important;
}

body.adaptive-shell .adaptive-summary-zone .summary-filter-label,
body.adaptive-shell .adaptive-summary-zone .summary-filter-select {
    font-size: var(--adaptive-normal-font-size) !important;
}

body.adaptive-shell .adaptive-summary-zone .summary-filter-select {
    min-height: 4.2dvh;
    padding-top: 0;
    padding-bottom: 0;
}

body.adaptive-shell .adaptive-summary-zone .summary-group-row,
body.adaptive-shell .adaptive-summary-zone .summary-payments-block {
    margin-bottom: 1.8dvh;
}

body.adaptive-shell .adaptive-summary-zone .table-tabla {
    margin-bottom: 0;
    border-radius: 0.65dvh;
}

body.adaptive-shell .adaptive-summary-zone h3 {
    font-size: var(--adaptive-normal-font-size) !important;
    margin: 0 0 0.72dvh 0;
    line-height: 1.05;
}

/* Summary/occupancy por orientación (para editar vertical y horizontal por separado) */
@media (orientation: portrait) {
    body.adaptive-shell .adaptive-summary-zone table {
        font-size: var(--adaptive-content-font-size, 4dvw);
    }

    body.adaptive-shell .adaptive-summary-zone .table-tabla tr {
        height: 4.3dvh;
    }

    body.adaptive-shell .adaptive-occupancy-zone table {
        font-size: var(--adaptive-content-font-size, 4dvw);
    }

    body.adaptive-shell .adaptive-occupancy-zone .table-tabla tr {
        height: 4.3dvh;
    }
}

@media (orientation: landscape) {
    body.adaptive-shell .adaptive-summary-zone table {
        font-size: var(--adaptive-content-font-size, 0.82dvw);
    }

    body.adaptive-shell .adaptive-summary-zone .table-tabla tr {
        height: 4.3dvh;
    }

    body.adaptive-shell .adaptive-occupancy-zone table {
        font-size: var(--adaptive-content-font-size, 0.82dvw);
    }

    body.adaptive-shell .adaptive-occupancy-zone .table-tabla tr {
        height: 4.3dvh;
    }
}

body.adaptive-shell .adaptive-summary-zone .thead-tabla th,
body.adaptive-shell .adaptive-summary-zone .table-tabla td {
    padding: 0.45dvh 0.42dvh;
}

/* Parking occupancy adaptive fallback */
body.adaptive-shell .adaptive-occupancy-zone .occupancy-adaptive-container {
    margin-top: 0 !important;
}

body.adaptive-shell .adaptive-occupancy-zone .occupancy-table-block {
    margin-bottom: 1.8dvh;
}

body.adaptive-shell .adaptive-occupancy-zone .table-tabla {
    margin-bottom: 0;
    border-radius: 0.65dvh;
}

body.adaptive-shell .adaptive-occupancy-zone .thead-tabla th,
body.adaptive-shell .adaptive-occupancy-zone .table-tabla td {
    padding: 0.45dvh 0.42dvh;
}

/* Compat visual del pie negro */
body.adaptive-shell > footer .footer-info {
    background-color: black;
    color: #666;
}