/* ==========================================================================
   XANTINA ERP - Capa movil (iPhone / Android)
   Archivo: /plantilla/dist/css/xantina-movil.css

   Todas las reglas van bajo "html.xantina-movil". Esa clase la pone el script
   inline del <head> y /plantilla/dist/js/xantina-movil.js SOLO cuando el
   dispositivo es un celular (pantalla <= 991.98px con puntero tactil, o
   user agent iPhone/iPod/Android Mobile). En una PC (aunque la ventana sea
   angosta) la clase nunca existe y este archivo no cambia ni un pixel.

   Secciones:
     1. Base y tipografia          6. Formularios y Select2
     2. Barra superior fija        7. Tablas apiladas / DataTables
     3. Menu lateral tipo cajon    8. Modales a pantalla completa
     4. Contenido y tarjetas       9. Dashboard, KPIs y modulos
     5. Botones y objetivos        10. Login / 2FA
        tactiles                   11. SweetAlert
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base y tipografia
   -------------------------------------------------------------------------- */
html.xantina-movil {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* La curva animada del login (.bg-curve, 130vw) y cualquier otro elemento
     ancho no deben permitir desplazamiento lateral de la pagina */
  overflow-x: hidden;
}

html.xantina-movil body {
  font-size: 15px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-tap-highlight-color: rgba(20, 52, 3, .12);
}

html.xantina-movil .btn,
html.xantina-movil a,
html.xantina-movil input,
html.xantina-movil select,
html.xantina-movil textarea,
html.xantina-movil label,
html.xantina-movil .nav-link {
  touch-action: manipulation;
}

/* En tactil no hay hover: evita que el boton quede "levantado" tras tocarlo */
html.xantina-movil .btn:hover,
html.xantina-movil .omni-option:hover,
html.xantina-movil .xfin-kpi-action:hover {
  transform: none;
}

/* --------------------------------------------------------------------------
   2. Barra superior fija (hamburguesa siempre a mano) + safe-area
   -------------------------------------------------------------------------- */
html.xantina-movil .main-header,
html.xantina-movil body.sidebar-mini.sidebar-collapse:not(.sidebar-open) .main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1035;
  margin-left: 0 !important;
  min-height: 0;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding: calc(.35rem + env(safe-area-inset-top, 0px)) calc(.45rem + env(safe-area-inset-right, 0px)) .35rem calc(.45rem + env(safe-area-inset-left, 0px));
  align-items: center;
  flex-wrap: nowrap;
}

html.xantina-movil .main-header .navbar-nav {
  align-items: center;
  flex-wrap: nowrap;
}

html.xantina-movil .main-header .nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: .4rem .6rem;
  font-size: 1rem;
  white-space: nowrap;
}

html.xantina-movil .main-header .nav-link[data-widget="pushmenu"] {
  font-size: 1.3rem;
}

html.xantina-movil .main-header .account-user-trigger {
  padding: .25rem .4rem !important;
}

html.xantina-movil .navbar .dropdown-menu.account-menu.show {
  top: calc(60px + env(safe-area-inset-top, 0px)) !important;
  right: 8px !important;
  width: calc(100vw - 16px);
  max-height: calc(100vh - 76px - env(safe-area-inset-top, 0px));
}

/* El contenido baja lo que mide la barra fija */
html.xantina-movil .content-wrapper,
html.xantina-movil body.sidebar-mini.sidebar-collapse:not(.sidebar-open) .content-wrapper {
  margin-left: 0 !important;
  padding-top: calc(60px + env(safe-area-inset-top, 0px));
  overflow-x: hidden;
}

html.xantina-movil .main-footer,
html.xantina-movil body.sidebar-mini.sidebar-collapse:not(.sidebar-open) .main-footer {
  margin-left: 0 !important;
  text-align: center;
  font-size: .8rem;
  padding: .75rem .75rem calc(.75rem + env(safe-area-inset-bottom, 0px));
}

/* --------------------------------------------------------------------------
   3. Menu lateral como cajon (drawer): cerrado por defecto, se abre con la
      hamburguesa de AdminLTE encima del contenido y con fondo oscurecido.
      Los selectores largos igualan la especificidad de las reglas "mini"
      de index.php (que fuerzan 4.6rem con !important).
   -------------------------------------------------------------------------- */
html.xantina-movil .main-sidebar,
html.xantina-movil body.sidebar-mini.sidebar-collapse:not(.sidebar-open) .main-sidebar,
html.xantina-movil body.sidebar-mini.sidebar-collapse:not(.sidebar-open) .main-sidebar:hover {
  position: fixed !important;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: min(300px, 86vw) !important;
  min-width: 0 !important;
  max-width: none !important;
  margin-left: 0 !important;
  transform: translateX(-105%) !important;
  transition: transform .22s ease !important;
  z-index: 1050;
  overflow-x: hidden !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: none !important;
}

html.xantina-movil body.sidebar-open .main-sidebar {
  transform: translateX(0) !important;
  box-shadow: 12px 0 34px rgba(26, 25, 21, .28) !important;
}

/* Fondo oscuro: se usa el overlay propio de AdminLTE (#sidebar-overlay, que
   ademas cierra el menu al tocarlo) y se anula el ::before duplicado de index.php */
html.xantina-movil body.sidebar-open #sidebar-overlay {
  display: block;
  background: rgba(26, 25, 21, .45);
  z-index: 1040;
}

html.xantina-movil body.sidebar-open::before {
  content: none;
}

