/* =========================================================
   variables.css — Tokens de diseño centralizados
   Fuente única de verdad para colores, espaciado, z-index, etc.
   Cargado después de site.css para extender (no reemplazar).
   =========================================================

   USO:
     Para cambiar la paleta de marca: editar solo --primary / --primary-700.
     Para ajustar el layout: --radius-*, --shadow-*, --space-*.
     Para z-index consistentes: usar --z-* en lugar de valores mágicos.
   ========================================================= */

:root {

  /* --------------------------------------------------
     COLORES DE MARCA
     site.css ya define --primary, --primary-700, --bg,
     --surface, --text, --muted, --border.
     Aquí se agregan aliases semánticos y estados.
  -------------------------------------------------- */

  /* Estado: éxito */
  --color-success:        #198754;
  --color-success-hover:  #157347;
  --color-success-bg:     #d1e7dd;
  --color-success-text:   #0a3622;

  /* Estado: peligro */
  --color-danger:         #dc3545;
  --color-danger-hover:   #bb2d3b;
  --color-danger-bg:      #f8d7da;
  --color-danger-text:    #58151c;

  /* Estado: advertencia */
  --color-warning:        #ffc107;
  --color-warning-hover:  #e0a800;
  --color-warning-bg:     #fff3cd;
  --color-warning-text:   #332701;

  /* Estado: información */
  --color-info:           #0dcaf0;
  --color-info-hover:     #0aa2c0;
  --color-info-bg:        #cff4fc;
  --color-info-text:      #055160;

  /* Estado: secundario / neutro */
  --color-secondary:      #6c757d;
  --color-secondary-hover:#5c636a;
  --color-secondary-bg:   #e2e3e5;
  --color-secondary-text: #2b2d2f;

  /* --------------------------------------------------
     RADIO DE BORDES
  -------------------------------------------------- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-btn:  12px;   /* botones y pills */
  /* --radius: 16px        ← ya definido en site.css */
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* --------------------------------------------------
     SOMBRAS
  -------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.06);
  /* --shadow: 0 6px 24px rgba(0,0,0,.06)  ← site.css */
  --shadow-md: 0 8px 24px rgba(0,0,0,.09);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.12);

  /* --------------------------------------------------
     Z-INDEX (escala centralizada)
     Usar estas variables en templates y CSS en lugar
     de valores mágicos como 1050, 1080, etc.
  -------------------------------------------------- */
  --z-base:            0;
  --z-raised:          1;
  --z-dropdown:        1000;
  --z-sticky:          1020;
  --z-fixed:           1030;
  --z-modal-backdrop:  1040;
  --z-offcanvas:       1045;
  --z-modal:           1050;
  --z-modal-top:       1055;
  --z-popover:         1070;
  --z-tooltip:         1080;
  --z-toast:           1080;  /* mismo nivel que tooltip */

  /* --------------------------------------------------
     TIPOGRAFÍA (escala de tamaños)
  -------------------------------------------------- */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.125rem;  /* 18px */
  --text-lg:   1.25rem;   /* 20px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  1.75rem;   /* 28px */

  /* --------------------------------------------------
     COMPONENTES: TOAST
  -------------------------------------------------- */
  --toast-radius:     12px;
  --toast-shadow:     0 2px 12px rgba(0,0,0,.15);
  --toast-font-size:  0.95rem;

  /* --------------------------------------------------
     COMPONENTES: TABLA
     Anchos semánticos para columnas de tabla.
     Usar como: <th class="th-xs"> o via CSS col-*.
  -------------------------------------------------- */
  --col-shrink:   1%;     /* columna que se comprime al mínimo */
  --col-xs:       60px;
  --col-sm:       90px;
  --col-md:       130px;
  --col-lg:       180px;
  --col-xl:       240px;

  /* --------------------------------------------------
     CONTENEDORES SCROLLEABLES
     Los alias semánticos apuntan a los tamaños más usados.
  -------------------------------------------------- */
  --scroll-sm:   250px;   /* alias → scroll-y-250 */
  --scroll-md:   400px;   /* alias → scroll-y-400 */
  --scroll-lg:   600px;   /* alias → scroll-y-600 */
  --scroll-xl:   800px;

  /* Z-index específico para dropdowns de autocompletar
     (por encima de modales Bootstrap 1050, por debajo de tooltips 1070) */
  --z-autocomplete:         1056;
  --z-autocomplete-loading: 1057;
}