/* Con el menu abierto siempre se ven logo, nombre y textos */
html.xantina-movil body.sidebar-open .main-sidebar .brand-text,
html.xantina-movil body.sidebar-open .main-sidebar .user-panel .info,
html.xantina-movil body.sidebar-open .main-sidebar .nav-sidebar .nav-link p,
html.xantina-movil body.sidebar-open .main-sidebar .nav-sidebar .nav-header,
html.xantina-movil body.sidebar-open .main-sidebar .xantina-brand-logo {
  display: block !important;
  opacity: 1 !important;
  width: auto !important;
}

html.xantina-movil body.sidebar-open .main-sidebar .xantina-brand-mark {
  display: none !important;
}

html.xantina-movil body.sidebar-open .main-sidebar .brand-link {
  gap: .65rem !important;
  justify-content: flex-start !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

html.xantina-movil body.sidebar-open .main-sidebar .user-panel,
html.xantina-movil body.sidebar-open .main-sidebar .nav-sidebar .nav-link {
  justify-content: flex-start !important;
}

html.xantina-movil .nav-sidebar .nav-link {
  min-height: 48px;
  margin: .18rem .55rem;
  padding: .6rem 1rem !important;
  font-size: 1rem;
}

html.xantina-movil .nav-sidebar .nav-icon {
  font-size: 1.05rem;
}

html.xantina-movil .nav-sidebar .nav-header {
  padding-top: 1rem;
  font-size: .7rem;
}

/* --------------------------------------------------------------------------
   4. Contenido y tarjetas: sin margenes laterales grandes, tarjetas al 100 %
   -------------------------------------------------------------------------- */
html.xantina-movil .content-header {
  padding: .6rem .5rem .2rem;
}

html.xantina-movil .content-header .container-fluid,
html.xantina-movil .content > .container-fluid {
  padding-left: .5rem;
  padding-right: .5rem;
}

html.xantina-movil .content-header .row.mb-2 {
  margin-bottom: .25rem !important;
}

html.xantina-movil #module-content .container-fluid {
  padding-left: 0;
  padding-right: 0;
}

html.xantina-movil #module-content > .container-fluid.py-4 {
  padding-top: .5rem !important;
  padding-bottom: 1rem !important;
}

/* Cabecera "ERP Empresarial": compacta, en una linea, sin subtitulo */
html.xantina-movil .xantina-app-lockup {
  align-items: center;
  flex-direction: row;
  gap: .7rem;
  padding: .65rem .8rem;
}

html.xantina-movil .xantina-app-mark {
  height: 38px;
  width: 38px;
  font-size: 1rem;
}

html.xantina-movil .page-title {
  font-size: 1.15rem;
  line-height: 1.2;
}

/* Decorativo en celular: el subtitulo largo y la tira de 4 senales (no tienen
   funcion y empujaban el contenido real una pantalla hacia abajo). */
html.xantina-movil .page-subtitle,
html.xantina-movil .enterprise-strip {
  display: none;
}

/* Paneles internos: menos relleno para ganar ancho util */
html.xantina-movil #module-content .p-4 {
  padding: .9rem !important;
}

html.xantina-movil .modal-body .p-4 {
  padding: .85rem !important;
}

html.xantina-movil #module-content .card-body {
  padding: .75rem;
}

html.xantina-movil #module-content .card-body.bg-light {
  padding: .6rem;
}

html.xantina-movil #module-content .mb-4 {
  margin-bottom: 1rem !important;
}

html.xantina-movil #module-content h5 {
  font-size: 1.08rem;
}

html.xantina-movil #module-content h6 {
  font-size: .95rem;
}

html.xantina-movil #module-content .p-4 > div > p.text-muted,
html.xantina-movil .dashboard-hero p,
html.xantina-movil .xfin-head p,
html.xantina-movil .finance-head p,
html.xantina-movil .purchases-hero p {
  font-size: .85rem;
  line-height: 1.4;
}

/* Cabeceras de modulo: texto arriba, botones abajo a lo ancho */
html.xantina-movil .dashboard-hero,
html.xantina-movil .sale-hero,
html.xantina-movil .inventory-hero,
html.xantina-movil .production-hero,
html.xantina-movil .xfin-head,
html.xantina-movil .finance-head,
html.xantina-movil .purchases-hero,
html.xantina-movil #module-content .p-4.d-flex.flex-column.flex-md-row {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: .75rem;
  padding: .9rem !important;
}

html.xantina-movil .xfin-brand {
  flex-direction: row;
  align-items: center;
}

html.xantina-movil .dashboard-hero-actions,
html.xantina-movil .sale-hero-actions,
html.xantina-movil .inventory-hero-actions,
html.xantina-movil .production-hero-actions,
html.xantina-movil .finance-actions,
html.xantina-movil .page-actions,
html.xantina-movil .module-toolbar,
html.xantina-movil #module-content .p-4.d-flex.flex-column.flex-md-row > .d-flex {
  display: flex !important;
  flex-wrap: wrap;
  gap: .5rem;
  width: 100%;
  margin-top: 0 !important;
  justify-content: stretch;
}

html.xantina-movil .dashboard-hero-actions .btn,
html.xantina-movil .sale-hero-actions .btn,
html.xantina-movil .inventory-hero-actions .btn,
html.xantina-movil .production-hero-actions .btn,
html.xantina-movil .finance-actions .btn,
html.xantina-movil .page-actions .btn,
html.xantina-movil .module-toolbar .btn,
html.xantina-movil #module-content .p-4.d-flex.flex-column.flex-md-row > .d-flex > .btn {
  flex: 1 1 calc(50% - .25rem);
  margin: 0 !important;
  min-height: 44px;
  white-space: normal;
}