/* =========================================================
   UTILIDADES DE Z-INDEX
   Uso: class="z-modal" en lugar de style="z-index:1050"
   ========================================================= */
.z-dropdown         { z-index: var(--z-dropdown)         !important; }
.z-sticky           { z-index: var(--z-sticky)           !important; }
.z-modal-backdrop   { z-index: var(--z-modal-backdrop)   !important; }
.z-modal            { z-index: var(--z-modal)            !important; }
.z-modal-top        { z-index: var(--z-modal-top)        !important; }
.z-tooltip          { z-index: var(--z-tooltip)          !important; }
.z-toast            { z-index: var(--z-toast)            !important; }
.z-autocomplete     { z-index: var(--z-autocomplete)     !important; }
.z-autocomplete-loading { z-index: var(--z-autocomplete-loading) !important; }


/* =========================================================
   UTILIDADES DE COLUMNAS DE TABLA
   Uso: <th class="th-shrink"> o <th class="th-sm"> etc.
   ========================================================= */
.th-shrink  { width: var(--col-shrink); white-space: nowrap; }
.th-xs      { width: var(--col-xs);    white-space: nowrap; }
.th-sm      { width: var(--col-sm);    white-space: nowrap; }
.th-md      { width: var(--col-md);    white-space: nowrap; }
.th-lg      { width: var(--col-lg);    white-space: nowrap; }
.th-xl      { width: var(--col-xl);    white-space: nowrap; }
.th-auto    { width: auto; }


/* =========================================================
   UTILIDADES DE CONTENEDORES SCROLLEABLES
   Reemplazan inline: style="max-height:360px;overflow-y:auto"
   ========================================================= */
.scroll-y {
  overflow-y: auto;
  overflow-x: hidden;
}

/* Tamaños exactos (pixel) para reemplazar inline styles */
.scroll-y-150 { max-height: 150px; overflow-y: auto; }
.scroll-y-200 { max-height: 200px; overflow-y: auto; }
.scroll-y-250 { max-height: 250px; overflow-y: auto; }
.scroll-y-300 { max-height: 300px; overflow-y: auto; }
.scroll-y-400 { max-height: 400px; overflow-y: auto; }
.scroll-y-600 { max-height: 600px; overflow-y: auto; }

/* Alias semánticos */
.scroll-y-sm  { max-height: var(--scroll-sm); overflow-y: auto; }
.scroll-y-md  { max-height: var(--scroll-md); overflow-y: auto; }
.scroll-y-lg  { max-height: var(--scroll-lg); overflow-y: auto; }
.scroll-y-xl  { max-height: var(--scroll-xl); overflow-y: auto; }

/* Scrollbar discreto (WebKit) */
.scroll-y::-webkit-scrollbar,
.scroll-y-sm::-webkit-scrollbar,
.scroll-y-md::-webkit-scrollbar,
.scroll-y-lg::-webkit-scrollbar,
.scroll-y-xl::-webkit-scrollbar { width: 6px; }

.scroll-y::-webkit-scrollbar-thumb,
.scroll-y-sm::-webkit-scrollbar-thumb,
.scroll-y-md::-webkit-scrollbar-thumb,
.scroll-y-lg::-webkit-scrollbar-thumb,
.scroll-y-xl::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.15);
  border-radius: var(--radius-pill);
}

/* En móvil los scroll-containers se reducen automáticamente */
@media (max-width: 576px) {
  .scroll-y-lg { max-height: var(--scroll-md); }
  .scroll-y-xl { max-height: var(--scroll-lg); }
}


/* =========================================================
   COMPONENTE: TOAST (mueve el <style> inline de base.html)
   ========================================================= */
.toast {
  border-radius: var(--toast-radius);
  box-shadow: var(--toast-shadow);
}
.toast-body {
  font-size: var(--toast-font-size);
}

/* Contenedor global de toasts (reemplaza el inline z-index) */
.toast-container-global {
  position: fixed;
  top: 0;
  right: 0;
  padding: 1rem;
  z-index: var(--z-toast);
}


/* =========================================================
   COMPONENTE: VERSION BADGE (footer)
   ========================================================= */