html.xantina-movil .xfin-head > .btn,
html.xantina-movil .purchases-hero > .btn {
  width: 100%;
  min-height: 44px;
}

/* Encabezados de panel con boton a la derecha: que puedan bajar de linea */
html.xantina-movil #module-content .d-flex.justify-content-between,
html.xantina-movil .finance-panel-head,
html.xantina-movil .xfin-panel-head,
html.xantina-movil .purchase-lines-head,
html.xantina-movil .purchase-general-cost,
html.xantina-movil .purchase-sale-stock,
html.xantina-movil .omni-sale-stock-head {
  flex-wrap: wrap;
  gap: .5rem;
}

/* Caja de totales de la venta detallada (tenia min-width inline de 300px) */
html.xantina-movil #module-content .d-flex.justify-content-end > .border.rounded {
  width: 100%;
  min-width: 0 !important;
}

/* --------------------------------------------------------------------------
   5. Botones, pestañas y objetivos tactiles (>= 44 px)
   -------------------------------------------------------------------------- */
html.xantina-movil .btn {
  min-height: 44px;
  padding-top: .55rem;
  padding-bottom: .55rem;
  font-size: .95rem;
  line-height: 1.3;
}

html.xantina-movil .btn-sm,
html.xantina-movil .btn-group-sm > .btn {
  min-height: 40px;
  padding: .45rem .7rem;
  font-size: .88rem;
}

html.xantina-movil .btn-xs {
  min-height: 36px;
  min-width: 36px;
}

html.xantina-movil .btn-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* .btn-group que no desborde: se parte en lineas */
html.xantina-movil .btn-group,
html.xantina-movil .btn-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  max-width: 100%;
}

html.xantina-movil .btn-group > .btn,
html.xantina-movil .btn-group > .btn-group {
  flex: 1 1 auto;
  margin: 0 !important;
  border-radius: 6px !important;
}

html.xantina-movil .close {
  min-width: 44px;
  min-height: 44px;
  padding: .5rem;
  font-size: 1.7rem;
  opacity: .85;
}

html.xantina-movil .dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 1rem;
}

/* Pestañas: una fila con scroll horizontal */
html.xantina-movil .nav-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

html.xantina-movil .nav-tabs::-webkit-scrollbar {
  display: none;
}

html.xantina-movil .nav-tabs .nav-item {
  flex: 0 0 auto;
}

html.xantina-movil .nav-tabs .nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: .6rem .85rem;
  font-size: .92rem;
  white-space: nowrap;
}

html.xantina-movil .badge {
  font-size: .78rem;
}

html.xantina-movil .alert {
  font-size: .92rem;
}

/* --------------------------------------------------------------------------
   6. Formularios: 16 px en los campos (iOS no hace zoom), 44 px de alto,
      columnas apiladas, Select2 e interruptores grandes
   -------------------------------------------------------------------------- */
html.xantina-movil .form-control,
html.xantina-movil .custom-select,
html.xantina-movil .form-control-custom,
html.xantina-movil .xfin-sim-grid input:not([type="range"]),
html.xantina-movil .xfin-form-grid input,
html.xantina-movil .xfin-form-grid select,
html.xantina-movil .xfin-textarea-label textarea,
html.xantina-movil .dataTables_wrapper .dataTables_filter input,
html.xantina-movil .dataTables_wrapper .dataTables_length select,
html.xantina-movil div.dt-container .dt-search input,
html.xantina-movil div.dt-container .dt-length select,
html.xantina-movil .select2-search__field,
html.xantina-movil .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
html.xantina-movil .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 16px !important;
}

html.xantina-movil .form-control,
html.xantina-movil .custom-select,
html.xantina-movil .xfin-form-grid input,
html.xantina-movil .xfin-form-grid select,
html.xantina-movil .xfin-sim-grid input:not([type="range"]) {
  min-height: 44px;
  height: auto;
  padding: .5rem .75rem;
}

html.xantina-movil .form-control-sm {
  min-height: 42px;
}

html.xantina-movil .form-control-lg {
  min-height: 48px;
}

html.xantina-movil textarea.form-control,
html.xantina-movil .xfin-textarea-label textarea {
  min-height: 84px;
}

html.xantina-movil input[type="range"] {
  min-height: 44px;
}

/* Fechas en iOS: que ocupen el ancho y alineen a la izquierda */
html.xantina-movil input[type="date"].form-control,
html.xantina-movil input[type="time"].form-control,
html.xantina-movil input[type="datetime-local"].form-control {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  min-height: 44px;
}

html.xantina-movil input[type="date"].form-control::-webkit-date-and-time-value,
html.xantina-movil input[type="datetime-local"].form-control::-webkit-date-and-time-value {
  text-align: left;
  min-height: 1.4em;
}

html.xantina-movil .form-control-file {
  min-height: 44px;
  padding: .5rem 0;
  font-size: 15px;
}

html.xantina-movil label {
  margin-bottom: .3rem;
  font-size: .9rem;
}

html.xantina-movil .form-group {
  margin-bottom: .9rem;
}

html.xantina-movil .form-inline {
  flex-direction: column;
  align-items: stretch;
}

html.xantina-movil .form-inline .form-group,
html.xantina-movil .form-inline .form-control,
html.xantina-movil .form-inline .custom-select,
html.xantina-movil .form-inline .btn {
  width: 100%;
  margin-bottom: .5rem;
}

/* Columnas .col-* apiladas, salvo las que ya son "xs" (col-6, col-4...) */
html.xantina-movil .row {
  margin-left: -.3rem;
  margin-right: -.3rem;
}

html.xantina-movil .row.omni-muted-band {
  margin-left: 0;
  margin-right: 0;
}

html.xantina-movil .row > [class*="col-"] {
  flex: 0 0 100%;
  max-width: 100%;
  padding-left: .3rem;
  padding-right: .3rem;
}

html.xantina-movil .row > .col-3 { flex: 0 0 25%; max-width: 25%; }
html.xantina-movil .row > .col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
html.xantina-movil .row > .col-5 { flex: 0 0 41.6667%; max-width: 41.6667%; }
html.xantina-movil .row > .col-6 { flex: 0 0 50%; max-width: 50%; }
html.xantina-movil .row > .col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
html.xantina-movil .row > .col-8 { flex: 0 0 66.6667%; max-width: 66.6667%; }

/* Grupos con boton al lado (el "+" de agregar opcion): boton debajo, a lo ancho */
html.xantina-movil .input-group {
  flex-wrap: wrap !important;
  align-items: stretch;
  width: 100%;
  max-width: 100% !important;
}

html.xantina-movil .input-group > .form-control,
html.xantina-movil .input-group > .custom-select,
html.xantina-movil .input-group > .select2-container {
  flex: 1 1 100%;
  width: 100% !important;
  border-radius: 6px !important;
}

html.xantina-movil .input-group-append,
html.xantina-movil .input-group-prepend {
  display: flex;
  flex: 1 1 100%;
  width: 100%;
  margin: .35rem 0 0 !important;
}

html.xantina-movil .input-group-append .btn,
html.xantina-movil .input-group-prepend .btn,
html.xantina-movil .input-group-append .input-group-text,
html.xantina-movil .input-group-prepend .input-group-text {
  width: 100%;
  justify-content: center;
  border-radius: 6px !important;
}

/* Select2 con alto tactil */
html.xantina-movil .select2-container {
  width: 100% !important;
}

html.xantina-movil .select2-container--bootstrap4 .select2-selection,
html.xantina-movil .select2-container--default .select2-selection--single {
  min-height: 44px !important;
  height: auto !important;
}

html.xantina-movil .select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered,
html.xantina-movil .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px;
  padding-left: .75rem;
}

html.xantina-movil .select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow,
html.xantina-movil .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 42px;
  top: 0;
}

html.xantina-movil .select2-container--bootstrap4 .select2-selection--multiple {
  min-height: 44px;
}

html.xantina-movil .select2-results__option {
  min-height: 44px;
  padding: .75rem .85rem;
  font-size: 16px;
}

html.xantina-movil .select2-dropdown {
  z-index: 1065;
}

html.xantina-movil .select2-container--bootstrap4 .select2-dropdown .select2-search__field,
html.xantina-movil .select2-container--default .select2-search--dropdown .select2-search__field {
  min-height: 42px;
}

/* Interruptores (custom-switch) mas grandes */
html.xantina-movil .custom-control {
  min-height: 1.75rem;
}

html.xantina-movil .custom-control-label {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  font-size: .95rem;
  line-height: 1.3;
}

html.xantina-movil .custom-switch {
  padding-left: 3.25rem;
}

html.xantina-movil .custom-switch .custom-control-label::before {
  top: .1rem;
  left: -3.25rem;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: .75rem;
}

html.xantina-movil .custom-switch .custom-control-label::after {
  top: calc(.1rem + 3px);
  left: calc(-3.25rem + 3px);
  width: calc(1.5rem - 6px);
  height: calc(1.5rem - 6px);
  border-radius: 50%;
}

html.xantina-movil .custom-switch .custom-control-input:checked ~ .custom-control-label::after {
  transform: translateX(1rem);
}

html.xantina-movil .xfin-checkline input {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
}

html.xantina-movil .icheck-primary > label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   7. Tablas: cada fila es una tarjeta apilada. El JS copia el texto del <th>
      al atributo data-label de cada celda y marca:
        .xm-acciones  celda solo con botones (a la derecha, sin etiqueta)
        .xm-botones   celda con botones pero con encabezado (etiqueta + derecha)
        .xm-colspan   celda que abarca varias columnas (mensajes "sin datos")
        .xm-scroll    tabla que es matriz numerica: NO se apila, scroll lateral
   -------------------------------------------------------------------------- */
html.xantina-movil .table-responsive:not(.xm-scroll-wrap) {
  overflow-x: visible;
  overflow-y: visible;
  border-radius: 0;
}

html.xantina-movil table.table:not(.xm-scroll),
html.xantina-movil table.dataTable:not(.xm-scroll),
html.xantina-movil .table-responsive .table:not(.xm-scroll) {
  display: block;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100%;
  margin: 0 !important;
  border: 0 !important;
  background: transparent;
  color: inherit;
}

html.xantina-movil table:not(.xm-scroll) > thead,
html.xantina-movil table:not(.xm-scroll) > colgroup {
  display: none !important;
}

html.xantina-movil table:not(.xm-scroll) > tbody,
html.xantina-movil table:not(.xm-scroll) > tfoot {
  display: block;
  width: 100%;
}