.app-version {
  font-size: var(--text-xs);
  color: var(--muted, #6B7280);
}


/* =========================================================
   UTILIDADES RESPONSIVAS DE TABLAS
   Aplica .table-responsive automáticamente en mobile
   si la tabla tiene .table-auto-responsive
   ========================================================= */
@media (max-width: 767.98px) {
  .table-auto-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================================================
   UTILIDADES DE TEXTO
   ========================================================= */
.text-xs   { font-size: var(--text-xs);   }
.text-sm   { font-size: var(--text-sm);   }
.text-base { font-size: var(--text-base); }
.text-md   { font-size: var(--text-md);   }

/* Truncar texto en una línea */
.text-truncate-1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Truncar en 2 líneas */
.text-truncate-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/* =========================================================
   UTILIDADES DE LAYOUT
   ========================================================= */

/* Stack vertical con gap uniforme */
.stack-xs { display: flex; flex-direction: column; gap: .25rem; }
.stack-sm { display: flex; flex-direction: column; gap: .5rem;  }
.stack-md { display: flex; flex-direction: column; gap: 1rem;   }

/* Fila horizontal con gap uniforme */
.hstack-xs { display: flex; align-items: center; gap: .25rem; }
.hstack-sm { display: flex; align-items: center; gap: .5rem;  }
.hstack-md { display: flex; align-items: center; gap: 1rem;   }

/* Separador visual */
.divider {
  border: none;
  border-top: 1px solid var(--border, #E5E7EB);
  margin: 1rem 0;
}


/* =========================================================
   MOBILE: RESPONSIVE WIDTH HELPERS
   Bootstrap no incluye w-sm-auto — lo agregamos para el
   patrón "ancho completo en xs, auto en sm+"
   ========================================================= */
@media (min-width: 576px) {
  .w-sm-auto  { width: auto !important; }
  .w-sm-100   { width: 100% !important; }
}
@media (min-width: 768px) {
  .w-md-auto  { width: auto !important; }
  .w-md-100   { width: 100% !important; }
}


/* =========================================================
   MOBILE: PAGINACIÓN COMPACTA
   Reduce el padding de los page-link en pantallas pequeñas
   ========================================================= */
@media (max-width: 575.98px) {
  .pagination .page-link {
    padding: 0.3rem 0.55rem;
    font-size: var(--text-sm);
  }
}


/* =========================================================
   MOBILE: CARD HEADER CON BÚSQUEDA INLINE
   Apila título + input en xs; fila en sm+
   Uso: añadir .card-header-search al .card-header
   ========================================================= */
.card-header-search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: space-between;
}
.card-header-search .card-header-title {
  flex: 1 1 auto;
}
.card-header-search .card-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 200px;
  min-width: 0;
}
/* El input dentro de card-header-actions llena el espacio disponible */
.card-header-search .card-header-actions input.form-control {
  width: auto !important;
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 575.98px) {
  .card-header-search .card-header-actions {
    flex-basis: 100%;
  }
}


/* =========================================================
   MOBILE: FILTER TOOLBAR (cabecera de página con filtros)
   Para barras de filtros con fechas, dropdowns e inputs.
   Uso: añadir .filter-toolbar al contenedor de filtros.
   ========================================================= */
.filter-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: flex-end;
}
.filter-toolbar .filter-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-wrap: wrap;
}
.filter-toolbar .filter-group label {
  white-space: nowrap;
  margin-bottom: 0;
}
/* En xs: cada grupo ocupa el ancho completo */
@media (max-width: 575.98px) {
  .filter-toolbar .filter-group {
    flex-basis: 100%;
  }
  .filter-toolbar .filter-group input,
  .filter-toolbar .filter-group select {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   TRANSFER: CABECERA DE VALIDACIÓN DE PAGOS
   ========================================================= */
.transfer-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
}

.transfer-page-title {
  flex: 1 1 260px;
  min-width: 0;
}

/* Contenedor de todos los filtros */
.transfer-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}

/* Grupo individual: label + control(s) */
.tf-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.tf-label {
  font-size: .75rem;
  font-weight: 600;
  color: #6c757d;
  white-space: nowrap;
  margin-bottom: 0;
}