html.xantina-movil table:not(.xm-scroll) > tbody > tr {
  display: block;
  margin: 0 0 .7rem;
  padding: .25rem .8rem;
  background: #fff;
  border: 1px solid var(--acct-border, #ddd2bf);
  border-radius: 8px;
  box-shadow: 0 4px 14px rgba(26, 25, 21, .05);
}

html.xantina-movil .table-striped tbody tr:nth-of-type(odd),
html.xantina-movil .table-striped > tbody > tr:nth-of-type(odd) {
  background-color: #fff !important;
}

html.xantina-movil .table-hover tbody tr:hover,
html.xantina-movil .table-hover > tbody > tr:hover {
  background-color: #fff !important;
}

html.xantina-movil table:not(.xm-scroll) > tbody > tr > td,
html.xantina-movil table:not(.xm-scroll) > tbody > tr > th,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > td,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > th {
  display: block;
  position: relative;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 2.6rem;
  padding: .55rem 0 .55rem 44% !important;
  border: 0 !important;
  border-bottom: 1px solid #ebe1d0 !important;
  background: transparent !important;
  color: inherit;
  text-align: left;
  font-size: .93rem;
  line-height: 1.35;
  white-space: normal !important;
  overflow-wrap: anywhere;
  vertical-align: top;
}

html.xantina-movil table:not(.xm-scroll) > tbody > tr > td:last-child,
html.xantina-movil table:not(.xm-scroll) > tbody > tr > th:last-child,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > td:last-child,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > th:last-child {
  border-bottom: 0 !important;
}

html.xantina-movil table:not(.xm-scroll) > tbody > tr > td[data-label]::before,
html.xantina-movil table:not(.xm-scroll) > tbody > tr > th[data-label]::before,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > td[data-label]::before,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > th[data-label]::before {
  content: attr(data-label);
  position: absolute;
  left: 0;
  top: .62rem;
  width: 40%;
  padding-right: .5rem;
  color: var(--acct-muted, #6b665d);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: normal;
}

/* Celdas sin etiqueta (tabla aun no procesada o sin thead): ancho completo */
html.xantina-movil table:not(.xm-scroll) > tbody > tr > td:not([data-label]),
html.xantina-movil table:not(.xm-scroll) > tbody > tr > th:not([data-label]),
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > td:not([data-label]),
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > th:not([data-label]) {
  padding-left: 0 !important;
}

/* Acciones: a la derecha, sin etiqueta */
html.xantina-movil table:not(.xm-scroll) td.xm-acciones,
html.xantina-movil table:not(.xm-scroll) th.xm-acciones {
  padding-left: 0 !important;
  padding-top: .6rem !important;
  text-align: right !important;
}

html.xantina-movil table:not(.xm-scroll) td.xm-acciones::before,
html.xantina-movil table:not(.xm-scroll) th.xm-acciones::before,
html.xantina-movil table:not(.xm-scroll) td.xm-colspan::before,
html.xantina-movil table:not(.xm-scroll) th.xm-colspan::before {
  content: none !important;
}

html.xantina-movil table:not(.xm-scroll) td.xm-botones {
  text-align: right !important;
}

/* Mensajes "sin datos" y celdas con colspan */
html.xantina-movil table:not(.xm-scroll) td.xm-colspan,
html.xantina-movil table:not(.xm-scroll) th.xm-colspan,
html.xantina-movil table:not(.xm-scroll) td[colspan],
html.xantina-movil table:not(.xm-scroll) th[colspan] {
  padding-left: 0 !important;
  text-align: center !important;
}

/* Centrado de escritorio no tiene sentido en la columna de valores */
html.xantina-movil table:not(.xm-scroll) > tbody > tr > td.text-center:not(.xm-acciones):not(.xm-botones):not(.xm-colspan) {
  text-align: left !important;
}

/* Pie de tabla (totales) */
html.xantina-movil table:not(.xm-scroll) > tfoot > tr {
  display: block;
  margin: 0 0 .7rem;
  padding: .25rem .8rem;
  background: #f6efe3;
  border: 1px solid var(--acct-border, #ddd2bf);
  border-radius: 8px;
}

html.xantina-movil table:not(.xm-scroll) > tfoot > tr > th:empty,
html.xantina-movil table:not(.xm-scroll) > tfoot > tr > td:empty {
  display: none;
}

/* Botones, imagenes y campos dentro de celdas */
html.xantina-movil table:not(.xm-scroll) td .btn {
  min-height: 40px;
  min-width: 40px;
  margin: .15rem 0 .15rem .3rem;
  padding: .4rem .65rem;
  font-size: .85rem;
}

html.xantina-movil table:not(.xm-scroll) td .btn-group,
html.xantina-movil table:not(.xm-scroll) td .purchase-actions {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem;
}

html.xantina-movil table:not(.xm-scroll) td .btn-group > .btn {
  margin: 0 !important;
}

html.xantina-movil .purchase-actions .btn {
  height: 40px;
  width: 40px;
}

html.xantina-movil table:not(.xm-scroll) td img {
  max-width: 72px;
  height: auto;
}

html.xantina-movil table:not(.xm-scroll) td .form-control,
html.xantina-movil table:not(.xm-scroll) td select,
html.xantina-movil table:not(.xm-scroll) td input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important;
  min-height: 42px;
  font-size: 16px;
}

html.xantina-movil table:not(.xm-scroll) td .text-nowrap,
html.xantina-movil table:not(.xm-scroll) td .purchase-cell-main,
html.xantina-movil table:not(.xm-scroll) td .dashboard-product-label {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible;
  text-overflow: clip;
}

/* Red de seguridad si una tabla se inicio en modo escritorio con Responsive
   y el aparato giro a movil despues: se muestran todas las columnas */
html.xantina-movil table.dataTable:not(.xm-scroll) > tbody > tr > td.dtr-hidden,
html.xantina-movil table.dataTable:not(.xm-scroll) > tbody > tr > th.dtr-hidden {
  display: block !important;
}

html.xantina-movil table.dataTable:not(.xm-scroll) > tbody > tr.child,
html.xantina-movil table.dataTable:not(.xm-scroll) > tbody > tr.dtr-details {
  display: none !important;
}

html.xantina-movil table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
html.xantina-movil table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
  display: none !important;
}

/* Tablas que son matrices numericas: scroll horizontal, no apilado */
html.xantina-movil .xm-scroll-wrap {
  overflow-x: auto !important;
  overflow-y: hidden;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

html.xantina-movil table.xm-scroll {
  min-width: 640px;
  font-size: .85rem;
}

html.xantina-movil table.xm-scroll th,
html.xantina-movil table.xm-scroll td {
  white-space: nowrap;
}

/* Controles de DataTables (buscar, paginar, info) en columna */
html.xantina-movil div.dt-container,
html.xantina-movil .dataTables_wrapper {
  overflow-x: visible !important;
}

html.xantina-movil div.dt-container div.dt-layout-table > div,
html.xantina-movil div.dt-container div.dt-scroll-body {
  overflow: visible !important;
  width: auto !important;
}

html.xantina-movil div.dt-container div.dt-scroll-head {
  display: none;
}

html.xantina-movil div.dt-container .dt-layout-row {
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  margin: .35rem 0 .7rem;
}

html.xantina-movil div.dt-container .dt-layout-start,
html.xantina-movil div.dt-container .dt-layout-end,
html.xantina-movil div.dt-container .dt-search,
html.xantina-movil div.dt-container .dt-length,
html.xantina-movil div.dt-container .dt-info,
html.xantina-movil div.dt-container .dt-paging {
  width: 100%;
  max-width: 100%;
}

html.xantina-movil div.dt-container .dt-search {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .25rem;
}

html.xantina-movil div.dt-container .dt-search label {
  margin: 0;
  font-size: .8rem;
  color: var(--acct-muted, #6b665d);
}

html.xantina-movil div.dt-container .dt-search input {
  width: 100% !important;
  margin: 0 !important;
  min-height: 44px;
}

html.xantina-movil div.dt-container .dt-length {
  display: flex;
  align-items: center;
  gap: .5rem;
}

html.xantina-movil div.dt-container .dt-length select {
  min-height: 42px;
  width: auto;
  flex: 0 0 auto;
}

html.xantina-movil div.dt-container .dt-info {
  text-align: center;
  padding-top: .25rem;
  font-size: .85rem;
}

html.xantina-movil div.dt-container .dt-paging {
  display: flex;
  justify-content: center;
}

html.xantina-movil div.dt-container .dt-paging nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem;
}

html.xantina-movil div.dt-container .dt-paging .dt-paging-button {
  min-height: 42px;
  min-width: 42px;
  margin: 0;
  padding: .45rem .6rem !important;
}

html.xantina-movil div.dt-container .dt-paging .dt-paging-button.ellipsis {
  min-width: 24px;
}

html.xantina-movil div.dt-container .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

html.xantina-movil div.dt-container .dt-buttons .btn {
  flex: 1 1 auto;
}

/* --------------------------------------------------------------------------
   8. Modales a pantalla completa, con cabecera y botones fijos
   -------------------------------------------------------------------------- */
html.xantina-movil .modal {
  padding: 0 !important;
}

html.xantina-movil .modal-dialog,
html.xantina-movil .modal-dialog.modal-sm,
html.xantina-movil .modal-dialog.modal-lg,
html.xantina-movil .modal-dialog.modal-xl {
  display: flex;
  align-items: stretch;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100%;
  margin: 0 !important;
}

html.xantina-movil .modal-dialog-centered {
  align-items: stretch;
  min-height: 100%;
}

html.xantina-movil .modal-dialog-centered::before {
  display: none;
}

html.xantina-movil .modal-dialog-scrollable {
  max-height: none;
}

html.xantina-movil .modal-dialog-scrollable .modal-content {
  max-height: none;
  overflow: visible;
}

html.xantina-movil .modal-dialog-scrollable .modal-body {
  overflow-y: visible;
}

html.xantina-movil .modal-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible;
}

html.xantina-movil .modal-header {
  position: sticky;
  top: 0;
  z-index: 6;
  align-items: center;
  min-height: 0;
  padding: calc(.7rem + env(safe-area-inset-top, 0px)) 1rem .7rem;
}

html.xantina-movil .modal-title {
  font-size: 1.05rem;
  line-height: 1.25;
}

html.xantina-movil .modal-body {
  flex: 1 1 auto;
  max-height: none !important;
  overflow: visible !important;
  padding: .9rem .75rem 1.5rem !important;
}

html.xantina-movil .modal-footer {
  position: sticky;
  bottom: 0;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  background: #fff;
  border-top: 1px solid var(--acct-border, #ddd2bf);
  box-shadow: 0 -8px 24px rgba(26, 25, 21, .08);
}

html.xantina-movil .modal-footer > * {
  margin: 0 !important;
}

html.xantina-movil .modal-footer .btn {
  flex: 1 1 calc(50% - .25rem);
  min-height: 48px;
}

html.xantina-movil .modal-footer .xfin-modal-note {
  flex: 1 1 100%;
  font-size: .78rem;
}

html.xantina-movil .modal-body .p-3 {
  padding: .75rem !important;
}

/* Centro de registro operativo (modal unificado de costos) */
html.xantina-movil .omni-card-selector {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

html.xantina-movil .omni-option {
  min-height: 0;
  gap: .5rem;
  padding: .6rem;
}

html.xantina-movil .omni-option i {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  font-size: .9rem;
}

html.xantina-movil .omni-option strong {
  font-size: .84rem;
}

html.xantina-movil .omni-option small {
  font-size: .68rem;
}

html.xantina-movil .omni-form-body {
  padding: .75rem;
}

html.xantina-movil .omni-form-footer {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  padding: .75rem;
}

html.xantina-movil .omni-form-footer .btn {
  flex: 1 1 calc(50% - .25rem);
  margin: 0 !important;
  min-height: 46px;
}

/* --------------------------------------------------------------------------
   9. Dashboard, KPIs y modulos: indicadores a dos columnas, graficos al ancho
   -------------------------------------------------------------------------- */
html.xantina-movil .dashboard-grid {
  gap: .7rem;
}

html.xantina-movil .dashboard-kpi {
  grid-column: span 6 !important;
  padding: .75rem .8rem;
}

html.xantina-movil .dashboard-wide,
html.xantina-movil .dashboard-side,
html.xantina-movil .dashboard-half {
  grid-column: span 12 !important;
}

html.xantina-movil .dashboard-card {
  padding: .85rem;
}

html.xantina-movil .dashboard-kpi span {
  font-size: .66rem;
}

html.xantina-movil .dashboard-kpi strong {
  font-size: 1.12rem;
  overflow-wrap: anywhere;
}

html.xantina-movil .dashboard-kpi em {
  font-size: .72rem;
}

html.xantina-movil .dashboard-hero h5 {
  font-size: 1.05rem;
}

html.xantina-movil .dashboard-chart {
  height: 220px;
}

html.xantina-movil .dashboard-chart svg,
html.xantina-movil .dashboard-chart canvas,
html.xantina-movil #module-content canvas {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
}

html.xantina-movil .chart-legend {
  gap: .5rem .8rem;
  font-size: .78rem;
}

/* Indicadores de compras, aportes, financiero, costos, lotes */
html.xantina-movil .finance-kpis,
html.xantina-movil .purchases-kpis,
html.xantina-movil .xfin-kpis,
html.xantina-movil .xfin-result-grid,
html.xantina-movil .xfin-mini-metrics,
html.xantina-movil .xfin-collection-metrics,
html.xantina-movil .sale-metrics,
html.xantina-movil .dashboard-balance-grid,
html.xantina-movil .lot-forecast-total,
html.xantina-movil .inventory-summary,
html.xantina-movil .purchase-detail-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .6rem;
}

html.xantina-movil .xfin-kpi {
  min-height: 0;
  padding: 10px 12px;
}

html.xantina-movil .xfin-kpi strong {
  font-size: 18px;
}

html.xantina-movil .xfin-kpi small,
html.xantina-movil .xfin-kpi-action em {
  margin-top: 5px;
  font-size: 11px;
}

html.xantina-movil .xfin-result-grid div {
  min-height: 0;
}

html.xantina-movil .finance-kpi strong,
html.xantina-movil .purchase-kpi strong {
  font-size: 1.05rem;
}

html.xantina-movil .xfin-panel,
html.xantina-movil .finance-panel,
html.xantina-movil .purchases-panel {
  padding: .85rem;
}

html.xantina-movil .xfin-collection-sale > header,
html.xantina-movil .xfin-collection-sale > footer {
  flex-wrap: wrap;
}

html.xantina-movil .purchases-table-wrap {
  border: 0;
  padding: 0;
}

/* Catalogo visual: dos tarjetas por fila */
html.xantina-movil .product-catalog-grid,
html.xantina-movil #catalogo_productos_grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .6rem !important;
}

html.xantina-movil #costos_productos_lista {
  max-height: 50vh !important;
}

/* --------------------------------------------------------------------------
   10. Login / verificacion en dos pasos
   -------------------------------------------------------------------------- */
html.xantina-movil .accounting-layout {
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}

html.xantina-movil .accounting-brand-col {
  flex: none;
  justify-content: center;
  padding: calc(28px + env(safe-area-inset-top, 0px)) 16px 24px;
  z-index: 2;
}

html.xantina-movil .branding-content {
  align-items: center;
  max-width: 100%;
  gap: 10px;
  text-align: center;
  animation-delay: .1s;
}

html.xantina-movil .xantina-login-logo {
  max-width: 180px;
  margin-bottom: .6rem;
}

html.xantina-movil .branding-badge {
  padding: .4rem .6rem;
  font-size: .74rem;
}

html.xantina-movil .branding-title-gold {
  font-size: 1.2rem !important;
  letter-spacing: .1em !important;
}

html.xantina-movil .branding-text p {
  display: none;
}

html.xantina-movil .accounting-form-col {
  align-items: flex-start;
  width: 100%;
  padding: 0 16px calc(28px + env(safe-area-inset-bottom, 0px));
  z-index: 3;
}

html.xantina-movil .accounting-login-card {
  width: 100%;
  max-width: 100%;
  margin: -12px auto 0;
  padding: 26px 18px 22px;
  animation-delay: .3s;
}