/* Fechas apiladas verticalmente */
.tf-dates {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

/* Rango: fechas + botón Hoy en la misma fila */
.tf-group:has(.tf-dates) {
  flex-direction: row;
  align-items: flex-end;
  gap: 0.5rem;
}
.tf-group:has(.tf-dates) .tf-label {
  align-self: flex-start;
  padding-top: .15rem;
}

.tf-select {
  min-width: 120px;
}

.tf-btn-reporte {
  align-self: flex-end;
}

/* ---- Responsive móvil ---- */
@media (max-width: 767.98px) {
  .transfer-page-header {
    flex-direction: column;
  }
  .transfer-page-title {
    flex: auto; /* Evitar que el flex-basis de 260px se vuelva altura (causando gran espacio en móvil) */
    width: 100%;
  }
  .transfer-filters {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .tf-group {
    flex-direction: column !important;
    width: 100%;
  }
  .tf-group:has(.tf-dates) {
    flex-direction: column !important;
    align-items: stretch;
  }
  .tf-dates {
    flex-direction: row;
    gap: 0.5rem;
  }
  .tf-dates .form-control {
    flex: 1;
  }
  .tf-select {
    width: 100%;
  }
  .tf-btn-reporte {
    width: 100%;
    text-align: center;
  }
  #btnHoy {
    width: 100%;
  }
}

/* =========================================================
   PASOS DE PAGO (1 · 2 · 3) — badge circular + botón paso 3
   ========================================================= */
.badge-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  font-size: 0.65rem;
  font-weight: 800;
  color: #fff;
  vertical-align: middle;
  flex-shrink: 0;
  line-height: 1;
}
.paso-1 { background-color: #0d6efd; }   /* azul  — Pago Recibido del PDV          */
.paso-2 { background-color: #198754; }   /* verde — Comisión Recibida del Proveedor */
.paso-3 { background-color: #e85d04; }   /* naranja — Pago Comisión a PDV          */

/* Botón naranja para paso 3 */
.btn-paso3 {
  --bs-btn-color: #fff;
  --bs-btn-bg: #e85d04;
  --bs-btn-border-color: #e85d04;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #c44d00;
  --bs-btn-hover-border-color: #c44d00;
  --bs-btn-active-bg: #a84300;
  --bs-btn-active-border-color: #a84300;
}

/* =========================================================
   MOBILE: OCULTAR COLUMNAS OPCIONALES EN TABLAS
   Añadir .col-optional a <th>/<td> para ocultar en mobile
   ========================================================= */
@media (max-width: 767.98px) {
  .col-optional {
    display: none !important;
  }
}


/* =========================================================
   MOBILE: BOTONES DE ACCIÓN EN CABECERA DE PÁGINA
   Apila los botones en xs cuando se añade .page-header-actions
   ========================================================= */
@media (max-width: 575.98px) {
  .page-header-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100%;
  }
  .page-header-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   SIDEBAR LAYOUT
   ========================================================= */

:root {
  --sidebar-width: 240px;
  --topbar-height: 52px;
}

/* --- Sidebar --- */
.app-sidebar {
  position: sticky; /* Integrado al flujo del body en lugar de fixed */
  top: 0;
  height: 100vh;
  flex-shrink: 0;
  width: var(--sidebar-width);
  background: #fff;
  border-right: 1px solid rgba(0,0,0,.08);
  z-index: var(--z-fixed);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}
.app-sidebar::-webkit-scrollbar { width: 4px; }
.app-sidebar::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 4px; }

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .65rem 1rem;
  border-bottom: 1px solid rgba(0,0,0,.06);
  flex-shrink: 0;
}
.sidebar-brand img { height: 36px; width: auto; }

.btn-sidebar-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #6c757d;
  cursor: pointer;
  padding: .25rem .4rem;
  border-radius: 6px;
  line-height: 1;
}
.btn-sidebar-close:hover { background: rgba(0,0,0,.05); color: #212529; }

.sidebar-nav { flex: 1; padding: .35rem 0 1rem; }

/* Enlace directo (sin submenú) */
.sidebar-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  color: #212529;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  transition: background .1s;
}
.sidebar-link:hover { background: rgba(0,0,0,.04); color: #212529; text-decoration: none; }
.sidebar-link.active { background: var(--primary, #AE1926); color: #fff; }
.sidebar-link.active:hover { background: var(--primary-700, #8F0C18); color: #fff; }
.sidebar-link .bi, .sidebar-link i { font-size: 1rem; flex-shrink: 0; }

/* Enlace de sección colapsable */
.sidebar-toggle-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem .9rem;
  color: #212529;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .1s;
  user-select: none;
}
.sidebar-toggle-link:hover { background: rgba(0,0,0,.04); color: #212529; text-decoration: none; }
.sidebar-toggle-link.active { color: var(--primary, #AE1926); font-weight: 700; }
.sidebar-toggle-link .bi:first-child, .sidebar-toggle-link i:first-child { font-size: 1rem; flex-shrink: 0; }

/* Chevron rotatorio */
.sidebar-chevron {
  font-size: .7rem;
  opacity: .5;
  flex-shrink: 0;
  transition: transform .2s ease;
}
.sidebar-toggle-link.open .sidebar-chevron { transform: rotate(180deg); }

/* Etiqueta de sección sin colapso */
.sidebar-section-label {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .9rem .2rem;
  color: #9ca3af;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.sidebar-section-label i { font-size: 0.85rem; flex-shrink: 0; }

/* Submenú */
.sidebar-submenu { padding: .1rem 0 .2rem; background: rgba(0,0,0,.018); }
/* Submenú siempre visible (sin colapso) */
.sidebar-submenu--open { background: transparent; padding-bottom: .5rem; }

.sidebar-submenu-header {
  padding: .4rem .9rem .15rem 2rem;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9ca3af;
}

.sidebar-sublink {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .9rem .42rem 2rem;
  font-size: 1rem;
  color: #495057;
  text-decoration: none;
  transition: background .1s, color .1s;
}
.sidebar-sublink:hover { background: rgba(0,0,0,.04); color: #212529; text-decoration: none; }
.sidebar-sublink.active { color: var(--primary, #AE1926); font-weight: 600; background: rgba(174,25,38,.06); }
.sidebar-sublink .bi, .sidebar-sublink i { font-size: .78rem; opacity: .7; flex-shrink: 0; }

/* --- Main wrapper --- */
.app-wrapper {
  margin-left: 0; /* Ya no es necesario margin porque el sidebar está en el flujo normal */
  flex: 1;
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* --- Topbar --- */
.app-topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
  display: flex;
  align-items: center;
  padding: 0 1rem;
  z-index: var(--z-sticky);
  backdrop-filter: saturate(180%) blur(8px);
  flex-shrink: 0;
}

/* --- Top navbar flow links --- */
.top-navbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 1.5rem;
}
.top-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.top-nav-link:hover {
  background: #f3f4f6;
  color: #111827;
}
.top-nav-link.active {
  color: #dc2626;
  font-weight: 700;
  background: #fef2f2;
}
@media (max-width: 767.98px) {
  .top-nav-link span { display: none; }
  .top-nav-link { padding: 0.3rem 0.5rem; font-size: 1.1rem; }
}

/* --- Overlay móvil --- */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: calc(var(--z-fixed) - 1);
}
.sidebar-overlay.show { display: block; }

/* --- Ajuste de app-main dentro del wrapper --- */
.app-wrapper .app-main {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  box-sizing: border-box;
}

/* --- Centered App Layout (Body as Container) --- */
html {
  background-color: #fff; /* Fondo blanco en lugar de gris para no descuadrar */
}

body.sidebar-layout {
  display: flex;
  max-width: 1600px; /* Ancho máximo total de la app */
  margin: 0 auto;
  background-color: #fff;
  box-shadow: 0 0 25px rgba(0,0,0,0.05); /* Sombra para diferenciar del fondo */
  overflow-x: hidden;
  position: relative;
}

/* Override legacy main rule for sidebar layout */
body.sidebar-layout main {
  max-width: 100% !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* --- Typography scaling: admin content proportional to sidebar nav --- */
body.sidebar-layout .app-main {
  font-size: 0.875rem; /* Reducción global del tamaño base de toda la vista a 14px */
}
body.sidebar-layout .app-main h1 { font-size: 1.45rem; }
body.sidebar-layout .app-main h2 { font-size: 1.25rem; }
body.sidebar-layout .app-main h3 { font-size: 1.1rem; }
body.sidebar-layout .app-main h4,
body.sidebar-layout .app-main h5,
body.sidebar-layout .app-main h6 { font-size: 0.95rem; }
body.sidebar-layout .app-main p,
body.sidebar-layout .app-main .form-label,
body.sidebar-layout .app-main td,
body.sidebar-layout .app-main th,
body.sidebar-layout .app-main input,
body.sidebar-layout .app-main select,
body.sidebar-layout .app-main textarea,
body.sidebar-layout .app-main .btn { font-size: 0.875rem; }

/* --- Mobile: sidebar off-canvas --- */
@media (max-width: 991.98px) {
  html {
    background-color: #fff; /* Reset fondo en móvil */
  }
  body.sidebar-layout {
    display: block; /* Desactiva el flexbox del layout modular en móvil */
    width: 100%;
    max-width: 100%;
    box-shadow: none; /* Sin sombra en móvil, diseño a pantalla completa */
  }
  .app-sidebar {
    position: fixed; /* En móviles vuelve a ser fixed para ocultarse */
    top: 0; left: 0; bottom: 0;
    height: 100%;
    transform: translateX(-100%);
    z-index: var(--z-fixed);
  }
  .app-sidebar.show {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }
  .app-wrapper {
    margin-left: 0;
  }
}

@media (max-width: 575.98px) {
  .app-wrapper .app-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* =========================================================
   CF-CARD — Lista de movimientos (control_gastos)
   Reemplaza la tabla clásica con tarjetas horizontales
   compactas para optimizar el espacio vertical.
   ========================================================= */

#movimientosCardList,
#movimientosCardListClosed,
#tblSalesBody,
#tblCanceladasBody,
#tblPend-body,
#tblApr-body,
#tblRenovaciones-body {
  font-size: 0.78rem;
}

.cf-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-bottom: 1px solid var(--bs-border-color, #dee2e6);
  transition: background-color 0.1s;
  min-height: 2.6rem;
}
.cf-card:last-child { border-bottom: none; }
.cf-card:hover { background-color: #f8f9fa; }

/* Checkbox */
.cf-check {
  flex-shrink: 0;
  width: 1.8rem;
  display: flex;
  align-items: center;
}

/* Fecha */
.cf-date {
  flex-shrink: 0;
  width: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.25;
  color: #495057;
}
.cf-time {
  font-size: 0.7rem;
  color: #6c757d;
}

/* Badges de tipo/contable/categoría */
.cf-badges {
  flex-shrink: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  width: 13rem;
  overflow: hidden;
}
.cf-badges .badge {
  font-size: 0.65rem;
  padding: 0.18em 0.45em;
  font-weight: 600;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Producto + nota */
.cf-product {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cf-product-name {
  font-weight: 600;
  font-size: 0.8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-product-note {
  font-size: 0.7rem;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Monto total */
.cf-amount {
  flex-shrink: 0;
  min-width: 5.5rem;
  text-align: right;
  font-weight: 700;
  font-size: 0.83rem;
}

/* Meta: aseguradora + punto de venta */
.cf-meta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 10rem;
  overflow: hidden;
}
.cf-meta .badge {
  font-size: 0.65rem;
  padding: 0.18em 0.45em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.cf-receipt {
  font-size: 0.72rem;
  color: #6c757d;
}
.cf-receipt:hover { color: #0d6efd; }
.cf-by {
  font-size: 0.67rem;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 10rem;
}

/* Acciones — solo íconos, compactos */
.cf-actions {
  flex-shrink: 0;
  display: flex;
  gap: 3px;
}
.btn-xs {
  padding: 0.15rem 0.35rem;
  font-size: 0.7rem;
  line-height: 1.2;
  border-radius: 0.25rem;
}

/* Mobile: 4 filas organizadas */
@media (max-width: 575.98px) {
  .cf-card {
    flex-wrap: wrap;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    align-items: flex-start;
  }

  /* Fila 1: checkbox | fecha | placa+cliente | monto */
  .cf-check   { order: 1; width: auto; align-self: center; }
  .cf-date    { order: 2; width: auto; min-width: 3.8rem; align-self: center; }
  .cf-product { order: 3; flex: 1; min-width: 0; }
  .cf-amount  { order: 4; min-width: auto; align-self: center; }

  /* Fila 2: badges — ancho completo */
  .cf-badges  { order: 5; width: 100%; overflow: visible; }

  /* Fila 3: aseguradora + punto de venta — ancho completo */
  .cf-meta {
    order: 6;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    overflow: visible;
    gap: 0.25rem;
    align-items: center;
  }
  .cf-meta .badge { max-width: none; white-space: normal; }
  .cf-by { max-width: none; }

  /* Fila 4: botones — ancho completo, lado a lado */
  .cf-actions {
    order: 7;
    width: 100%;
    gap: 0.4rem;
  }
  .cf-actions .btn {
    flex: 1;
    justify-content: center;
  }
}