html.xantina-movil .card-header-logo {
  margin-bottom: 18px;
}

html.xantina-movil .accounting-login-brand {
  width: 60%;
  max-width: 170px;
  margin-bottom: .5rem;
}

html.xantina-movil .accounting-login-title {
  font-size: .98rem !important;
}

html.xantina-movil .accounting-login-subtitle {
  font-size: .85rem;
}

html.xantina-movil .form-group-custom {
  margin-bottom: 16px;
}

html.xantina-movil .form-control-custom {
  height: 50px;
  font-size: 16px;
}

html.xantina-movil .icon-right {
  right: 6px;
  padding: 12px;
  font-size: 18px;
}

html.xantina-movil .btn-submit {
  height: 50px;
  font-size: 16px;
}

/* login_2fa.php (plantilla login-page de AdminLTE) */
html.xantina-movil body.login-page {
  align-items: flex-start;
  padding: calc(24px + env(safe-area-inset-top, 0px)) 0 calc(24px + env(safe-area-inset-bottom, 0px));
}

html.xantina-movil .login-box {
  width: calc(100% - 32px) !important;
  max-width: 420px;
  margin: 0 auto;
}

html.xantina-movil .login-box .card-header .h4 {
  font-size: 1.15rem;
}

html.xantina-movil .login-box .card-body {
  padding: 1.1rem 1rem 1.25rem;
}

html.xantina-movil .login-box-msg {
  padding: 0 0 14px;
  font-size: .95rem;
}

html.xantina-movil .login-box .btn-block {
  min-height: 50px;
  font-size: 16px;
}

/* El campo del codigo conserva el icono al lado (no se parte en dos lineas) */
html.xantina-movil body.login-page .input-group {
  flex-wrap: nowrap !important;
}

html.xantina-movil body.login-page .input-group > .form-control {
  flex: 1 1 auto;
  width: 1% !important;
  min-height: 50px;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

html.xantina-movil body.login-page .input-group-append {
  flex: 0 0 auto;
  width: auto;
  margin: 0 !important;
}

html.xantina-movil body.login-page .input-group-append .input-group-text {
  min-height: 50px;
  width: auto;
  border-radius: 0 6px 6px 0 !important;
}

/* seguridad_2fa.php (contenedor simple) */
html.xantina-movil body > .container {
  max-width: 100% !important;
  padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

html.xantina-movil body > .container h4 {
  font-size: 1.25rem;
}

html.xantina-movil body > .container pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 1rem !important;
  letter-spacing: .04rem !important;
}

html.xantina-movil body > .container svg {
  max-width: 100%;
  height: auto;
}

html.xantina-movil body > .container .input-group {
  max-width: 100% !important;
}

html.xantina-movil body > .container form .btn {
  min-height: 46px;
}

html.xantina-movil body > .container details summary {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* --------------------------------------------------------------------------
   11. SweetAlert2
   -------------------------------------------------------------------------- */
html.xantina-movil .swal2-popup {
  width: calc(100vw - 32px) !important;
  max-width: 480px;
  padding: 1.25rem 1rem;
  font-size: 15px;
}

html.xantina-movil .swal2-title {
  font-size: 1.2rem;
}

html.xantina-movil .swal2-actions {
  width: 100%;
  flex-wrap: wrap;
  gap: .5rem;
}

html.xantina-movil .swal2-actions .swal2-styled,
html.xantina-movil .swal2-actions .btn {
  flex: 1 1 calc(50% - .25rem);
  min-height: 46px;
  margin: 0;
}

html.xantina-movil .swal2-input,
html.xantina-movil .swal2-select,
html.xantina-movil .swal2-textarea {
  min-height: 46px;
  font-size: 16px !important;
}

/* --------------------------------------------------------------------------
   Editor de producto (Catalogo, #modalProductoInventario)
   inventario.css y el tema le dan overflow:hidden y bordes redondeados a su
   .modal-content con una regla de ID; eso anulaba la cabecera y el pie fijos de
   la seccion 8 y en el iPhone "Guardar" quedaba al final del formulario.
   Tambien: todo boton del editor de 44 px como minimo.
   -------------------------------------------------------------------------- */
html.xantina-movil #modalProductoInventario .modal-content {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Con poco contenido (alta sin tipo elegido) el pie queda abajo de la pantalla y no a media altura. */
html.xantina-movil #modalProductoInventario .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

html.xantina-movil #modalProductoInventario .btn {
  min-height: 44px;
}

html.xantina-movil #modalProductoInventario .producto-tipo-btn {
  min-height: 60px;
  font-size: 16px;
}

html.xantina-movil #modalProductoInventario .form-control-file {
  font-size: 16px !important;
}

/* Catalogo: chips de categoria en una sola fila que se desliza con el dedo */
html.xantina-movil .catalogo-filtro-categorias {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: .35rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html.xantina-movil .catalogo-filtro-categorias::-webkit-scrollbar {
  display: none;
}

html.xantina-movil .catalogo-chip {
  flex: 0 0 auto;
  font-size: 15px;
  min-height: 40px;
  padding: .45rem .9rem;
}

/* --------------------------------------------------------------------------
   Lotes (#modalLoteCafe, #modalEmpaquetarLote): el tema e inventario.css les
   ponen overflow:hidden y bordes redondeados con regla de ID, igual que al
   editor de producto; en el iPhone "Guardar" quedaba al final del formulario.
   -------------------------------------------------------------------------- */
html.xantina-movil #modalLoteCafe .modal-content,
html.xantina-movil #modalEmpaquetarLote .modal-content {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
}

html.xantina-movil #modalLoteCafe .modal-content > form,
html.xantina-movil #modalEmpaquetarLote .modal-content > form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

html.xantina-movil #modalLoteCafe .btn,
html.xantina-movil #modalEmpaquetarLote .btn {
  min-height: 44px;
}