:root {
  --garvix-primary: #F20D20;
  --garvix-primary-hover: #D00B1C;
  --garvix-primary-active: #B00918;
  --garvix-primary-soft: rgba(242, 13, 32, 0.08);
  --garvix-hero-dark: #101820;
  --garvix-bright: #FF3B4A;
  --garvix-gold: #e8a33d;
  --garvix-gradient: linear-gradient(135deg, var(--garvix-bright) 0%, var(--garvix-primary) 60%, #C70A1A 100%); /* botones y acentos: solo rojo de la marca */
  --garvix-gradient-icon: linear-gradient(135deg, var(--garvix-bright), var(--garvix-primary) 80%);
  --garvix-gradient-soft: linear-gradient(160deg, rgba(242, 13, 32, 0.1), rgba(242, 13, 32, 0.02) 70%);
  --garvix-sidebar-bg: #ffffff;
  --garvix-sidebar-border: #e6e9ee;
  --garvix-radius: 16px;
  /* Marca GARVIX: rojo #F20D20 y negro #101820. La barra va en el negro de la marca y el rojo resalta lo activo. */
  --garvix-black: #101820;
  --gx-rail-bg: linear-gradient(180deg, #101820 0%, #0B1117 100%);

  /* Escala de neutros: la familia fría del negro de la marca (#101820), 5 pasos. */
  --ink-900: #101820;
  --ink-700: #3d4652;
  --ink-500: #7a8492;
  --ink-300: #c5cbd3;
  --line: #e6e9ee;
  --surface: #f5f7f9;
  --surface-page: #f7f8fa;

  --garvix-sidebar-fg: var(--ink-700);

  --font-sans: 'Satoshi', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --bs-font-sans-serif: var(--font-sans);
  --bs-body-font-family: var(--font-sans);
}

/* ==== Modo oscuro (global, activado con <html data-bs-theme="dark">) ====
   Bootstrap 5.3 ya trae su propio modo oscuro: con data-bs-theme="dark" en
   <html>, TODOS sus componentes (.card, .modal, .table, .form-control,
   .dropdown-menu, etc.) cambian solos via sus propias variables --bs-*. Aqui
   solo hace falta redefinir las variables propias de Garvix (mismo nombre,
   nuevo valor oscuro) — como ya se usan en cascada en todo este archivo, el
   resto de las reglas de abajo heredan el cambio sin tocarlas una por una.
   Ver assets/js/theme.js para el toggle y la persistencia (localStorage). */
html[data-bs-theme="dark"] {
  --garvix-sidebar-bg: #121B24;
  --garvix-sidebar-border: #24303c;
  --garvix-primary-soft: rgba(242, 13, 32, 0.18);
  /* El rojo de marca (#F20D20) usado como texto no se lee sobre fondo
     oscuro: en este modo se usa un rojo mas claro (botones, enlaces,
     activos, montos). */
  --garvix-primary: #FF4D5A;
  --garvix-primary-hover: #E8303F;
  --garvix-primary-active: #D0283A;
  --gx-rail-bg: linear-gradient(180deg, #0B1117 0%, #080D12 100%);

  /* Fondos oscuros a partir del negro de la marca. */
  --ink-900: #eef1f5;
  --ink-700: #c3cad3;
  --ink-500: #8b95a2;
  --ink-300: #4a5562;
  --line: #24303c;
  --surface: #151e28;
  --surface-page: #0b1117;
}

/* Clases de utilidad de Bootstrap que son color fijo (no variable), asi que
   no cambian solas con data-bs-theme — se corrigen aqui de una vez para
   todo el sitio en vez de tocar cada pagina que las usa. */
html[data-bs-theme="dark"] .bg-white { background-color: var(--surface) !important; }
html[data-bs-theme="dark"] .bg-light,
html[data-bs-theme="dark"] .bg-light-subtle { background-color: var(--surface) !important; color: var(--ink-900); }
html[data-bs-theme="dark"] .text-dark { color: var(--ink-900) !important; }
html[data-bs-theme="dark"] .shadow-sm,
html[data-bs-theme="dark"] .shadow { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35) !important; }

* {
  font-family: var(--font-sans);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  background: var(--surface-page);
  color: var(--ink-900);
  font-size: 0.925rem;
  line-height: 1.55;
  overscroll-behavior-y: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body::-webkit-scrollbar {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}

p {
  line-height: 1.6;
}

small, .small {
  line-height: 1.5;
}

a {
  color: var(--garvix-primary);
  text-decoration: none;
}
a:hover {
  color: var(--garvix-primary-hover);
}

.text-muted {
  color: var(--ink-500) !important;
}

/* ==== Bootstrap color integration ==== */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: 0.005em;
}

.btn-primary {
  --bs-btn-bg: var(--garvix-primary);
  --bs-btn-border-color: var(--garvix-primary);
  --bs-btn-hover-bg: var(--garvix-primary-hover);
  --bs-btn-hover-border-color: var(--garvix-primary-hover);
  --bs-btn-active-bg: var(--garvix-primary-active);
  --bs-btn-active-border-color: var(--garvix-primary-active);
  --bs-btn-disabled-bg: var(--garvix-primary);
  --bs-btn-disabled-border-color: var(--garvix-primary);
  --bs-btn-focus-shadow-rgb: 148, 0, 0;
  background-image: linear-gradient(135deg, var(--garvix-bright), var(--garvix-primary) 75%);
  border: none;
  box-shadow: 0 6px 16px rgba(242, 13, 32, 0.32);
  transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.btn-primary:hover {
  filter: brightness(1.06);
  box-shadow: 0 8px 20px rgba(242, 13, 32, 0.4);
}

.btn-primary:active {
  transform: translateY(1px);
}

.btn-dark {
  background-image: linear-gradient(135deg, #2b2528, var(--ink-900) 80%);
  border: none;
}

.btn-outline-primary {
  --bs-btn-color: var(--garvix-primary);
  --bs-btn-border-color: var(--garvix-primary);
  --bs-btn-hover-bg: var(--garvix-primary);
  --bs-btn-hover-border-color: var(--garvix-primary);
  --bs-btn-active-bg: var(--garvix-primary);
  --bs-btn-active-border-color: var(--garvix-primary);
  --bs-btn-focus-shadow-rgb: 148, 0, 0;
}

.btn-outline-secondary {
  --bs-btn-color: var(--ink-700);
  --bs-btn-border-color: var(--garvix-sidebar-border);
}

.text-primary {
  color: var(--garvix-primary) !important;
}

.bg-primary,
.badge.bg-primary {
  background-color: var(--garvix-primary) !important;
  background-image: linear-gradient(135deg, var(--garvix-bright), var(--garvix-primary));
}

.badge {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.42em 0.8em;
}

/* ==== Objetivos de tacto (tablet/celular): botones, cierres de modal y
   checkboxes deben medir al menos ~44px para tocarse con el dedo sin
   fallar, ya que el negocio los usa parado en la caja registradora. ==== */
@media (max-width: 991.98px) {
  .btn-sm {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  .btn-close {
    padding: 0.85em;
  }
  .form-check-input {
    width: 1.3em;
    height: 1.3em;
  }
  .form-check {
    min-height: 1.7em;
    padding-left: 2em;
  }
  .form-check .form-check-input {
    margin-left: -2em;
  }

  /* Sin barra de scroll visible en tablet/celular: se sigue pudiendo
     desplazar, solo que como en cualquier app no se ve la barra. */
  html {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  html::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  body::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  * {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  *::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

.nav-pills .nav-link {
  border-radius: 999px;
  font-weight: 600;
  color: var(--ink-700);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--garvix-primary);
  box-shadow: 0 4px 10px rgba(242, 13, 32, 0.25);
}

.form-label {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-900);
  margin-bottom: 0.35rem;
}

.form-control,
.form-select {
  border-radius: 10px;
  border-color: var(--garvix-sidebar-border);
  font-size: 0.9rem;
  color: var(--ink-900);
}
.form-control::placeholder {
  color: var(--ink-300);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--garvix-primary);
  box-shadow: 0 0 0 0.25rem rgba(242, 13, 32, 0.15);
}
.form-text {
  color: var(--ink-500);
  font-size: 0.78rem;
}

/* ==== Cards & tables ==== */
.card {
  border: none;
  border-radius: var(--garvix-radius);
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 6px 18px rgba(30, 20, 25, 0.06);
}

.card-header {
  background: var(--garvix-sidebar-bg);
  border-bottom: 1px solid var(--line);
  border-radius: var(--garvix-radius) var(--garvix-radius) 0 0 !important;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-900);
  padding: 1rem 1.25rem;
}

.card .table-responsive {
  border-radius: 0 0 var(--garvix-radius) var(--garvix-radius);
  overflow: hidden;
}

.table {
  --bs-table-hover-bg: var(--garvix-primary-soft);
  margin-bottom: 0;
  font-size: 0.88rem;
}

.table > :not(caption) > * > * {
  padding: 0.85rem 1.15rem;
  border-bottom-color: var(--line);
}

.table thead th {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .table thead th {
    white-space: normal;
  }
  .table > :not(caption) > * > * {
    padding: 0.6rem 0.6rem;
  }

  /* Tablas -> tarjetas apiladas en movil: cada fila se convierte en una
     tarjeta con pares etiqueta/valor, en vez de forzar scroll horizontal
     que deja la informacion "cortada" fuera de vista. app.js agrega el
     atributo data-label a cada <td> tomandolo del <th> de su columna. */
  .table-responsive {
    overflow-x: visible;
    border: none;
  }
  /* Las tablas que no se apilan (formularios de la DGII, matrices) siguen
     con scroll propio: si no, ensanchan toda la página. */
  .table-responsive:not(:has(> .table-stack)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .table-stack {
    border: none;
  }
  .table-stack thead {
    display: none;
  }
  .table-stack, .table-stack tbody {
    display: block;
    width: 100%;
  }
  .table-stack tr {
    display: block;
    background: var(--garvix-sidebar-bg);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 0.4rem 0.85rem;
    margin-bottom: 0.65rem;
    box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04);
  }
  .table-stack tr:last-child {
    margin-bottom: 0;
  }
  .table-stack td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.9rem;
    padding: 0.55rem 0;
    border-bottom: 1px solid var(--line);
    text-align: right;
    white-space: normal;
    word-break: break-word;
  }
  .table-stack td:last-child {
    border-bottom: none;
  }
  .table-stack td[data-label]::before {
    content: attr(data-label);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    text-align: left;
    flex-shrink: 0;
  }
  .table-stack td:not([data-label])::before,
  .table-stack td[data-label=""]::before {
    content: none;
  }
  .table-stack td:not([data-label]),
  .table-stack td[data-label=""] {
    justify-content: flex-end;
  }
  .table-stack td[colspan] {
    display: block;
    text-align: center;
  }
  .table-stack td[colspan]::before {
    content: none;
  }
}

.table tbody tr {
  transition: background 0.12s ease;
}

.table tbody tr:last-child > * {
  border-bottom: none;
}

.table tbody td,
.table tbody th {
  vertical-align: middle;
  color: var(--ink-700);
  font-weight: 500;
}

.table tbody td:first-child,
.table tbody th:first-child {
  font-weight: 600;
  color: var(--ink-900);
}

.table tfoot th {
  background: var(--surface);
  border-top: 2px solid var(--line);
  font-weight: 700;
  color: var(--ink-900);
}

.table td .btn-sm,
.table th .btn-sm {
  border-radius: 8px;
}

.table-sm > :not(caption) > * > * {
  padding: 0.6rem 0.9rem;
}

/* ==== Layout ==== */
.garvix-layout {
  display: flex;
  min-height: 100vh;
}

/* ==== Menu: rail de iconos (secciones) + panel (enlaces de la seccion) ==== */
.garvix-sidebar {
  display: flex;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 1030;
  color: var(--garvix-sidebar-fg);
}

.gx-rail {
  width: 76px;
  flex-shrink: 0;
  background: var(--gx-rail-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 0 1rem;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.gx-rail::-webkit-scrollbar {
  display: none;
}

.garvix-brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--garvix-gradient-icon);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 14px rgba(242, 13, 32, 0.38);
}
/* El símbolo de GARVIX como imagen: sobre una ficha blanca (se ve igual en barras oscuras y claras). */
img.garvix-brand-mark { background: #fff !important; padding: 3px; box-shadow: 0 2px 8px rgba(16, 24, 32, 0.12) !important; object-fit: contain !important; }
.gx-rail-marca .garvix-brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--garvix-primary);
  box-shadow: 0 6px 16px rgba(242, 13, 32, 0.35);
}

.gx-rail-grupos,
.gx-rail-abajo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  width: 100%;
  padding: 0 0.45rem;
}
.gx-rail-abajo {
  margin-top: auto;
}

.gx-rail-btn {
  position: relative;
  width: 100%;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 0;
  border-radius: 12px;
  font-size: 0.62rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}
.gx-rail-icono {
  position: relative;
  width: 42px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.12rem;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.gx-rail-label {
  max-width: 100%;
  padding: 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gx-rail-btn:hover,
.gx-rail-btn:focus-visible {
  color: #fff;
}
.gx-rail-btn:hover .gx-rail-icono {
  background: rgba(255, 255, 255, 0.12);
}
/* Seccion que se ve en el panel: ficha en el rojo de la marca sobre la barra negra. */
.gx-rail-btn.seleccionado,
.gx-rail-btn.seleccionado-link {
  color: #fff;
}
.gx-rail-btn.seleccionado .gx-rail-icono,
.gx-rail-btn.seleccionado-link .gx-rail-icono {
  background: var(--garvix-primary);
  color: #fff;
  box-shadow: 0 4px 14px rgba(242, 13, 32, 0.4);
}
/* Seccion de la pagina actual: barrita en el borde del rail. */
.gx-rail-btn.es-actual::before {
  content: '';
  position: absolute;
  left: -0.45rem;
  top: 0.55rem;
  width: 3px;
  height: 22px;
  border-radius: 0 3px 3px 0;
  background: var(--garvix-primary);
}
.gx-rail-punto {
  position: absolute;
  top: 3px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--garvix-gold);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.18);
}
.gx-rail-avatar {
  width: 36px;
  height: 36px;
  margin-top: 0.45rem;
  border-radius: 50%;
  border: 2px solid transparent;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: border-color 0.15s ease;
}
.gx-rail-avatar:hover,
.gx-rail-avatar.es-actual {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
}

.gx-panel {
  width: 228px;
  min-height: 0;
  background: var(--garvix-sidebar-bg);
  border-right: 1px solid var(--garvix-sidebar-border);
  display: flex;
  flex-direction: column;
}
.gx-panel-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1.05rem 0.75rem 0.95rem 1rem;
  border-bottom: 1px solid var(--garvix-sidebar-border);
}
.gx-negocio-logo {
  max-width: 44px;
  height: 28px;
  flex-shrink: 0;
  object-fit: contain;
  object-position: left center;
  border-radius: 6px;
}
.gx-negocio-logo-vacio {
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  border-radius: 8px;
  font-size: 0.85rem;
}
.gx-negocio-nombre {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.25;
  color: var(--ink-900);
}
.gx-panel-plegar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gx-panel-plegar:hover {
  background: var(--surface);
  color: var(--ink-900);
}

.gx-panel-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 0.95rem 0.6rem;
  scrollbar-width: none;
}
.gx-panel-body::-webkit-scrollbar {
  display: none;
}
.gx-panel-grupo {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  animation: gxPanelEntrar 0.18s ease;
}
.gx-panel-grupo[hidden] {
  display: none;
}
@keyframes gxPanelEntrar {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: none; }
}
/* Plan en dias de gracia (barra) y vencido (ventana en cada pagina). */
.gx-plan-aviso {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: #fff4e0;
  border: 1px solid #f3c27a;
  color: #7a4a05;
  font-size: 0.88rem;
}
.gx-plan-aviso > i { font-size: 1.2rem; color: #d48806; }
html[data-bs-theme="dark"] .gx-plan-aviso { background: rgba(232, 163, 61, .14); border-color: rgba(232, 163, 61, .4); color: #f3c27a; }
.gx-plan-modal { border: none; border-radius: 22px; }
.gx-plan-modal-icono {
  width: 64px; height: 64px; border-radius: 20px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: var(--garvix-primary-soft); color: var(--garvix-primary); font-size: 1.8rem;
}

/* Super admin dentro de una empresa ("entrar como"). */
.gx-impersonando {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  background: #1f2937;
  color: #fff;
  font-size: 0.88rem;
}
.gx-impersonando > i { font-size: 1.3rem; color: #fbbf24; }

/* Pista del panel de Inicio: como abrir las demas secciones. */
.gx-panel-pista {
  margin: 1rem 0.5rem 0;
  padding: 0.6rem 0.7rem;
  border-radius: 10px;
  background: var(--surface-page);
  color: var(--ink-500);
  font-size: 0.78rem;
  line-height: 1.4;
}
.gx-panel-titulo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.1rem 0.5rem 0.8rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.gx-panel-titulo-icono {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--garvix-gradient-icon);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  box-shadow: 0 4px 10px rgba(242, 13, 32, 0.25);
}
.garvix-nav-sublabel {
  padding: 0.85rem 0.6rem 0.3rem;
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
}
.garvix-nav .nav-link {
  color: var(--ink-700);
  padding: 0.5rem 0.6rem;
  border-radius: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-icon {
  width: 20px;
  flex-shrink: 0;
  text-align: center;
  font-size: 1rem;
  color: var(--ink-500);
  transition: color 0.15s ease;
}
.garvix-nav .nav-link:hover {
  background: var(--surface);
  color: var(--ink-900);
}
.garvix-nav .nav-link:hover .nav-icon {
  color: var(--ink-700);
}
.garvix-nav .nav-link.active {
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  font-weight: 700;
}
.garvix-nav .nav-link.active .nav-icon {
  color: var(--garvix-primary);
}

.gx-panel-foot {
  border-top: 1px solid var(--garvix-sidebar-border);
  padding: 0.8rem 0.75rem 0.95rem;
}
.gx-usuario {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.2rem 0.7rem;
}
.gx-usuario-nombre {
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
}
.garvix-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--garvix-primary-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: var(--garvix-primary);
  flex-shrink: 0;
}
.garvix-role {
  color: var(--ink-500);
  font-weight: 600;
  font-size: 0.74rem;
}
.gx-acciones {
  display: flex;
  gap: 0.35rem;
}
.gx-accion {
  flex: 1;
  height: 34px;
  border: 1px solid var(--garvix-sidebar-border);
  border-radius: 9px;
  background: transparent;
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gx-accion:hover {
  background: var(--surface);
  color: var(--ink-900);
}
.gx-accion-salir:hover {
  background: var(--garvix-primary-soft);
  border-color: transparent;
  color: var(--garvix-primary);
}

/* Escritorio: el panel se puede plegar y queda solo el rail. Plegado, la
   ficha blanca pasa a marcar la seccion de la pagina actual. */
@media (min-width: 992px) {
  html.gx-menu-compacto .gx-panel {
    display: none;
  }
  html.gx-menu-compacto .gx-rail-btn.seleccionado:not(.es-actual) .gx-rail-icono {
    background: transparent;
    color: inherit;
    box-shadow: none;
  }
  html.gx-menu-compacto .gx-rail-btn.es-actual .gx-rail-icono {
    background: #fff;
    color: var(--garvix-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  }
}

.garvix-main {
  flex: 1;
  min-width: 0;
  position: relative;
}

.garvix-topbar {
  display: none;
  flex-direction: column;
  background-image: none; background-color: var(--garvix-black, #101820); border-bottom: 3px solid var(--garvix-primary);
  position: sticky;
  top: 0;
  z-index: 1050;
  box-shadow: 0 4px 14px rgba(242, 13, 32, 0.18);
  /* Fuerza su propia capa de composicion: sin esto, el WebView de Android
     puede "pintar" este elemento fijo como parte del contenido que hace
     scroll en vez de mantenerlo pegado, un bug clasico de ese motor. */
  transform: translateZ(0);
  will-change: transform;
}

.garvix-topbar-row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.5rem;
}

.garvix-topbar-icon-btn {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.15rem;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.garvix-topbar-icon-btn:active {
  background: rgba(255, 255, 255, 0.18);
}

.garvix-topbar-title {
  flex: 1 1 auto;
  min-width: 0;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0 0.3rem;
}

.garvix-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 0.3rem;
}

.garvix-topbar-brand img {
  max-width: 60px;
  height: 32px;
  border-radius: 9px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
}

.garvix-topbar-brand-fallback {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1rem;
}

.garvix-topbar-brand .garvix-topbar-title {
  flex: 1 1 auto;
  padding: 0;
}

.garvix-topbar-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  position: relative;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease,
              transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              padding-bottom 0.45s ease;
}

.garvix-topbar-search.open {
  max-height: 70px;
  opacity: 1;
  transform: translateY(0);
  padding-bottom: 0.6rem;
}

.garvix-topbar-search i {
  position: absolute;
  left: 1.5rem;
  color: var(--ink-300);
  font-size: 0.9rem;
}

.garvix-topbar-search input {
  width: 100%;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1rem 0.6rem 2.2rem;
  font-size: 0.88rem;
  background: #fff;
  color: var(--ink-900);
}

.garvix-topbar-search input:focus {
  outline: none;
}

.garvix-overlay {
  display: none;
}

.garvix-sidebar-close {
  display: none;
}

.garvix-tabbar {
  display: none;
}

/* ==== Escritorio (>=992px): sidebar completo, sin cambios ==== */

/* ==== Tablet y celular app (<992px): sidebar oculto (se abre como cajon
   de pantalla completa con el boton "Mas") + menu principal abajo con
   barra de pestanas, igual que una app real ==== */
@media (max-width: 991.98px) {
  /* El mismo rail + panel, como cajon de pantalla completa (boton "Mas"). */
  .garvix-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .garvix-sidebar.open {
    transform: translateX(0);
  }
  .gx-rail {
    width: 84px;
    padding-top: max(1rem, env(safe-area-inset-top));
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
  .gx-rail-btn {
    font-size: 0.66rem;
    padding: 0.5rem 0;
  }
  .gx-rail-icono {
    width: 48px;
    height: 36px;
    font-size: 1.25rem;
  }
  .gx-panel {
    flex: 1;
    width: auto;
    min-width: 0;
    border-right: none;
    background: var(--surface-page);
  }
  .gx-panel-head {
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
    background: var(--garvix-sidebar-bg);
  }
  .gx-panel-plegar {
    display: none;
  }
  .garvix-sidebar-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border: none;
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink-700);
    font-size: 1rem;
  }
  .gx-panel-body {
    padding: 1.1rem 0.85rem;
  }
  .gx-panel-titulo {
    font-size: 1.25rem;
    padding-bottom: 1rem;
  }
  .gx-panel-titulo-icono {
    width: 36px;
    height: 36px;
    border-radius: 11px;
    font-size: 1.05rem;
  }
  .gx-panel-grupo {
    gap: 0.4rem;
  }
  .garvix-nav .nav-link {
    padding: 0.8rem 0.85rem;
    border-radius: 13px;
    font-size: 0.95rem;
    background: var(--garvix-sidebar-bg);
    box-shadow: 0 1px 2px rgba(20, 15, 20, 0.05);
  }
  .garvix-nav .nav-link:active {
    background: var(--surface);
  }
  .garvix-nav .nav-link.active {
    background: var(--garvix-primary-soft);
    box-shadow: none;
  }
  .nav-icon {
    width: 22px;
    font-size: 1.1rem;
  }
  .gx-panel-foot {
    padding: 0.8rem 0.85rem max(0.95rem, env(safe-area-inset-bottom));
    background: var(--garvix-sidebar-bg);
  }
  .gx-accion {
    height: 40px;
  }
  .garvix-overlay.open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1055;
  }
  .garvix-topbar-movil {
    display: flex;
  }
  .garvix-tabbar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: var(--garvix-sidebar-bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(20, 15, 20, 0.06);
    padding: 0.4rem 0.25rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    gap: 2px;
    /* Ver nota en .garvix-topbar: fuerza capa GPU propia para que el menu
       se quede realmente fijo en el WebView de Android. */
    transform: translateZ(0);
    will-change: transform;
  }
  .garvix-main {
    padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px));
  }
}

/* Barra de pestanas (celular): la pestana activa lleva una pildora detras
   del icono. */
.garvix-tab {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.15rem 0.1rem;
  color: var(--ink-500);
  font-size: 0.62rem;
  font-weight: 600;
  text-decoration: none;
}

.garvix-tab span {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.garvix-tab i {
  width: 54px;
  height: 30px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.garvix-tab.activo {
  color: var(--garvix-primary);
  font-weight: 700;
}

.garvix-tab.activo i {
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
}

/* ==== Auth pages ==== */
.auth-shell {
  min-height: 100vh;
  /* Escapa el padding horizontal de .container-fluid (0.75rem por lado) para
     que el fondo rojo llegue de borde a borde, igual que .reg-app abajo. */
  width: calc(100% + 1.5rem);
  margin: 0 -0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at top left, #D00B1C, var(--garvix-primary) 45%, var(--garvix-hero-dark) 100%);
  padding: 1.5rem;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border-radius: 20px;
  padding: 2.25rem;
  box-shadow: 0 25px 60px rgba(0,0,0,0.3);
}

.auth-card-wide {
  max-width: 560px;
}

/* ==== Panel hero ==== */
.panel-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(115deg, #101820 0%, #1c2530 58%, #8A0613 100%);
  border-radius: var(--garvix-radius);
  padding: 1.75rem 2rem;
  box-shadow: 0 10px 28px rgba(16, 24, 32, 0.28);
}

.panel-hero::after {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(242, 13, 32, 0.55);
}

.panel-hero-text {
  position: relative;
  z-index: 1;
  min-width: 0;
  color: #fff;
}

.panel-hero-eyebrow {
  text-transform: uppercase;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: 0.25rem;
}

.panel-hero-text h3 {
  color: #fff;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-hero-date {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-hero-mark {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--garvix-primary);
  backdrop-filter: blur(2px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
}

.wave {
  display: inline-block;
  animation: wave-anim 2.2s ease-in-out infinite;
  transform-origin: 70% 70%;
}

@keyframes wave-anim {
  0%, 60%, 100% { transform: rotate(0deg); }
  10% { transform: rotate(16deg); }
  20% { transform: rotate(-8deg); }
  30% { transform: rotate(16deg); }
  40% { transform: rotate(-4deg); }
}

@media (max-width: 575.98px) {
  .panel-hero-mark { display: none; }
}

/* ==== Panel: cuadros de accesos esenciales (pantalla de inicio) ==== */
.panel-accesos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}

@media (min-width: 576px) {
  .panel-accesos {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .panel-accesos {
    grid-template-columns: repeat(4, 1fr);
  }
}

.panel-acceso-card {
  position: relative;
  min-width: 0;
  background: var(--garvix-sidebar-bg);
  border-radius: 14px;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 6px 18px rgba(30, 20, 25, 0.06);
  border: 1.5px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.12s ease;
}

.panel-acceso-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(30, 20, 25, 0.05), 0 14px 28px rgba(30, 20, 25, 0.14);
  border-color: var(--garvix-primary-soft);
}

.panel-acceso-card:active {
  transform: translateY(-1px) scale(0.98);
}

.panel-acceso-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  color: #fff;
  flex-shrink: 0;
}

.panel-acceso-icon.acc-primary { background-image: linear-gradient(135deg, var(--garvix-bright), var(--garvix-primary) 80%); box-shadow: 0 6px 14px rgba(242, 13, 32, 0.28); }
.panel-acceso-icon.acc-success { background-image: linear-gradient(135deg, #34c780, #1e9e5a 85%); box-shadow: 0 6px 14px rgba(30, 158, 90, 0.28); }
.panel-acceso-icon.acc-warning { background-image: linear-gradient(135deg, #f0b94d, #d99a1b 85%); box-shadow: 0 6px 14px rgba(217, 154, 27, 0.28); }
.panel-acceso-icon.acc-teal { background-image: linear-gradient(135deg, #35c4c1, #0e8f8c 85%); box-shadow: 0 6px 14px rgba(14, 143, 140, 0.28); }
.panel-acceso-icon.acc-blue { background-image: linear-gradient(135deg, #4d9bf5, #2464c9 85%); box-shadow: 0 6px 14px rgba(36, 100, 201, 0.28); }
.panel-acceso-icon.acc-purple { background-image: linear-gradient(135deg, #9a6cf0, #6a3fc4 85%); box-shadow: 0 6px 14px rgba(106, 63, 196, 0.28); }
.panel-acceso-icon.acc-pink { background-image: linear-gradient(135deg, #f06ca6, #c9377c 85%); box-shadow: 0 6px 14px rgba(201, 55, 124, 0.28); }
.panel-acceso-icon.acc-dark { background-image: linear-gradient(135deg, #3d4652, #101820 85%); box-shadow: 0 6px 14px rgba(16, 24, 32, 0.28); }

.panel-acceso-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-acceso-titulo {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-acceso-sub {
  font-size: 0.72rem;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-acceso-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
}

/* ==== Stat cards ==== */
.stat-card {
  background: var(--garvix-sidebar-bg);
  border-radius: var(--garvix-radius);
  padding: 1.25rem;
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 6px 18px rgba(30, 20, 25, 0.06);
  height: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.stat-card > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}

.stat-card .stat-value {
  overflow-wrap: break-word;
}

@media (max-width: 575.98px) {
  .stat-card {
    align-items: center;
  }
  .stat-card .stat-value {
    font-size: 1.3rem;
  }
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(30, 20, 25, 0.05), 0 14px 28px rgba(30, 20, 25, 0.12);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
  background-image: var(--garvix-gradient-icon);
  color: #fff;
  box-shadow: 0 6px 14px rgba(242, 13, 32, 0.28);
}

.stat-icon.success { background-image: linear-gradient(135deg, #34c780, #1e9e5a 85%); box-shadow: 0 6px 14px rgba(30, 158, 90, 0.28); }
.stat-icon.warning { background-image: linear-gradient(135deg, #f0b94d, #d99a1b 85%); box-shadow: 0 6px 14px rgba(217, 154, 27, 0.28); }
.stat-icon.danger { background-image: linear-gradient(135deg, #e04b4b, #c62828 85%); box-shadow: 0 6px 14px rgba(198, 40, 40, 0.28); }

.stat-card .stat-value {
  font-size: 1.28rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink-900);
  line-height: 1.3;
}

.stat-card .stat-label {
  color: var(--ink-500);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ==== Planes y facturacion (compartido entre inicio publico y negocio/plan.php) ==== */
.billing-toggle { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; background: var(--garvix-sidebar-bg); border-radius: 999px; padding: 0.35rem; max-width: 640px; margin: 0 auto; box-shadow: 0 1px 2px rgba(30,20,25,0.04), 0 6px 18px rgba(30,20,25,0.06); }
.billing-btn { border: none; background: transparent; padding: 0.5rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.82rem; color: var(--ink-700); display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.billing-btn.active { background-image: var(--garvix-gradient); color: #fff; box-shadow: 0 6px 14px rgba(242,13,32,0.28); }
.badge-off { background: rgba(255,255,255,0.25); font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 999px; }
.billing-btn:not(.active) .badge-off { background: var(--surface-page); color: var(--garvix-primary); }

.plan-card { background: var(--garvix-sidebar-bg); border-radius: var(--garvix-radius); padding: 2rem; height: 100%; box-shadow: 0 1px 2px rgba(30,20,25,0.04), 0 6px 18px rgba(30,20,25,0.06); position: relative; border: 2px solid transparent; }
.plan-destacado { border-color: var(--garvix-primary); box-shadow: 0 12px 32px rgba(242,13,32,0.18); }
.plan-badge { position: absolute; top: -14px; right: 1.5rem; background-image: var(--garvix-gradient); color: #fff; font-size: 0.72rem; font-weight: 700; padding: 0.3rem 0.8rem; border-radius: 999px; box-shadow: 0 6px 14px rgba(242,13,32,0.28); }
.plan-card h4 { font-weight: 800; }
.plan-precio { display: flex; align-items: baseline; gap: 0.25rem; margin-bottom: 1.5rem; }
.plan-moneda { font-weight: 700; color: var(--ink-500); }
.plan-monto { font-size: 2.6rem; font-weight: 800; color: var(--ink-900); }
.plan-periodo { color: var(--ink-500); font-weight: 600; }
.plan-nota-precio { font-size: 0.8rem; color: var(--ink-500); margin: -0.75rem 0 1.25rem; min-height: 1.2em; }
.plan-nota-precio strong { color: #1e9e5a; }
.plan-ecf-nota { font-size: 0.8rem; color: var(--garvix-primary); font-weight: 600; margin: -0.75rem 0 1.25rem; line-height: 1.45; }
.plan-ecf-nota i { margin-right: 0.25rem; }
.plan-ecf-nota .text-muted { font-weight: 400; display: block; }
.plan-features { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.plan-features li { font-size: 0.88rem; color: var(--ink-700); display: flex; align-items: center; gap: 0.5rem; }
.plan-features li i { color: #1e9e5a; }
.plan-addons { background: var(--surface-page); border-radius: 12px; padding: 0.85rem 1rem; margin: 0 0 1.5rem; }
.plan-addons-titulo { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-500); margin: 0 0 0.5rem; }
.plan-addon-row { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; color: var(--ink-700); padding: 0.2rem 0; }
.plan-addon-precio { font-weight: 700; color: var(--garvix-primary); }
.plan-actual-badge { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--garvix-primary-soft); color: var(--garvix-primary); font-weight: 700; font-size: 0.78rem; padding: 0.35rem 0.9rem; border-radius: 999px; }

/* ==== Checkout / pagar ==== */
.checkout-metodo { border: 1.5px solid var(--line); border-radius: 14px; padding: 1rem 1.25rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.checkout-metodo.selected { border-color: #1e9e5a; background: rgba(30,158,90,0.05); }
.checkout-metodo-icon { font-size: 1.6rem; }
.checkout-metodo-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.checkout-metodo.selected .checkout-metodo-check { border-color: #1e9e5a; background: #1e9e5a; color: #fff; }
.checkout-resumen { background: var(--garvix-sidebar-bg); border-radius: var(--garvix-radius); padding: 1.5rem; box-shadow: 0 1px 2px rgba(30,20,25,0.04), 0 6px 18px rgba(30,20,25,0.06); }
.checkout-resumen-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.checkout-resumen-row:last-of-type { border-bottom: none; }
.checkout-resumen-row .label { color: var(--ink-500); }
.checkout-resumen-row .value { font-weight: 600; color: var(--ink-900); text-align: right; }
.checkout-subtotal { display: flex; justify-content: space-between; align-items: center; padding-top: 1rem; border-top: 1px solid var(--line); font-weight: 700; }
.checkout-subtotal .monto { font-size: 1.3rem; color: var(--garvix-primary); }

/* ==== Misc ==== */
.icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  font-size: 1.2rem;
}

.section-title {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-500);
  margin-bottom: 0.75rem;
}

.scan-input {
  border: 2px dashed var(--garvix-primary);
  background: var(--garvix-primary-soft);
  font-weight: 600;
}
.scan-input:focus {
  background: var(--garvix-sidebar-bg);
}

/* ==== Campos editables en linea (inventario) ==== */
.inv-edit-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.15rem 0.4rem;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.inv-edit-wrap:hover {
  border-color: var(--garvix-sidebar-border);
  background: var(--surface);
}

.inv-edit-wrap:focus-within {
  border-color: var(--garvix-primary);
  background: var(--garvix-sidebar-bg);
  box-shadow: 0 0 0 0.2rem rgba(242, 13, 32, 0.12);
}

.inv-edit-prefix,
.inv-edit-suffix {
  color: var(--ink-500);
  font-size: 0.78rem;
  font-weight: 600;
}

.inv-edit-input {
  border: none;
  background: transparent;
  text-align: right;
  width: 90px;
  font-weight: 600;
  color: var(--ink-900);
  padding: 0.1rem 0;
}

.inv-edit-input:focus {
  outline: none;
}

.inv-edit-input::-webkit-outer-spin-button,
.inv-edit-input::-webkit-inner-spin-button {
  opacity: 0;
  transition: opacity 0.15s ease;
}

.inv-edit-wrap:hover .inv-edit-input::-webkit-outer-spin-button,
.inv-edit-wrap:hover .inv-edit-input::-webkit-inner-spin-button,
.inv-edit-wrap:focus-within .inv-edit-input::-webkit-outer-spin-button,
.inv-edit-wrap:focus-within .inv-edit-input::-webkit-inner-spin-button {
  opacity: 1;
}

.inv-edit-wrap.inv-edit-danger {
  background: rgba(198, 40, 40, 0.06);
}
.inv-edit-wrap.inv-edit-danger .inv-edit-input {
  color: #c62828;
}

.inv-edit-wrap.inv-edit-saving {
  opacity: 0.6;
}

.inv-edit-wrap.inv-edit-saved {
  border-color: #1e9e5a;
  background: rgba(30, 158, 90, 0.08);
}

.inv-edit-wrap.inv-edit-error {
  border-color: var(--garvix-primary);
  background: var(--garvix-primary-soft);
}

/* ==== Inventario en tarjetas (tablet/celular) ==== */
.inv-mobile-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-bottom: 90px;
}

.inv-mobile-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-width: 0;
  background: var(--garvix-sidebar-bg);
  border: none;
  border-radius: 18px;
  padding: 1rem;
  box-shadow: 0 1px 3px rgba(30, 20, 25, 0.05), 0 10px 24px rgba(30, 20, 25, 0.07);
  text-align: left;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.inv-mobile-card:focus,
.inv-mobile-card:focus-visible {
  outline: none;
}

.inv-mobile-card img,
.inv-mobile-card-img-fallback {
  width: 62px;
  height: 62px;
  object-fit: cover;
  border-radius: 14px;
  flex-shrink: 0;
}

.inv-mobile-card-img-fallback {
  background: var(--surface);
  color: var(--ink-300);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
}

.inv-mobile-card-info {
  flex: 1 1 auto;
  min-width: 0;
}

.inv-mobile-card-name {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-900);
  margin-bottom: 0.2rem;
}

.inv-mobile-card-price {
  font-size: 0.8rem;
  color: var(--garvix-primary);
  font-weight: 700;
}

.inv-mobile-card-stock {
  flex-shrink: 0;
  text-align: center;
  background: var(--surface-page);
  border-radius: 14px;
  padding: 0.5rem 0.85rem;
  min-width: 58px;
}

.inv-mobile-card-stock span {
  display: block;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink-900);
  line-height: 1.2;
}

.inv-mobile-card-stock small {
  font-size: 0.58rem;
  color: var(--ink-500);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inv-mobile-card-stock-ok {
  background: rgba(30, 158, 90, 0.1);
}
.inv-mobile-card-stock-ok span {
  color: #1e9e5a;
}

.inv-mobile-card-stock-medio {
  background: rgba(217, 154, 27, 0.13);
}
.inv-mobile-card-stock-medio span {
  color: #b9820f;
}

.inv-mobile-card-stock-bajo {
  background: rgba(198, 40, 40, 0.1);
}
.inv-mobile-card-stock-bajo span {
  color: #c62828;
}

/* ==== Tarjeta de inventario con acciones deslizables (Editar/Eliminar) ====
   La tarjeta NO es presionable: hay que deslizarla (swipe) para revelar los
   botones. Deslizar a la izquierda los revela a la derecha; deslizar a la
   derecha los revela a la izquierda (arrastre real, no un toggle por clic).
   El transform durante el arrastre/snap lo controla JS via style inline. */
.inv-swipe-card {
  display: grid;
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 1px 3px rgba(30, 20, 25, 0.05), 0 10px 24px rgba(30, 20, 25, 0.07);
  /* Forzar la misma capa de composicion que el hijo animado (transform):
     sin esto, algunos navegadores movil pintan el recorte redondeado por
     separado de la animacion y dejan una costura de 1-2px en las esquinas. */
  transform: translateZ(0);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}

/* Contenido y ambos paneles de acciones ocupan la MISMA celda de grid (se
   superponen): asi el contenido siempre cubre el 100% del ancho/alto real
   del contenedor, sin depender de que "width:100%" calce igual en todos
   los navegadores. */
.inv-swipe-card .inv-mobile-card,
.inv-swipe-card .inv-swipe-actions {
  grid-area: 1 / 1;
}

.inv-swipe-card .inv-mobile-card {
  position: relative;
  z-index: 1;
  box-shadow: none;
  border-radius: 0;
  cursor: default;
  transition: transform 0.22s cubic-bezier(.2,.7,.3,1);
  touch-action: pan-y;
}

.inv-swipe-actions {
  display: flex;
  z-index: 0;
}

.inv-swipe-actions-end {
  justify-self: end;
}

.inv-swipe-actions-start {
  justify-self: start;
}

.inv-swipe-actions form {
  display: flex;
  margin: 0;
}

.inv-swipe-btn {
  width: 64px;
  height: 100%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.15rem;
  transition: filter 0.12s ease;
}

.inv-swipe-btn:active {
  filter: brightness(0.88);
}

.inv-swipe-btn:focus,
.inv-swipe-btn:focus-visible {
  outline: none;
}

.inv-swipe-btn-editar {
  background-image: linear-gradient(135deg, var(--ink-500), var(--ink-700) 85%);
}

.inv-swipe-btn-eliminar {
  background-image: linear-gradient(135deg, #e04b4b, #c62828 85%);
}

.inv-icon-btn {
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}

.inv-icon-btn.dropdown-toggle::after {
  display: none;
}

.inv-fab {
  display: none;
}

@media (max-width: 991.98px) {
  .inv-fab {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1.1rem;
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-image: var(--garvix-gradient);
    color: #fff;
    font-size: 1.5rem;
    box-shadow: 0 10px 24px rgba(242, 13, 32, 0.35);
    z-index: 1040;
    transition: transform 0.12s ease;
  }
  .inv-fab:active {
    transform: scale(0.92);
  }
}

/* ==== Movimiento: filtro y lista tipo recibo ==== */
.mov-filtro-menu {
  width: 280px;
}

.mov-list {
  display: flex;
  flex-direction: column;
  background: var(--garvix-sidebar-bg);
  border-radius: var(--garvix-radius);
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 6px 18px rgba(30, 20, 25, 0.06);
  overflow: hidden;
}

.mov-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
}

.mov-item:last-child {
  border-bottom: none;
}

.mov-item:active {
  background: var(--surface-page);
}

.mov-item-inactivo {
  cursor: default;
  opacity: .7;
}

/* ==== Tarjeta de formulario "plana" en movil (reutilizable): mismo
   tratamiento que inventario/movimientos -- sin borde/sombra/fondo, con
   una separacion de seccion clara (icono + titulo + linea) en vez de la
   caja de card normal de escritorio. ==== */
@media (max-width: 991.98px) {
  .card.card-flat-mobile {
    border: none;
    box-shadow: none;
    background: transparent !important;
  }
  .card.card-flat-mobile .card-header {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: transparent !important;
    border: none;
    border-bottom: 2px solid var(--line);
    padding: 0 0 .85rem;
    margin-bottom: 1.1rem;
    font-weight: 800;
    font-size: 1.02rem;
    color: var(--ink-900);
  }
  .card.card-flat-mobile .card-body {
    padding: 0 0 .5rem;
  }
  .card.card-flat-mobile .form-control,
  .card.card-flat-mobile .form-select,
  .card.card-flat-mobile textarea.form-control {
    padding-top: .7rem;
    padding-bottom: .7rem;
    font-size: 1rem;
  }
  .card.card-flat-mobile .form-label {
    font-weight: 600;
    margin-bottom: .4rem;
  }
}

/* ==== Toolbar/info/totales de un detalle (venta, pedido, etc.):
   reutilizable en cualquier pantalla de "detalle de registro". ==== */
.venta-toolbar { display: flex; flex-direction: column; gap: 1rem; }
.venta-toolbar-acciones { display: flex; flex-direction: column; gap: 0.5rem; }
.venta-toolbar-acciones form,
.venta-toolbar-acciones .btn { width: 100%; min-height: 46px; }
@media (min-width: 768px) {
  .venta-toolbar { flex-direction: row; justify-content: space-between; align-items: center; }
  .venta-toolbar-acciones { flex-direction: row; }
  .venta-toolbar-acciones form,
  .venta-toolbar-acciones .btn { width: auto; }
}
.venta-info { background: var(--surface-page); border-radius: 12px; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; }
.venta-totales { max-width: 320px; margin-left: auto; background: var(--garvix-sidebar-bg); border-radius: var(--garvix-radius); padding: 1rem 1.25rem; box-shadow: 0 1px 2px rgba(30,20,25,.04), 0 6px 18px rgba(30,20,25,.06); }
.venta-totales > div { padding: 0.4rem 0; }
.venta-total-final { border-top: 2px solid var(--ink-900); margin-top: 0.4rem; padding-top: 0.75rem !important; font-weight: 700; font-size: 1.1rem; color: var(--garvix-primary); }
@media (max-width: 767.98px) {
  .venta-totales { max-width: none; }
}

/* Fila de acciones (Cancelar/Guardar) reutilizable: apilada y a todo el
   ancho en movil, en fila normal en escritorio. */
.form-acciones-form { display: flex; flex-direction: column-reverse; gap: 0.5rem; }
.form-acciones-form .btn {
  width: 100%; min-height: 46px;
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center;
}
@media (min-width: 768px) {
  .form-acciones-form { flex-direction: row; justify-content: flex-end; }
  .form-acciones-form .btn { width: auto; }
}

.mov-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  color: #fff;
}

.mov-item-icon-venta {
  background-image: linear-gradient(135deg, #34c780, #1e9e5a 85%);
}

.mov-item-icon-gasto {
  background-image: linear-gradient(135deg, #e04b4b, #c62828 85%);
}

.mov-item-icon-neutro {
  background-image: linear-gradient(135deg, var(--ink-500), var(--ink-700) 85%);
}

.mov-item-info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.mov-item-desc {
  font-weight: 700;
  font-size: 0.87rem;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mov-item-meta {
  font-size: 0.75rem;
  color: var(--ink-500);
}

.mov-item-monto {
  font-weight: 800;
  font-size: 0.88rem;
  flex-shrink: 0;
  white-space: nowrap;
}

#movContenido {
  transition: opacity 0.15s ease;
}

#movContenido.mov-cargando {
  opacity: 0.5;
}

.mov-nav-periodo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.mov-nav-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--garvix-sidebar-bg);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 6px 18px rgba(30, 20, 25, 0.06);
  text-decoration: none;
}

.mov-nav-btn:active {
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
}

.mov-nav-btn.deshabilitado {
  opacity: 0.35;
  box-shadow: none;
}

.mov-nav-label {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-900);
  text-align: center;
}

.mov-acciones-fijas {
  display: none;
}

@media (max-width: 991.98px) {
  .mov-acciones-fijas {
    display: flex;
    gap: 0.5rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 64px;
    z-index: 1025;
    padding: 0.6rem 1rem;
    background: var(--garvix-sidebar-bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 14px rgba(20, 15, 20, 0.06);
  }
  .mov-acciones-fijas .btn {
    flex: 1 1 0;
    min-width: 0;
    white-space: nowrap;
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
  }
}

/* ==== Zona de carga de imagen (producto, logo) ==== */
.image-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 170px;
  border: 1.5px dashed var(--garvix-sidebar-border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--ink-500);
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.image-dropzone:hover {
  border-color: var(--garvix-primary);
  background: var(--garvix-primary-soft);
}

.image-dropzone #dropzonePlaceholder i {
  font-size: 1.8rem;
  color: var(--ink-300);
}

.image-dropzone #dropzonePlaceholder .fw-bold {
  color: var(--ink-700);
  font-size: 0.9rem;
}

.image-dropzone #previewWrap {
  position: absolute;
  inset: 0;
}

.image-dropzone #previewWrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==== Caja informativa con icono (catalogos, avisos) ==== */
.catalog-toggle-box {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem;
  border: 1px solid var(--garvix-sidebar-border);
  border-radius: 12px;
  background: var(--surface);
}

.catalog-toggle-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ==== Selector de opciones tipo tarjeta (metodo de pago, ITBIS, etc.) ==== */
.choice-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.choice-cards.choice-cards-3 {
  grid-template-columns: repeat(3, 1fr);
}

.choice-card {
  border: 1.5px solid var(--garvix-sidebar-border);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ink-700);
  text-align: center;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.choice-card input {
  display: none;
}

.choice-card i {
  font-size: 1.15rem;
}

.choice-card .choice-card-sub {
  font-weight: 500;
  color: var(--ink-500);
  font-size: 0.7rem;
}

.choice-card:hover {
  border-color: var(--ink-300);
}

.choice-card:has(input:checked) {
  border-color: var(--garvix-primary);
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
}

/* ==== POS product grid y tarjetas (compactas, varias por fila) ==== */
.pos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 160px));
  gap: 0.7rem;
  align-content: start;
  justify-content: start;
}
.pos-card {
  position: relative;
  background: var(--garvix-sidebar-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 4px 10px rgba(30, 20, 25, 0.05);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.12s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  border: 1px solid var(--garvix-sidebar-border);
  user-select: none;
}

.pos-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(30, 20, 25, 0.05), 0 10px 20px rgba(30, 20, 25, 0.1);
  border-color: var(--garvix-primary-soft);
}

.pos-card:active {
  transform: translateY(-1px) scale(0.97);
}

.pos-card-img {
  position: relative;
  height: 84px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-300);
  font-size: 1.4rem;
}

.pos-card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 0.4rem;
  box-sizing: border-box;
}

.pos-card-stock-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--garvix-primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-card-body {
  padding: 0.5rem 0.6rem 0.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pos-card-nombre {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.25;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  min-height: 1.9em;
}

.pos-card-sku {
  color: var(--ink-300);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-top: 0.1rem;
}

.pos-card-footer {
  margin-top: auto;
  padding-top: 0.3rem;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem;
}

.pos-card-precio {
  color: var(--ink-900);
  font-weight: 800;
  font-size: 0.82rem;
}

.pos-card-unidad {
  color: var(--ink-300);
  font-size: 0.6rem;
  font-weight: 600;
  white-space: nowrap;
}

.pos-card-mayoreo {
  position: absolute;
  top: 6px;
  left: 6px;
  background: var(--garvix-gold, #e8a33d);
  color: #402a00;
  font-size: 0.65rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==== Barra de busqueda compacta (reemplaza el input + 2 botones sueltos) ==== */
.pos-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--surface);
  border: 1.5px solid var(--garvix-sidebar-border);
  border-radius: 12px;
  padding: 0 0.5rem 0 0.9rem;
  min-height: 42px;
}
.pos-search-bar > .bi-search { color: var(--ink-500); font-size: 0.95rem; flex-shrink: 0; }
.pos-search-bar .form-control {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0.5rem 0.25rem;
}
.pos-search-bar .form-control:focus { box-shadow: none; }
.pos-search-icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: none;
  background: transparent;
  color: var(--ink-500);
}
.pos-search-icon-btn:hover { background: var(--garvix-sidebar-bg); color: var(--garvix-primary); }

/* ==== Filtros de categoria (tabs) en POS ==== */
.pos-categorias {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  min-width: 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--garvix-sidebar-border);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.pos-categorias::-webkit-scrollbar {
  display: none;
}
.pos-cat-tab {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink-500);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.4rem 0.1rem;
  white-space: nowrap;
  position: relative;
}
.pos-cat-tab.activo {
  color: var(--ink-900);
}
.pos-cat-tab.activo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -0.5rem;
  height: 2px;
  background: var(--garvix-primary);
  border-radius: 999px;
}
.pos-cat-tab-crear {
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--garvix-primary);
  padding: 0.4rem 0.1rem;
  white-space: nowrap;
}
/* POS: barra de categorias con scroll horizontal + boton "+" siempre visible */
.pos-cat-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid var(--garvix-sidebar-border);
}
.pos-cat-barra .pos-categorias {
  flex: 1 1 auto;
  border-bottom: none;
}
.pos-cat-barra .pos-categorias.hay-mas {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}
.pos-cat-agregar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  border: 1px dashed var(--garvix-primary);
  color: var(--garvix-primary);
  text-decoration: none;
  font-size: 0.95rem;
}
.pos-cat-agregar:hover {
  background: var(--garvix-primary);
  border-style: solid;
  color: #fff;
}
.pos-cat-label {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-500);
  margin: 0.75rem 0 0.5rem;
}

/* ==== Modo kiosco del POS (pos/index.php, pos/carrito.php): pantalla
   completa, SIN el sidebar/topbar normal de Garvix. Mismas variables del
   tema (claro/oscuro, ver bloque "Modo oscuro" arriba), asi que respeta el
   toggle global en vez de quedar oscuro fijo. ==== */
body.pos-kiosko {
  min-height: 100vh;
  background: var(--surface-page);
  color: var(--ink-900);
}
.pos-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.65rem 1.1rem;
  background: var(--garvix-sidebar-bg);
  border-bottom: 1px solid var(--garvix-sidebar-border);
}
.pos-topbar-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.pos-topbar-brand img, .pos-topbar-brand .garvix-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
  flex-shrink: 0;
}
.pos-topbar-brand-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.pos-topbar-brand-texto strong {
  font-size: 0.95rem;
  color: var(--ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pos-topbar-brand-texto span {
  font-size: 0.72rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.pos-exit-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid var(--garvix-sidebar-border);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 1rem;
}
.pos-exit-btn:hover { color: var(--garvix-primary); border-color: var(--garvix-primary-soft); }
.pos-online-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-700);
  background: var(--surface);
  border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.55rem;
  flex-shrink: 0;
}
.pos-online-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18);
  flex-shrink: 0;
}
.pos-online-pill.offline .pos-online-dot { background: #9aa3ae; box-shadow: none; }
.pos-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.pos-topbar-actions .btn { white-space: nowrap; }
.pos-theme-toggle {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1.5px solid var(--garvix-sidebar-border);
  background: var(--surface);
  color: var(--ink-700);
  font-size: 1rem;
  flex-shrink: 0;
}
.pos-theme-toggle:hover { color: var(--garvix-primary); border-color: var(--garvix-primary-soft); }
.pos-kiosko-content {
  padding: 1rem 1.1rem 1.5rem;
}

.pos-en-espera-menu {
  min-width: 260px;
  padding: 0.4rem;
}
.pos-en-espera-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
}
.pos-en-espera-hora {
  font-size: 0.72rem;
  color: var(--ink-500);
  font-weight: 700;
  flex-shrink: 0;
}
.pos-en-espera-info {
  flex: 1 1 auto;
  font-size: 0.82rem;
  color: var(--ink-900);
  font-weight: 600;
}
.pos-en-espera-total {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--garvix-primary);
  flex-shrink: 0;
}

/* ==== Escaneo de codigo de barras con camara ==== */
.pos-scan-modal {
  background: #101820;
  color: #fff;
  border-radius: 20px;
  overflow: hidden;
}
.pos-scan-modal .modal-title {
  color: #fff;
  font-size: 1rem;
}
.pos-scan-viewport {
  width: 100%;
  min-height: 260px;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.pos-scan-viewport video {
  border-radius: 14px;
}

/* ==== Carrito flotante en tablet/celular: reemplaza el menu de pestanas ==== */
.pos-cart-bar {
  display: none;
}

@media (max-width: 991.98px) {
  .pos-cart-bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background-image: var(--garvix-gradient);
    color: #fff;
    border: none;
    padding: 0.6rem 1.1rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 20px rgba(242, 13, 32, 0.28);
  }
  .pos-cart-bar-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
  }
  .pos-cart-bar-cantidad {
    flex: 1 1 auto;
    text-align: left;
    font-size: 0.88rem;
    font-weight: 600;
  }
  .pos-cart-bar-cantidad span {
    font-weight: 800;
    font-size: 1rem;
  }
  .pos-cart-bar-precio {
    font-size: 1rem;
    font-weight: 800;
    flex-shrink: 0;
  }
  .pos-cart-bar > .bi-chevron-right {
    font-size: 1rem;
    opacity: 0.85;
  }
  .pos-cart-bar-pulso {
    animation: garvix-cart-pulso 0.4s ease;
  }
}

/* pos/carrito.php: el carrito como pantalla completa real (no overlay).
   Sin la caja/sombra de tarjeta: la pagina misma ya es el contenedor. */
.pos-carrito-pagina {
  max-width: 640px;
  margin: 0 auto;
  padding-bottom: 96px;
}

@media (max-width: 991.98px) {
  .pos-carrito-pagina .pos-continuar-btn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 640px;
    margin: 0 auto;
    border-radius: 0;
    padding: 1.1rem 1.25rem calc(1.1rem + env(safe-area-inset-bottom, 0px));
    z-index: 1040;
    box-shadow: 0 -6px 20px rgba(20, 15, 20, 0.15);
  }
}
.pos-carrito-pagina .pos-cart-card {
  box-shadow: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
.pos-carrito-pagina .pos-cart-card .card-header {
  background: var(--surface);
  border: none;
  border-radius: 14px;
  padding: 0.75rem 0.9rem;
}
.pos-carrito-pagina .pos-cart-card .card-body {
  padding-left: 0;
  padding-right: 0;
}

.pos-cart-header {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pos-cart-header-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink-900);
}

.pos-cart-header-titulo i {
  color: var(--garvix-primary);
  font-size: 0.95rem;
}

.pos-vaciar-btn {
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 999px;
  background: var(--garvix-sidebar-bg);
  color: var(--garvix-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(30, 20, 25, 0.1);
  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.pos-vaciar-btn:active {
  background: var(--garvix-primary);
  color: #fff;
  transform: scale(0.94);
  box-shadow: 0 1px 3px rgba(30, 20, 25, 0.08);
}

.pos-paso2-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
}
.pos-paso2-header strong {
  font-size: 1rem;
}
.pos-volver-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border: none;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.pos-volver-btn:active {
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
}

@keyframes garvix-cart-pulso {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* ==== POS cart panel ==== */
.pos-cart-card {
  position: sticky;
  top: 1rem;
}

.pos-cliente-box {
  background: var(--surface);
  border-radius: 12px;
  padding: 0.6rem 0.75rem;
}
.pos-cliente-box .form-select {
  border-color: var(--garvix-sidebar-border);
}

.pos-cart-totales {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.pos-cart-totales-linea {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--ink-700);
  padding: 0.2rem 0;
}
.pos-cart-totales-final {
  margin-top: 0.3rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink-900);
}

.pos-procesar-btn {
  width: 100%;
  margin-top: 0.9rem;
  padding: 0.85rem 1rem;
  border: none;
  border-radius: 12px;
  background-image: var(--garvix-gradient);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 6px 16px rgba(242, 13, 32, 0.28);
}
.pos-procesar-btn:active {
  transform: translateY(1px);
}

/* ==== Carrito: lista limpia tipo recibo, sin tarjetas anidadas ==== */
.pos-cart-list {
  display: flex;
  flex-direction: column;
}

.pos-cart-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
}

.pos-cart-item:last-child {
  border-bottom: none;
}

.pos-cart-item-top {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.pos-cart-item-img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.pos-cart-item-img-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink-300);
  font-size: 0.95rem;
}

.pos-cart-item-info {
  flex: 1 1 auto;
  min-width: 0;
}

.pos-cart-item-nombre {
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--ink-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pos-cart-item-sku {
  font-size: 0.7rem;
  color: var(--ink-300);
  font-weight: 600;
  margin-top: 0.1rem;
}

.pos-cart-item-bottom {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-left: 46px;
}

.pos-cart-item-precio-col {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.pos-cart-item-precio {
  font-size: 0.85rem;
  color: var(--ink-900);
  font-weight: 700;
}

.pos-cart-item-itbis-caption {
  font-size: 0.64rem;
  color: var(--ink-300);
  font-weight: 600;
}

.pos-cart-item-total-linea {
  flex-shrink: 0;
  font-size: 0.85rem;
  color: var(--ink-900);
  font-weight: 800;
  margin-left: auto;
}

.pos-cart-item-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface-page);
  border-radius: 999px;
  flex-shrink: 0;
  overflow: hidden;
}

.pos-cart-item-stepper button {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-700);
  font-size: 1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pos-cart-item-stepper button:active {
  background: rgba(242, 13, 32, 0.1);
  color: var(--garvix-primary);
}

/* Lo que se vende por peso: un botón con el peso (se toca para pesar otra vez). */
.pos-cart-item-stepper .btn-peso {
  width: auto;
  padding: 0 .75rem;
  gap: .35rem;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 800;
  color: var(--ink-900);
}

.pos-cart-item-stepper span {
  min-width: 22px;
  text-align: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--ink-900);
}

.pos-cart-item-quitar {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--ink-300);
  font-size: 0.78rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
}

.pos-cart-item-quitar:hover,
.pos-cart-item-quitar:active {
  color: var(--garvix-primary);
  background: var(--garvix-primary-soft);
}

.pos-confirm-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.pos-empty-icon {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.pos-continuar-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  background: var(--ink-900);
  color: #fff;
  padding: 1.05rem 1.1rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 1rem;
  transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

.pos-continuar-btn:not(:disabled):active {
  transform: scale(0.98);
}

/* ==== Panel de cobro del POS: objetivos tactiles mas grandes ==== */
.pos-cart-card .choice-card {
  padding: 1rem 0.5rem;
  min-height: 68px;
  font-size: 0.88rem;
  gap: 0.4rem;
}

.pos-cart-card .choice-card i {
  font-size: 1.5rem;
}

.pos-cart-card .form-label {
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
}

.pos-cart-card .form-control,
.pos-cart-card .form-select {
  min-height: 46px;
  font-size: 0.95rem;
}

.pos-cart-card #campoRncFiscal .btn {
  min-height: 46px;
  padding-left: 1rem;
  padding-right: 1rem;
}

.pos-cart-card .mb-2 {
  margin-bottom: 1rem !important;
}

#tablaCarrito .btn-sm {
  width: 40px;
  height: 40px;
  padding: 0;
  font-size: 1.05rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 2px;
}

#tablaCarrito td {
  vertical-align: middle;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

#tablaCarrito .btn-quitar {
  margin: 0;
}

#btnVolverCobro {
  font-size: 0.9rem;
  min-height: 40px;
}

.pos-pago-mixto-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr auto;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}

.pos-pago-mixto-row .btn {
  min-height: 46px;
  width: 46px;
  padding: 0;
}

/* Cuenta de banco de una linea de transferencia: ocupa toda la fila. */
.pos-pago-mixto-row .pago-mixto-cuenta { grid-column: 1 / -1; }

/* Cuenta de banco al cobrar por transferencia (POS y venta libre). */
.pos2-banco {
  margin: -.25rem 0 1rem;
  padding: .75rem .85rem;
  border-radius: 12px;
  background: var(--surface-page);
  border: 1px dashed var(--line);
}
.pos2-banco .form-text a { font-weight: 600; text-decoration: none; }

/* Trazabilidad contable: asientos de un documento (conta_bloque_asientos). */
.conta-traza {
  background: var(--garvix-sidebar-bg);
  border: 1px solid var(--line);
  border-radius: var(--garvix-radius);
  padding: 1rem 1.1rem;
  margin-top: 1rem;
}
.conta-traza-titulo { display: flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .9rem; margin-bottom: .6rem; color: var(--ink-900); }
.conta-traza-titulo i { color: var(--garvix-primary); }
.conta-traza ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.conta-traza a { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; border-radius: 10px; background: var(--surface-page); color: var(--ink-700); text-decoration: none; font-size: .84rem; }
.conta-traza a:hover { background: var(--garvix-primary-soft); color: var(--ink-900); }
.conta-traza-num { font-weight: 700; color: var(--garvix-primary); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.conta-traza-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow-wrap: anywhere; }
.conta-traza-txt small { color: var(--ink-500); font-size: .74rem; }
.conta-traza-monto { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ==== Indicador de pasos del checkout del POS ==== */
.pos-checkout-card {
  margin-top: 1rem;
}

/* ==== Modal "Procesar Pago": centrado, con el total destacado arriba ==== */
.pos-pago-modal {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
}
.pos-pago-modal-header {
  position: relative;
  background-image: var(--garvix-gradient);
  color: #fff;
  padding: 1.1rem 1.5rem 0.9rem;
  text-align: center;
}
.pos-pago-modal-header .btn-close {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  opacity: 0.85;
}
.pos-pago-modal-total-lbl {
  text-transform: uppercase;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.85;
}
.pos-pago-modal-total {
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1.2;
}
.pos-pago-modal .modal-body {
  padding: 1rem 1.25rem 1.1rem;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}
/* Compacto: dentro del modal los choice-cards no necesitan el tamano
   agrandado que tienen en el panel normal (.pos-cart-card .choice-card) —
   con 5 metodos de pago eso se iba muy largo y pedia scroll. */
.pos-pago-modal .choice-cards {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}
.pos-pago-modal .choice-card {
  padding: 0.5rem 0.3rem;
  min-height: auto;
  font-size: 0.72rem;
  gap: 0.2rem;
}
.pos-pago-modal .choice-card i {
  font-size: 1.05rem;
}
.pos-pago-modal .mb-2 {
  margin-bottom: 0.6rem !important;
}
.pos-pago-modal .form-label.small {
  margin-bottom: 0.25rem;
  font-size: 0.76rem;
}
.pos-pago-modal .form-control,
.pos-pago-modal .form-select {
  min-height: 38px;
  font-size: 0.85rem;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.pos-pago-modal .form-text {
  font-size: 0.7rem;
  margin-top: 0.15rem;
}
.pos-pago-modal .pos-steps {
  margin-bottom: 0.7rem;
}
.pos-pago-modal .pos-continuar-btn {
  padding: 0.65rem 1rem;
}
.pos-comprobante-box {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-align: left;
  background: var(--surface-page, #f5f5f7);
  border: 1px solid var(--ink-300, #e2e2e6);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  color: inherit;
}
.pos-comprobante-box i:first-child {
  font-size: 1rem;
  opacity: 0.75;
}
.pos-comprobante-box-texto {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pos-comprobante-box-texto strong {
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pos-comprobante-box-texto span {
  font-size: 0.7rem;
  opacity: 0.7;
}
.pos-comprobante-box .bi-chevron-right {
  opacity: 0.5;
}

/* Popup de Comprobante: deliberadamente NO es un segundo .modal de
   Bootstrap. Bootstrap no soporta bien modales apilados (dos .modal.show
   simultaneos pelean por el foco/backdrop y la pantalla se queda gris sin
   mostrar nada) — este es un overlay propio, simple, que se abre/cierra
   con una clase, encima del modal Procesar Pago que sigue abierto. */
.pos-comprobante-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1070;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pos-comprobante-overlay.show {
  display: flex;
}
.pos-comprobante-overlay-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.pos-comprobante-overlay-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 420px);
  max-height: 85vh;
  overflow-y: auto;
  background: var(--surface, #fff);
  color: var(--ink-900);
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}
.pos-comprobante-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--ink-300, #e2e2e6);
}
.pos-comprobante-overlay-body {
  padding: 1rem 1.1rem;
  max-height: 70vh;
  overflow-y: auto;
}
.pos-ecf-tipos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.pos-ecf-tipo { margin: 0; cursor: pointer; }
.pos-ecf-tipo input { position: absolute; opacity: 0; pointer-events: none; }
.pos-ecf-tipo > span { display: block; height: 100%; padding: .55rem .7rem; border: 1.5px solid var(--line); border-radius: 10px; }
.pos-ecf-tipo strong { display: block; font-size: .86rem; color: var(--ink-900); }
.pos-ecf-tipo strong small { font-weight: 600; color: var(--ink-500); }
.pos-ecf-tipo > span > small { display: block; font-size: .72rem; line-height: 1.3; color: var(--ink-500); margin-top: .1rem; }
.pos-ecf-tipo input:checked + span { border-color: var(--garvix-primary); background: var(--garvix-primary-soft); }
.pos-ecf-tipo input:focus-visible + span { outline: 2px solid var(--garvix-primary); outline-offset: 2px; }
.pos-comprobante-overlay-footer {
  padding: 0.8rem 1.1rem 1.1rem;
}

.pos-carrito-pagina .pos-checkout-card {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

.pos-steps { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.1rem; }
.pos-step { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-300); white-space: nowrap; transition: color 0.2s ease; }
.pos-step span { width: 22px; height: 22px; border-radius: 50%; background: var(--surface); color: var(--ink-300); display: flex; align-items: center; justify-content: center; font-size: 0.72rem; transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease; }
.pos-step.activo { color: var(--garvix-primary); }
.pos-step.activo span { background-image: var(--garvix-gradient-icon); color: #fff; transform: scale(1.08); box-shadow: 0 4px 10px rgba(242,13,32,0.3); }
.pos-step-line { flex: 1; height: 3px; background: var(--surface); border-radius: 999px; overflow: hidden; }
.pos-step-line span { display: block; height: 100%; width: 0%; background-image: var(--garvix-gradient); transition: width 0.4s ease; }

.pos-paso-entrando { animation: pos-paso-in 0.28s ease; }
.pos-paso-saliendo { animation: pos-paso-out 0.15s ease forwards; }
@keyframes pos-paso-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pos-paso-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-10px); } }

.pos-resultado-ok { animation: pos-bounce-in 0.4s ease; }
@keyframes pos-bounce-in { 0% { transform: scale(0.85); opacity: 0; } 60% { transform: scale(1.03); opacity: 1; } 100% { transform: scale(1); } }

.pos-cart-card .choice-card:has(input:checked) {
  transform: translateY(-1px);
}

.pos-continuar-btn:disabled {
  opacity: 0.45;
}

.pos-continuar-btn:not(:disabled):hover {
  background: #000;
}

.pos-continuar-count {
  background: rgba(255,255,255,0.15);
  border-radius: 999px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
}

.pos-continuar-total {
  margin-left: auto;
  margin-right: 0.5rem;
}

/* ==== Public catalog page: shop topbar ==== */
.shop-container {
  padding-left: clamp(16px, 4vw, 56px);
  padding-right: clamp(16px, 4vw, 56px);
}


.shop-topbar {
  background: #fff;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 1020;
}

.shop-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  flex-wrap: wrap;
  row-gap: 0.75rem;
}

.shop-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 800;
  color: var(--ink-900);
  font-size: 1.05rem;
  letter-spacing: 0.005em;
  min-width: 0;
}

.shop-brand img {
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
}

.shop-brand-fallback {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--garvix-primary-soft);
  color: var(--garvix-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shop-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shop-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-shrink: 0;
}

.shop-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.shop-search i {
  position: absolute;
  left: 0.75rem;
  color: var(--ink-300);
  font-size: 0.85rem;
}

.shop-search input {
  border: 1px solid var(--garvix-sidebar-border);
  border-radius: 999px;
  padding: 0.5rem 0.9rem 0.5rem 2rem;
  font-size: 0.85rem;
  width: 220px;
  max-width: 100%;
  background: var(--surface-page);
}

@media (max-width: 767.98px) {
  .shop-search input {
    width: 100%;
  }
  .shop-brand span {
    display: none;
  }
}

.shop-search input:focus {
  outline: none;
  border-color: var(--garvix-primary);
  background: #fff;
}

.shop-cart-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--garvix-sidebar-border);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: var(--ink-900);
  flex-shrink: 0;
}

.shop-cart-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--garvix-primary);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.shop-filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.75rem 0;
}

.shop-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shop-chip {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--garvix-sidebar-border);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-700);
  background: #fff;
  white-space: nowrap;
}

/* ==== Selector de pais para numero de telefono (login, registro) ==== */
.tel-pais-group {
  position: relative;
  display: flex;
  align-items: stretch;
  border-radius: 16px;
  transition: box-shadow .15s ease;
}

.tel-pais-group:focus-within {
  box-shadow: 0 0 0 3px rgba(242, 13, 32, 0.15);
}

.tel-pais-group:focus-within .tel-pais-btn,
.tel-pais-group:focus-within .tel-pais-input {
  background: var(--garvix-sidebar-bg);
}

.tel-pais-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  background: var(--surface-page);
  border: none;
  border-radius: 16px 0 0 16px;
  padding: 0 0.65rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ink-900);
  cursor: pointer;
}

.tel-pais-bandera {
  display: inline-flex;
  line-height: 1;
}

.tel-pais-bandera .fi {
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tel-pais-opcion .fi {
  border-radius: 3px;
  flex-shrink: 0;
}

.tel-pais-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0 16px 16px 0;
  padding: 0.95rem 0.75rem;
  font-size: 0.95rem;
  background: var(--surface-page);
}

.tel-pais-input:focus {
  outline: none;
}

.tel-pais-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  background: var(--garvix-sidebar-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(20, 15, 20, 0.12);
  max-height: 260px;
  overflow-y: auto;
  width: 270px;
  max-width: 90vw;
  padding: 0.4rem;
}

.tel-pais-menu.open {
  display: block;
}

/* ==== Animacion de entrada al cambiar de pagina: sutil fade + slide,
   aplicada automaticamente al contenido principal de cada pagina. ==== */
/* DESACTIVADA: cualquier animacion (incluso solo opacidad) en un ancestro
   que contiene modales de Bootstrap / barras position:fixed deja al
   compositor del navegador sin poder hacer hit-test de clics en esos
   descendientes fixed, aunque los estilos computados ya se vean limpios
   al terminar la animacion. Rompio los modales (fondo gris, nada
   clickeable) y la barra fija "Nueva venta/Nuevo gasto" de Movimiento.
   No reactivar en .garvix-main > .container-fluid ni en contenedores que
   puedan tener modales/elementos fixed adentro. */
@keyframes garvix-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .garvix-main > .container-fluid,
  .public-page-anim {
    animation: none;
  }
}

/* ==== Loader de navegacion: aparece al hacer clic en un enlace o enviar
   un formulario, para que la app no se sienta "trabada" mientras carga
   la siguiente pagina. Se crea dinamicamente desde app.js. ==== */
.garvix-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(250, 247, 245, 0.6);
  backdrop-filter: blur(1px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.garvix-page-loader.activo {
  opacity: 1;
  pointer-events: all;
  transition-delay: 0.12s;
}
.garvix-page-loader-spinner {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 3px solid rgba(242, 13, 32, 0.15);
  border-top-color: var(--garvix-primary);
  animation: garvix-spin 0.7s linear infinite;
  box-shadow: 0 6px 18px rgba(20, 15, 20, 0.1);
}

/* ==== Modal de confirmacion (reemplaza confirm() nativo) ==== */
.garvix-confirm-modal { border: none; border-radius: 22px; overflow: hidden; }
.garvix-confirm-icon {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  border-radius: 50%; background: rgba(242, 13, 32, 0.1); color: var(--garvix-primary);
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem;
}
.garvix-confirm-texto { font-weight: 600; color: var(--ink-900); font-size: 1.02rem; }

/* ==== Toast (reemplaza alert() nativo) ==== */
.garvix-toast-contenedor {
  position: fixed;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 2100;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: min(92vw, 380px);
  pointer-events: none;
}
@media (min-width: 992px) {
  .garvix-toast-contenedor { bottom: 24px; }
}
.garvix-toast {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--garvix-sidebar-bg);
  color: var(--ink-900);
  border-radius: 14px;
  padding: 0.85rem 1rem;
  box-shadow: 0 10px 30px rgba(20, 15, 20, 0.16);
  font-size: 0.9rem;
  font-weight: 600;
  border-left: 4px solid var(--garvix-primary);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.garvix-toast.activo { opacity: 1; transform: translateY(0); }
.garvix-toast i { font-size: 1.15rem; flex-shrink: 0; }
.garvix-toast-danger { border-left-color: var(--garvix-primary); }
.garvix-toast-danger i { color: var(--garvix-primary); }
.garvix-toast-success { border-left-color: #1e9e5a; }
.garvix-toast-success i { color: #1e9e5a; }
.garvix-toast-info { border-left-color: #2f7ed8; }
.garvix-toast-info i { color: #2f7ed8; }
@keyframes garvix-spin {
  to { transform: rotate(360deg); }
}

.tel-pais-opcion {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  font-size: 0.88rem;
}

.tel-pais-opcion:hover {
  background: var(--surface-page);
}

.tel-pais-opcion-nombre {
  flex: 1;
}

.shop-chip.active {
  background: var(--garvix-primary);
  border-color: var(--garvix-primary);
  color: #fff;
}

.shop-sort-view {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.shop-sort-view select {
  width: auto;
}

.shop-view-toggle .btn.active {
  background: var(--garvix-primary);
  color: #fff;
  border-color: var(--garvix-primary);
}

.shop-add-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  flex-shrink: 0;
  border: none;
  background: var(--garvix-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(242, 13, 32, 0.3);
  transition: transform 0.12s ease;
}

.shop-add-btn:hover {
  transform: scale(1.08);
}

@media (max-width: 991.98px) {
  .shop-add-btn {
    width: 44px;
    height: 44px;
  }
}

.shop-whatsapp-float {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);
  z-index: 1015;
}

.shop-whatsapp-float:hover {
  color: #fff;
  filter: brightness(1.05);
}

.shop-cart-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
}

.shop-cart-thumb {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.shop-cart-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink-300);
  font-size: 1.1rem;
}

.catalogo-item-abrir {
  cursor: pointer;
}

.producto-modal-img {
  width: 100%;
  height: 260px;
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--garvix-radius) var(--garvix-radius) 0 0;
  overflow: hidden;
}

.producto-modal-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 1rem;
  box-sizing: border-box;
}

.producto-modal-img .catalogo-item-noimg {
  width: 100%;
  height: 100%;
  font-size: 2.5rem;
  color: var(--ink-300);
  background: transparent;
}

.producto-modal-img-full {
  height: 260px;
  border-radius: var(--garvix-radius) var(--garvix-radius) 0 0;
}

.producto-modal-content {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  #modalProducto .modal-content {
    flex-direction: row;
    min-height: 420px;
    max-height: 85vh;
    overflow: hidden;
  }
  .producto-modal-img-full {
    height: auto;
    width: 46%;
    flex-shrink: 0;
    border-radius: var(--garvix-radius) 0 0 var(--garvix-radius);
  }
  .producto-modal-content {
    width: 54%;
  }
  .producto-modal-content .modal-body,
  .producto-modal-content .modal-footer {
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
  }
}

/* ==== Public catalog page ==== */
.catalogo-hero {
  background: radial-gradient(circle at top left, #D00B1C, var(--garvix-primary) 45%, var(--garvix-hero-dark) 100%);
}

.catalogo-logo {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  object-fit: cover;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  background: #fff;
}

.catalogo-logo-fallback {
  width: 84px;
  height: 84px;
  border-radius: 20px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto;
}

.catalogo-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
}

.catalogo-toolbar .input-group {
  flex: 1 1 240px;
}

.catalogo-orden {
  width: auto;
  flex: 0 0 auto;
}

.catalogo-view-toggle .btn.active {
  background: var(--garvix-primary);
  color: #fff;
  border-color: var(--garvix-primary);
}

.catalogo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}

@media (min-width: 1360px) {
  .catalogo-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

.catalogo-grid .catalogo-item {
  background: #fff;
  border-radius: var(--garvix-radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.04), 0 6px 18px rgba(30, 20, 25, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.catalogo-grid .catalogo-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 2px 4px rgba(30, 20, 25, 0.05), 0 14px 28px rgba(30, 20, 25, 0.12);
}

.catalogo-grid .catalogo-item-img img,
.catalogo-grid .catalogo-item-noimg {
  box-sizing: border-box;
  width: 100%;
  height: 150px;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink-300);
  font-size: 2rem;
  padding: 0.4rem;
}

.catalogo-grid .catalogo-item-body {
  padding: 0.8rem;
}

.catalogo-item-nombre {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink-900);
}

.catalogo-item-desc {
  color: var(--ink-500);
  font-size: 0.8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.catalogo-item-precio {
  color: var(--garvix-primary);
  font-weight: 800;
  margin-top: 0.3rem;
}

.catalogo-item-tiers {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  color: var(--ink-500);
  font-weight: 600;
}

/* List view */
.catalogo-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.catalogo-list .catalogo-item {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(30, 20, 25, 0.05);
  display: flex;
  align-items: center;
  overflow: hidden;
}

.catalogo-list .catalogo-item-img img,
.catalogo-list .catalogo-item-noimg {
  box-sizing: border-box;
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  color: var(--ink-300);
  font-size: 1.3rem;
  flex-shrink: 0;
  padding: 0.2rem;
}

.catalogo-list .catalogo-item-body {
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex: 1;
}

.catalogo-list .catalogo-item-desc {
  white-space: normal;
}

.catalogo-list .catalogo-item-precio {
  margin-top: 0;
  white-space: nowrap;
}

/* ==== POS v2 (pos/index.php): barra con buscador central, productos y
   carrito como dos paneles a pantalla completa en escritorio. Se apoya en
   las reglas .pos-* de arriba y solo sobreescribe lo que cambia. ==== */
.pos2-topbar {
  flex-wrap: nowrap;
  gap: 0.85rem;
  padding: 0.6rem 1rem;
}
.pos2-topbar .pos-topbar-brand { flex-shrink: 0; max-width: 240px; }
.pos2-sub { display: flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; color: var(--ink-500); white-space: nowrap; }
.pos2-topbar .pos-online-pill { background: none; padding: 0; font-size: 0.72rem; font-weight: 600; color: var(--ink-500); }
.pos2-topbar .pos-online-dot { width: 7px; height: 7px; box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.18); }
.pos2-buscar {
  flex: 1 1 auto;
  max-width: 640px;
  margin: 0 auto;
  min-height: 44px;
  border-radius: 999px;
  background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.pos2-buscar:focus-within {
  border-color: var(--garvix-primary);
  background: var(--garvix-sidebar-bg);
  box-shadow: 0 0 0 4px var(--garvix-primary-soft);
}
.pos2-buscar .form-control { font-size: 0.95rem; }
.pos2-kbd, .pos2-kbd-claro {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1rem 0.4rem;
  border-radius: 6px;
  flex-shrink: 0;
}
.pos2-kbd { background: var(--garvix-sidebar-bg); color: var(--ink-500); border: 1px solid var(--line); box-shadow: none; }
.pos2-kbd-claro { background: rgba(255, 255, 255, 0.2); color: #fff; margin-left: 0.25rem; }
.pos2-topbar .pos-topbar-actions { flex-wrap: nowrap; margin-left: 0; gap: 0.4rem; }
.pos2-btn { height: 38px; border-radius: 10px; display: inline-flex; align-items: center; gap: 0.35rem; border-color: var(--garvix-sidebar-border); color: var(--ink-700); font-weight: 600; font-size: 0.85rem; }
.pos2-btn:hover { background: var(--surface); color: var(--ink-900); border-color: var(--garvix-sidebar-border); }
.pos2-caja {
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.pos2-caja.abierta { background: rgba(30, 158, 90, 0.12); color: #167a45; }
.pos2-caja.cerrada { background: var(--surface); color: var(--ink-700); border-color: var(--garvix-sidebar-border); }
.pos2-caja.cerrada:hover { border-color: var(--garvix-primary); color: var(--garvix-primary); }
html[data-bs-theme="dark"] .pos2-caja.abierta { color: #5fd49a; }
.pos2-caja-menu { min-width: 270px; }

/* Productos */
.pos2-productos { min-width: 0; }
.pos2-filtros { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.85rem; }
.pos2-filtros .pos-cat-barra { border-bottom: none; }
.pos2-filtros .pos-categorias { gap: 0.4rem; padding-bottom: 0; }
.pos2-filtros .pos-cat-tab {
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  background: var(--garvix-sidebar-bg);
  border: 1px solid var(--garvix-sidebar-border);
  color: var(--ink-700);
  font-size: 0.84rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.pos2-filtros .pos-cat-tab:hover { border-color: var(--ink-300); }
.pos2-filtros .pos-cat-tab.activo { background: var(--ink-900); border-color: var(--ink-900); color: var(--garvix-sidebar-bg); }
.pos2-filtros .pos-cat-tab.activo::after { display: none; }
.pos2-filtros .pos-cat-agregar { margin-bottom: 0; width: 2.1rem; height: 2.1rem; }
.pos2-contador { font-size: 0.78rem; font-weight: 600; color: var(--ink-500); }
.pos2-contador #posCatLabel { color: var(--ink-900); }

.pos2-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; justify-content: stretch; }
.pos2-grid .pos-card { border-radius: 14px; box-shadow: none; outline: none; }
.pos2-grid .pos-card:hover { border-color: var(--ink-300); box-shadow: 0 8px 22px rgba(30, 20, 25, 0.08); }
.pos2-grid .pos-card:focus-visible { border-color: var(--garvix-primary); box-shadow: 0 0 0 3px var(--garvix-primary-soft); }
.pos2-grid .pos-card-img { height: auto; aspect-ratio: 4 / 3; background: var(--surface); }
.pos2-grid .pos-card-img img { padding: 0.55rem; }
.pos2-inicial { width: 44px; height: 44px; border-radius: 14px; background: var(--garvix-sidebar-bg); color: var(--ink-500); font-weight: 800; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; }
.pos2-grid .pos-card-body { padding: 0.6rem 0.7rem 0.7rem; }
.pos2-grid .pos-card-nombre { font-size: 0.84rem; font-weight: 600; min-height: 2.1em; }
.pos2-grid .pos-card-footer { padding-top: 0.45rem; }
.pos2-grid .pos-card-precio { font-size: 0.95rem; }
.pos2-grid .pos-card-unidad { font-size: 0.68rem; color: var(--ink-500); }
.pos2-grid .pos-card-unidad.bajo { color: #b8730b; font-weight: 700; }
.pos2-grid .pos-card-unidad.agotado { color: var(--garvix-primary); font-weight: 700; }
.pos2-grid .pos-card-mayoreo { top: 8px; left: 8px; width: 22px; height: 22px; }
.pos2-etiqueta { position: absolute; top: 8px; right: 8px; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: 6px; }
.pos2-etiqueta.agotado { background: var(--garvix-primary); color: #fff; }
.pos-card-agotado .pos-card-img img, .pos-card-agotado .pos2-inicial { opacity: 0.45; }
.pos2-agregar {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--garvix-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.15s ease, transform 0.15s ease;
  box-shadow: 0 4px 10px rgba(242, 13, 32, 0.3);
}
.pos2-grid .pos-card:hover .pos2-agregar, .pos2-grid .pos-card:focus-visible .pos2-agregar { opacity: 1; transform: scale(1); }
.pos2-agregado { animation: pos2-agregado 0.35s ease; }
@keyframes pos2-agregado {
  0% { box-shadow: 0 0 0 0 rgba(242, 13, 32, 0.35); }
  100% { box-shadow: 0 0 0 10px rgba(242, 13, 32, 0); }
}
.pos2-vacio { text-align: center; padding: 3.5rem 1rem; }
.pos2-vacio > i { font-size: 2.2rem; color: var(--ink-300); display: block; margin-bottom: 0.6rem; }
.pos2-vacio[hidden] { display: none; }

/* Carrito */
.pos2-carrito { flex-direction: column; min-width: 0; }
.pos2-carrito > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.pos2-carrito .pos-cart-card {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--garvix-sidebar-border);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(20, 15, 20, 0.06);
  overflow: hidden;
}
.pos2-carrito .pos-cart-header { padding: 0.85rem 1rem; border-bottom: 1px solid var(--line); background: var(--garvix-sidebar-bg) !important; }
.pos2-carrito .pos-vaciar-btn { width: 34px; height: 34px; background: var(--surface); box-shadow: none; font-size: 0.95rem; }
.pos2-carrito .card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.pos2-cart-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0.9rem 1rem; scrollbar-width: thin; }
.pos2-cart-pie { flex-shrink: 0; padding: 0.25rem 1rem 1rem; border-top: 1px solid var(--line); background: var(--garvix-sidebar-bg); }
.pos2-cart-pie .pos-cart-totales { margin-top: 0; border-top: none; }
.pos2-cart-pie .pos-cart-totales-final { font-size: 1.3rem; }
.pos2-cart-pie .pos-procesar-btn { margin-top: 0.6rem; padding: 0.95rem 1rem; font-size: 1.05rem; border-radius: 14px; }
.pos2-carrito .pos-cliente-box { padding: 0.55rem 0.7rem; }
.pos2-carrito .pos-empty { padding-top: 2.5rem !important; }

@media (min-width: 992px) {
  body.pos-kiosko { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
  .pos2-layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(340px, 30vw, 420px);
    gap: 1rem;
    padding: 1rem;
  }
  .pos2-productos { overflow-y: auto; padding-right: 0.25rem; scrollbar-width: thin; }
  .pos2-filtros { position: sticky; top: 0; z-index: 2; background: var(--surface-page); padding-bottom: 0.5rem; margin-bottom: 0.35rem; }
  .pos2-carrito { min-height: 0; }
}
@media (max-width: 991.98px) {
  .pos2-topbar { flex-wrap: wrap; }
  .pos2-topbar .pos-topbar-brand { flex: 1 1 auto; max-width: none; min-width: 0; }
  .pos2-buscar { order: 3; flex: 1 1 100%; max-width: none; }
  .pos2-layout { padding-bottom: 90px; }
}
@media (max-width: 575.98px) {
  .pos2-topbar .pos-theme-toggle[data-tema-toggle] { display: none; }
  .pos2-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 0.6rem; }
  .pos2-agregar { opacity: 1; transform: scale(1); width: 26px; height: 26px; font-size: 0.85rem; }
}

/* ==== POS v2: modal de cobro (#modalProcesarPago) ==== */
.pos-pago-modal { border-radius: 22px; }
.pos-pago-modal-header { padding: 1.35rem 1.5rem 1.2rem; }
.pos-pago-modal-total { font-size: 2.3rem; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pos-pago-modal .modal-body { padding: 1.15rem 1.35rem 1.25rem; }
.pos-pago-modal .pos2-metodos { grid-template-columns: repeat(5, 1fr); gap: 0.4rem; }
.pos-pago-modal .pos2-metodos .choice-card { padding: 0.65rem 0.25rem; border-radius: 12px; font-size: 0.72rem; }
.pos-pago-modal .pos2-metodos .choice-card i { font-size: 1.2rem; }

.pos2-efectivo { margin-bottom: 0.9rem; }
.pos2-efectivo.d-none { display: none !important; }
.pos-pago-modal .pos2-recibido .form-control {
  min-height: 56px;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pos-pago-modal .pos2-recibido .input-group-text { font-weight: 700; color: var(--ink-500); background: var(--surface); }
.pos2-billetes { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.75rem; }
.pos2-billetes:empty { display: none; }
.pos2-billete {
  flex: 1 1 0;
  min-width: 78px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
  padding: 0.5rem 0.4rem;
  border: 1.5px solid var(--garvix-sidebar-border);
  border-radius: 12px;
  background: var(--garvix-sidebar-bg);
  color: var(--ink-900);
  font-weight: 700;
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.pos2-billete small { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-500); }
.pos2-billete:hover { border-color: var(--ink-300); }
.pos2-billete:active { transform: scale(0.96); }
.pos2-billete.activo { border-color: var(--garvix-primary); background: var(--garvix-primary-soft); color: var(--garvix-primary); }

/* La cifra que el cajero tiene que leer de lejos. */
.pos2-cambio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 2px dashed var(--line);
  background: var(--surface-page);
  text-align: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.pos2-cambio-label { font-size: 0.74rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-500); }
.pos2-cambio-monto { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink-300); }
.pos2-cambio[data-estado="cambio"] { border: 2px solid #1e9e5a; background: rgba(30, 158, 90, 0.1); }
.pos2-cambio[data-estado="cambio"] .pos2-cambio-label, .pos2-cambio[data-estado="cambio"] .pos2-cambio-monto { color: #167a45; }
.pos2-cambio[data-estado="cambio"] .pos2-cambio-monto { animation: pos2-cambio-pop 0.25s ease; }
.pos2-cambio[data-estado="exacto"] { border: 2px solid #1e9e5a; background: rgba(30, 158, 90, 0.06); }
.pos2-cambio[data-estado="exacto"] .pos2-cambio-label, .pos2-cambio[data-estado="exacto"] .pos2-cambio-monto { color: #167a45; }
.pos2-cambio[data-estado="falta"] { border: 2px solid var(--garvix-primary); background: var(--garvix-primary-soft); }
.pos2-cambio[data-estado="falta"] .pos2-cambio-label, .pos2-cambio[data-estado="falta"] .pos2-cambio-monto { color: var(--garvix-primary); }
html[data-bs-theme="dark"] .pos2-cambio[data-estado="cambio"] .pos2-cambio-label,
html[data-bs-theme="dark"] .pos2-cambio[data-estado="cambio"] .pos2-cambio-monto,
html[data-bs-theme="dark"] .pos2-cambio[data-estado="exacto"] .pos2-cambio-label,
html[data-bs-theme="dark"] .pos2-cambio[data-estado="exacto"] .pos2-cambio-monto { color: #5fd49a; }
html[data-bs-theme="dark"] .pos2-cambio[data-estado="falta"] .pos2-cambio-label,
html[data-bs-theme="dark"] .pos2-cambio[data-estado="falta"] .pos2-cambio-monto { color: #ff8a8c; }
@keyframes pos2-cambio-pop { 0% { transform: scale(0.92); } 100% { transform: scale(1); } }
.pos2-efectivo .form-text { text-align: center; }

.pos2-descuento { border: 1px solid var(--line); border-radius: 12px; padding: 0.55rem 0.8rem; margin-bottom: 0.8rem; }
.pos2-descuento summary { cursor: pointer; font-size: 0.84rem; font-weight: 600; color: var(--ink-700); list-style: none; display: flex; align-items: center; gap: 0.4rem; }
.pos2-descuento summary::-webkit-details-marker { display: none; }
.pos2-descuento summary::after { content: '\F282'; font-family: 'bootstrap-icons'; margin-left: auto; font-size: 0.75rem; transition: transform 0.15s ease; }
.pos2-descuento[open] summary::after { transform: rotate(180deg); }
.pos2-descuento summary span { color: var(--garvix-primary); font-weight: 700; }
.pos-pago-modal .pos-continuar-btn { min-height: 58px; font-size: 1.05rem; border-radius: 14px; background-image: var(--garvix-gradient); background-color: var(--garvix-primary); }
.pos-pago-modal .pos-continuar-btn:not(:disabled):hover { background-color: var(--garvix-primary-hover); filter: brightness(1.05); }

@media (max-width: 575.98px) {
  .pos-pago-modal .pos2-metodos { grid-template-columns: repeat(3, 1fr); }
  .pos-pago-modal-total { font-size: 2rem; }
  .pos2-cambio-monto { font-size: 2.1rem; }
  .pos2-billete { min-width: 70px; }
}

/* Boton de linterna del lector de codigos (assets/js/escaner-codigo.js). */
.pos-scan-linterna.activo { background: #fff; color: #101820; }
.pos-scan-viewport video { object-fit: cover; }

/* ==== Lector de codigos con camara (assets/js/escaner-codigo.js) ==== */
.esc-wrap { position: relative; width: 100%; aspect-ratio: 16 / 10; background: #000; border-radius: 14px; overflow: hidden; }
.esc-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; }
.esc-guia {
  position: absolute; left: 15%; right: 15%; top: 27.5%; bottom: 27.5%;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  border: 2px solid rgba(255, 255, 255, 0.9);
}
.esc-linea {
  position: absolute; left: 6%; right: 6%; top: 50%; height: 2px;
  background: #ff4d4f; box-shadow: 0 0 10px 2px rgba(255, 77, 79, 0.7);
  animation: esc-barrido 1.8s ease-in-out infinite;
}
@keyframes esc-barrido { 0%, 100% { transform: translateY(-38px); } 50% { transform: translateY(38px); } }
.esc-leido .esc-guia { border-color: #22c55e; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45), inset 0 0 0 9999px rgba(34, 197, 94, 0.18); }
.esc-leido .esc-linea { display: none; }
.esc-manual { display: flex; gap: 0.5rem; margin-top: 0.85rem; }
.esc-manual .form-control { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.25); color: #fff; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.esc-manual .form-control::placeholder { color: rgba(255, 255, 255, 0.55); letter-spacing: 0; }
.esc-manual .form-control:focus { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; box-shadow: none; }
.pos-scan-viewport:empty { min-height: 0; }

/* Medidor de enfoque del lector (calculado de los bordes del propio codigo). */
.esc-enfoque { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; }
.esc-enfoque[hidden] { display: none; }
.esc-enfoque-barra { flex: 0 0 110px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
.esc-enfoque-barra span { display: block; height: 100%; width: 0; border-radius: 999px; background: #9aa3ae; transition: width 0.25s ease, background 0.25s ease; }
.esc-enfoque-texto { font-size: 0.82rem; font-weight: 700; color: rgba(255, 255, 255, 0.75); }
.esc-enfoque[data-estado="mal"] .esc-enfoque-barra span { background: #ff4d4f; }
.esc-enfoque[data-estado="mal"] .esc-enfoque-texto { color: #ff8a8c; }
.esc-enfoque[data-estado="casi"] .esc-enfoque-barra span { background: #f0b94d; }
.esc-enfoque[data-estado="casi"] .esc-enfoque-texto { color: #f3c27a; }
.esc-enfoque[data-estado="bien"] .esc-enfoque-barra span { background: #22c55e; }
.esc-enfoque[data-estado="bien"] .esc-enfoque-texto { color: #5fd49a; }

/* =====================================================================
   UI global v2: lleva el estilo de las pantallas rediseñadas (tarjetas con
   borde fino, encabezados discretos, pestanas tipo segmento) a todas las
   pantallas que usan componentes genericos de Bootstrap. Va al final para
   ganarle a las reglas base de arriba sin tener que tocarlas una por una.
   ===================================================================== */

/* Titulo de pagina (el h4 suelto con que empiezan casi todas las vistas). */
.garvix-main > .container-fluid > h4,
.garvix-main > .container-fluid > .d-flex > h4,
.garvix-main > .container-fluid > .d-flex > div > h4,
.gx-titulo h4 {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Tarjetas: borde fino + sombra minima, igual que .fv-card / .dx-card. */
.card {
  background: var(--garvix-sidebar-bg);
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(30, 20, 25, 0.03);
}
.card-header,
.card-header.bg-white {
  background: var(--garvix-sidebar-bg) !important;
  padding: 0.95rem 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.card-header > i:first-child,
.card-header > .bi:first-child { color: var(--garvix-primary); }
.card-footer { background: var(--surface-page); border-top: 1px solid var(--line); }
.card-body { padding: 1.15rem 1.25rem; }

/* Tablas */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--surface-page); color: var(--ink-700); }
.table thead th { background: var(--surface-page); padding-top: 0.7rem; padding-bottom: 0.7rem; }
.table tbody tr:hover > * { background: var(--surface-page); }
.table td.text-center.text-muted[colspan],
.table td.text-muted[colspan] { padding: 2.5rem 1rem !important; font-size: 0.9rem; }
.table-stack tr { background: var(--garvix-sidebar-bg); }

/* Pestanas nav-pills -> segmento (RRHH, pedidos, cliente...). */
.nav-pills {
  display: inline-flex;
  gap: 2px;
  background: var(--surface);
  border-radius: 999px;
  padding: 3px;
  max-width: 100%;
}
.nav-pills .nav-link {
  padding: 0.4rem 0.95rem;
  font-size: 0.86rem;
  color: var(--ink-500);
  white-space: nowrap;
}
.nav-pills .nav-link:hover { color: var(--ink-900); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background: var(--garvix-sidebar-bg);
  color: var(--ink-900);
  box-shadow: 0 1px 3px rgba(20, 15, 20, 0.12);
}
.nav-pills .nav-link .badge { margin-left: 0.25rem; }

/* Formularios */
.form-control, .form-select { background-color: var(--garvix-sidebar-bg); min-height: 40px; }
.form-control-sm, .form-select-sm { min-height: 32px; }
.form-control:disabled, .form-control[readonly] { background-color: var(--surface); }
.input-group-text { background: var(--surface); border-color: var(--garvix-sidebar-border); color: var(--ink-500); font-weight: 600; }
.form-check-input:checked { background-color: var(--garvix-primary); border-color: var(--garvix-primary); }
.form-check-input:focus { border-color: var(--garvix-primary); box-shadow: 0 0 0 0.2rem var(--garvix-primary-soft); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23940000'/%3e%3c/svg%3e"); }

/* Avisos */
.alert { border-radius: 12px; border: none; font-size: 0.9rem; }
.alert-success { background: rgba(30, 158, 90, 0.1); color: #146c3e; }
.alert-danger { background: var(--garvix-primary-soft); color: var(--garvix-primary); }
.alert-warning { background: rgba(232, 163, 61, 0.14); color: #7a4d06; }
.alert-info { background: rgba(13, 110, 253, 0.08); color: #0a4fb5; }
.alert-light { background: var(--surface-page); color: var(--ink-700); }
html[data-bs-theme="dark"] .alert-success { color: #5fd49a; }
html[data-bs-theme="dark"] .alert-danger { color: #ff8a8c; }
html[data-bs-theme="dark"] .alert-warning { color: #f3c27a; }
html[data-bs-theme="dark"] .alert-info { color: #79b0ff; }

/* Modales, menus, listas */
.modal-content { border: none; border-radius: 18px; background: var(--garvix-sidebar-bg); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22); }
.modal-header { border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; }
.modal-header .modal-title { font-weight: 700; font-size: 1.05rem; }
.modal-footer { border-top: 1px solid var(--line); padding: 0.8rem 1.25rem; }
.dropdown-menu { border: 1px solid var(--line); border-radius: 12px; padding: 0.35rem; box-shadow: 0 12px 30px rgba(20, 15, 20, 0.12); background: var(--garvix-sidebar-bg); }
.dropdown-item { border-radius: 8px; padding: 0.45rem 0.7rem; font-size: 0.88rem; }
.dropdown-item.active, .dropdown-item:active { background: var(--garvix-primary-soft); color: var(--garvix-primary); }
.list-group-item { background: var(--garvix-sidebar-bg); border-color: var(--line); color: var(--ink-700); }
.list-group-item-action:hover { background: var(--surface-page); }
.pagination .page-link { border-radius: 8px; margin: 0 2px; border-color: var(--line); color: var(--ink-700); background: var(--garvix-sidebar-bg); }
.pagination .page-item.active .page-link { background: var(--garvix-primary); border-color: var(--garvix-primary); color: #fff; }
.progress { background: var(--surface); border-radius: 999px; }
.progress-bar { background-color: var(--garvix-primary); }

/* Tarjetas de cifras (inicio, RRHH, contabilidad...): sin sombra pesada. */
.stat-card { border: 1px solid var(--line); box-shadow: none; }
.stat-card:hover { box-shadow: 0 8px 22px rgba(30, 20, 25, 0.08); }

/* Listas tipo recibo en celular */
.mov-list { border: 1px solid var(--line); box-shadow: none; }
.mov-item:hover { background: var(--surface-page); }

/* Badges "subtle" de Bootstrap legibles en oscuro */
html[data-bs-theme="dark"] .badge.bg-light { background: var(--surface) !important; color: var(--ink-700) !important; }
html[data-bs-theme="dark"] .table-light, html[data-bs-theme="dark"] .table-light > th, html[data-bs-theme="dark"] .table-light > td { --bs-table-bg: var(--surface); color: var(--ink-700); }

/* Utilidad usada en muchas vistas (no existe en Bootstrap 5.3): permite que un hijo flex/grid se encoja y recorte su texto. */
.min-w-0 { min-width: 0 !important; }

/* Las tablas anchas dentro de tarjetas se cortaban (overflow:hidden de arriba, puesto para redondear esquinas): en escritorio se desplazan de lado. */
@media (min-width: 768px) { .card .table-responsive { overflow-x: auto; } }

/* Tarjetas de cifras: los montos se partian a la mitad ("RD$2,000." / "00")
   por overflow-wrap:break-word. Ahora el numero nunca se corta: se achica un
   poco segun el ancho y, como ultimo recurso, se recorta con "...". */
.stat-card .stat-value {
  overflow-wrap: normal;
  word-break: keep-all;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(1rem, 1.35vw, 1.28rem);
}
.stat-card .stat-icon { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 12px; }
@media (max-width: 575.98px) { .stat-card .stat-value { font-size: 1.15rem; } }

/* Movimiento: pestanas de periodo (Diario/Semanal/...) como segmento. */
.pos-categorias:has(.pos-cat-chip) { gap: 3px; background: var(--surface); border-radius: 999px; padding: 3px; border-bottom: none; flex: 0 1 auto !important; }
.pos-cat-chip { flex-shrink: 0; padding: 0.38rem 0.9rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.pos-cat-chip:hover { color: var(--ink-900); }
.pos-cat-chip.activo { background: var(--garvix-sidebar-bg); color: var(--ink-900); box-shadow: 0 1px 3px rgba(20, 15, 20, 0.12); }

/* Logos de negocio con letras oscuras: en modo oscuro se pierden sobre el
   fondo, asi que se les pone una "placa" clara detras. */
html[data-bs-theme="dark"] .gx-negocio-logo:not(.gx-negocio-logo-vacio),
html[data-bs-theme="dark"] .fv-logo,
html[data-bs-theme="dark"] .garvix-topbar-brand img { background: #fff; padding: 3px 5px; border-radius: 8px; }

/* Factura: tarjeta "Comprobante fiscal" sin amontonarse. */
.fv-card-head { flex-wrap: wrap; }
.fv-card-head > .badge { margin-left: auto; }
.fv-card-head h6 { white-space: nowrap; }

/* Filtros tipo segmento: en celular una sola fila que se desliza de lado (no dos renglones). */
@media (max-width: 575.98px) { .dx-segmento, .fi-segmento, .cl-segmento, .iv-segmento, .rp-rangos, .gi-rangos { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; scrollbar-width: none; } .dx-segmento > *, .fi-segmento > *, .cl-segmento > *, .iv-segmento > *, .rp-rangos > *, .gi-rangos > * { flex-shrink: 0; } }

/* ==== Menú horizontal de escritorio (>= 992px) ====
   Dos niveles: arriba la barra vino con las secciones en un control
   segmentado (la sección elegida es la píldora blanca); debajo, la franja con
   las páginas de la sección como fichas. En celular no se muestra: se usa el
   cajón (rail + panel) con la barra de pestañas. */
.gx-top { display: none; }
@media (min-width: 992px) {
  .garvix-layout { flex-direction: column; }
  .garvix-sidebar, .garvix-overlay { display: none !important; }
  .gx-top {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 6px 18px rgba(16, 24, 32, 0.18);
  }
  .gx-top-barra {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 60px;
    padding: 0 1.1rem;
    background: var(--garvix-black, #101820); border-bottom: 3px solid var(--garvix-primary);
    color: #fff;
  }
  .gx-top-marca {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    max-width: 230px;
    min-width: 0;
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
  }
  .gx-top-marca img { height: 34px; max-width: 56px; object-fit: contain; border-radius: 9px; background: #fff; padding: 2px; }
  .gx-top-marca .garvix-brand-mark { background: var(--garvix-primary); box-shadow: 0 4px 12px rgba(242, 13, 32, 0.35); }
  .gx-top-negocio { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; }
  /* Control segmentado: una cápsula translúcida con las secciones dentro. */
  .gx-top-secciones {
    flex: 1;
    min-width: 0;
    display: flex;
    justify-content: center;
  }
  .gx-top-secciones {
    gap: 2px;
    padding: 4px;
    margin: 0 auto;
    max-width: max-content;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .gx-top-secciones::-webkit-scrollbar { display: none; }
  .gx-top-sec {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    flex-shrink: 0;
    height: 38px;
    padding: 0 0.95rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.18s ease, color 0.18s ease;
  }
  .gx-top-sec i { font-size: 1rem; }
  .gx-top-sec:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
  .gx-top-sec:focus-visible, .gx-top-icono:focus-visible, .gx-top-usuario:focus-visible { outline: 2px solid #FF4D5A; outline-offset: 2px; }
  .gx-top-sec.seleccionado { background: var(--garvix-primary); color: #fff; box-shadow: 0 4px 14px rgba(242, 13, 32, 0.4); }
  /* La sección de la página actual, si no es la elegida: punto bajo el ícono. */
  .gx-top-sec.es-actual:not(.seleccionado)::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 18px;
    height: 3px;
    margin-left: -9px;
    border-radius: 3px;
    background: var(--garvix-primary);
  }
  .gx-top-aviso {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--garvix-gold, #f2b33d);
    color: #3a2400;
    font-size: 0.66rem;
    line-height: 18px;
    text-align: center;
  }
  .gx-top-herr { display: flex; align-items: center; gap: 0.35rem; flex-shrink: 0; }
  .gx-top-icono {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
  }
  .gx-top-icono:hover { background: rgba(255, 255, 255, 0.2); }
  .gx-top-icono.seleccionado { background: #fff; color: var(--garvix-primary); }
  .gx-top-usuario {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 210px;
    margin-left: 0.25rem;
    padding: 4px 10px 4px 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-align: left;
  }
  .gx-top-usuario:hover { background: rgba(255, 255, 255, 0.2); }
  .gx-top-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--garvix-primary);
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gx-top-usuario-texto { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
  .gx-top-usuario-texto strong { font-size: 0.8rem; }
  .gx-top-usuario-texto small { font-size: 0.68rem; color: rgba(255, 255, 255, 0.7); }
  .gx-top-usuario > .bi-chevron-down { font-size: 0.7rem; opacity: 0.75; }
  .gx-top-menu { border-radius: 14px; border-color: var(--line); padding: 0.4rem; min-width: 230px; }
  .gx-top-menu .dropdown-item { border-radius: 9px; display: flex; gap: 0.55rem; align-items: center; font-size: 0.88rem; padding: 0.5rem 0.7rem; }
  /* Franja de páginas: fichas con ícono. */
  .gx-top-franja {
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 1.1rem;
    background: var(--garvix-sidebar-bg);
    border-bottom: 1px solid var(--line);
  }
  .gx-sub { display: flex; align-items: center; gap: 0.9rem; min-width: 0; width: 100%; animation: gxFranjaEntrar 0.2s ease; }
  .gx-sub[hidden] { display: none; }
  @keyframes gxFranjaEntrar { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
  .gx-sub-titulo {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding-right: 0.9rem;
    border-right: 1px solid var(--line);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--garvix-primary);
  }
  .gx-sub-fichas {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.45rem 0;
    overflow-x: auto;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
    padding-right: 28px;
  }
  .gx-ficha {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
    padding: 0.38rem 0.75rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--ink-700);
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  }
  .gx-ficha i { color: var(--ink-500); font-size: 0.95rem; }
  .gx-ficha:hover { background: var(--surface); color: var(--ink-900); border-color: var(--line); }
  .gx-ficha.activa { background: var(--garvix-primary-soft); color: var(--garvix-primary); border-color: rgba(242, 13, 32, 0.18); font-weight: 700; }
  .gx-ficha.activa i { color: var(--garvix-primary); }
  .gx-ficha b { min-width: 18px; padding: 0 5px; border-radius: 999px; background: #d92d20; color: #fff; font-size: 0.66rem; text-align: center; }
  .gx-sub-separador {
    flex-shrink: 0;
    margin: 0 0.25rem 0 0.5rem;
    padding-left: 0.7rem;
    border-left: 1px solid var(--line);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-500);
  }
  .gx-sub-pista { margin: 0; font-size: 0.82rem; color: var(--ink-500); }
  html[data-bs-theme="dark"] .gx-top-barra { background: linear-gradient(100deg, #140405 0%, #3a0708 45%, #6e0b0d 100%); }
  html[data-bs-theme="dark"] .gx-top-sec.seleccionado, html[data-bs-theme="dark"] .gx-top-icono.seleccionado { background: #F20D20; color: #fff; }
  html[data-bs-theme="dark"] .gx-ficha.activa { border-color: rgba(255, 77, 90, 0.35); }
}
/* Pantallas medianas: las secciones no elegidas quedan solo con su ícono. */
@media (min-width: 992px) and (max-width: 1399.98px) {
  .gx-top-sec:not(.seleccionado) span { display: none; }
  .gx-top-sec:not(.seleccionado) { padding: 0 0.75rem; }
  .gx-top-usuario-texto { display: none; }
  .gx-top-negocio { max-width: 130px; }
}
@media print { .gx-top { display: none !important; } }
/* Con el menú horizontal fijo arriba (~110px), los resúmenes laterales que se
   quedan pegados al bajar empiezan debajo de él. */
@media (min-width: 992px) {
  .kf-resumen, .dp-resumen, .df-resumen, .af-resumen, .gf-resumen, .fv-col-lado, .pp-resumen, .pg-resumen, .pf-lado, .cf-resumen { top: calc(122px + 1rem) !important; }
}

/* ==== Subgrupos del menú, bien separados ==== */
@media (min-width: 992px) {
  .gx-sub-fichas { gap: 0.6rem; }
  .gx-sub-bloque {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    padding: 3px 4px 3px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-page);
  }
  .gx-sub-etiqueta {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    margin-right: 0.2rem;
    padding: 0 0.65rem;
    border-right: 1px solid var(--line);
    border-radius: 11px 0 0 11px;
    background: var(--garvix-sidebar-bg);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-500);
    white-space: nowrap;
  }
  .gx-sub-bloque .gx-ficha { padding: 0.3rem 0.65rem; border-radius: 9px; }
  .gx-sub-bloque:has(.gx-ficha.activa) { border-color: rgba(242, 13, 32, 0.28); }
  .gx-sub-bloque:has(.gx-ficha.activa) .gx-sub-etiqueta { color: var(--garvix-primary); }
  html[data-bs-theme="dark"] .gx-sub-bloque:has(.gx-ficha.activa) { border-color: rgba(255, 77, 90, 0.4); }
}
/* Cajón (celular) y panel: cada subgrupo con una línea y su título. */
.garvix-nav-sublabel {
  margin-top: 0.7rem;
  padding: 0.75rem 0.6rem 0.35rem;
  border-top: 1px solid var(--line);
  color: var(--garvix-primary);
}
.gx-panel-titulo + .garvix-nav-sublabel { margin-top: 0; padding-top: 0.1rem; border-top: 0; }

/* ==== Franja de páginas en columnas verticales (sin scroll horizontal) ====
   Cada subgrupo es una columna: su nombre arriba y sus páginas una debajo de
   otra. Las columnas se acomodan y bajan de línea si no caben. Solo la barra
   de secciones se queda fija al bajar; la franja se va con el contenido. */
@media (min-width: 992px) {
  .gx-top { display: contents; }
  .gx-top-barra { position: sticky; top: 0; z-index: 1040; box-shadow: 0 6px 18px rgba(40, 6, 8, 0.14); }
  .gx-top-franja { align-items: flex-start; min-height: 0; padding: 0.85rem 1.1rem 0.95rem; }
  .gx-sub { align-items: flex-start; gap: 1rem; }
  .gx-sub-titulo { padding: 0.5rem 1rem 0.5rem 0; align-self: stretch; align-items: flex-start; }
  .gx-sub-fichas {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .gx-sub-bloque {
    flex-direction: column;
    align-items: stretch;
    gap: 0.1rem;
    min-width: 200px;
    padding: 0 0 0.35rem;
    border-radius: 12px;
  }
  .gx-sub-etiqueta {
    align-self: stretch;
    margin: 0 0 0.3rem;
    padding: 0.45rem 0.8rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 11px 11px 0 0;
  }
  .gx-sub-bloque .gx-ficha { margin: 0 0.35rem; padding: 0.38rem 0.6rem; border-radius: 8px; }
  .kf-resumen, .dp-resumen, .df-resumen, .af-resumen, .gf-resumen, .fv-col-lado, .pp-resumen, .pg-resumen, .pf-lado, .cf-resumen { top: calc(60px + 1rem) !important; }
}

/* Franja flotante: con la página bajada, al tocar una sección sus páginas
   aparecen justo debajo de la barra fija. */
@media (min-width: 992px) {
  .gx-top-franja.flotante {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    z-index: 1039;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 18px 36px rgba(20, 15, 20, 0.22);
    animation: gxFlotanteEntrar 0.18s ease;
  }
  @keyframes gxFlotanteEntrar { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
  .gx-franja-hueco[hidden] { display: none; }
}

/* La franja de páginas es un panel desplegable: cerrada hasta que se toca una
   sección; abierta, flota bajo la barra sin empujar el contenido. */
@media (min-width: 992px) {
  .gx-top-franja:not(.flotante) { display: none; }
  .gx-franja-hueco { display: none; }
}

/* ==== Auditoría de pantallas (celular, tablet, táctil) ==== */
@media (max-width: 991.98px) {
  /* Con la barra de acciones fija sobre el menú de abajo, el final de la
     página queda libre: el último elemento no se esconde detrás de ella. */
  body:has(.mov-acciones-fijas) .garvix-main {
    padding-bottom: calc(68px + 80px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 419.98px) {
  /* Tres botones en la barra fija: el secundario queda solo con su ícono. */
  .mov-acciones-fijas .btn.mov-solo-icono { flex: 0 0 50px; padding-inline: 0; }
  .mov-acciones-fijas .btn.mov-solo-icono span { display: none; }
}

/* Pantallas táctiles (celular, tablet, laptop con pantalla táctil): todo lo
   que se toca mide al menos ~40px, sin cambiar el diseño con ratón. */
@media (pointer: coarse) {
  .btn-sm, .btn-group-sm > .btn { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
  .btn-sm.btn-link { min-height: 0; }
  .form-control-sm, .form-select-sm { min-height: 40px; }
  .form-check-input { width: 1.3em; height: 1.3em; margin-top: .1em; }
  .form-switch .form-check-input { width: 2.5em; height: 1.4em; }
  .form-check { min-height: 1.75rem; }
  .form-check-label { padding-top: .1rem; padding-bottom: .1rem; }
  /* Enlaces de «volver» y enlaces pequeños sueltos: más área para el dedo. */
  a[class*="-volver"] { padding-block: .55rem; }
  a.small:not(p a):not(li a) { display: inline-block; padding-block: .45rem; }
  /* Casillas de las declaraciones (IT-1, IR-2) y su «?». */
  .it-in { min-height: 40px; }
  .it-guia-link { width: 26px !important; height: 26px !important; font-size: .85rem !important; }
  /* Edición en línea del inventario. */
  .inv-edit-input { min-height: 38px; }
}
/* En el celular los campos van a 16px: con menos, el iPhone hace zoom al
   tocarlos y la página queda movida. */
@media (max-width: 991.98px) and (pointer: coarse) {
  input.form-control, select.form-select, textarea.form-control, .it-in, #garvixBuscarInput,
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="month"], input[type="password"], select, textarea {
    font-size: 16px;
  }
}
/* Tablet horizontal (menú de arriba con secciones solo en ícono): en táctil
   no hay «pasar el ratón», así que cada ícono lleva su nombre debajo. */
@media (min-width: 992px) and (max-width: 1399.98px) and (pointer: coarse) {
  .gx-top-sec:not(.seleccionado) { flex-direction: column; gap: 1px; padding: 0 .5rem; line-height: 1; }
  .gx-top-sec:not(.seleccionado) span { display: block; font-size: .58rem; font-weight: 600; max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gx-top-negocio { max-width: 110px; }
}
/* Inventario en tablet: el nombre del producto no se aprieta y el SKU no se parte. */
@media (min-width: 768px) {
  #tablaInventario td:first-child, #tablaInventario th:first-child { min-width: 210px; }
  #tablaInventario .iv-sku { white-space: nowrap; }
}

/* Punto de venta en el celular: la pantalla va de borde a borde
   (viewport-fit=cover), así que la barra de arriba deja libre la zona de la
   hora, la batería y la cámara (notch), y los lados en horizontal. */
body.pos-kiosko {
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
.pos-kiosko .pos-topbar {
  padding-top: max(0.65rem, calc(env(safe-area-inset-top, 0px) + 0.4rem));
}
.pos-kiosko .modal-dialog[class*="modal-fullscreen"] .modal-content,
.pos-kiosko .offcanvas-top, .pos-kiosko .offcanvas-start, .pos-kiosko .offcanvas-end {
  padding-top: env(safe-area-inset-top, 0px);
}
.pos-kiosko .modal-dialog:not([class*="modal-fullscreen"]) {
  margin-top: max(0.5rem, env(safe-area-inset-top, 0px));
}
/* Tablet horizontal táctil: nombres del menú un poco más grandes. */
@media (min-width: 992px) and (max-width: 1399.98px) and (pointer: coarse) {
  .gx-top-sec:not(.seleccionado) span { font-size: .62rem; }
}
/* Inventario: con el nombre a 180px la tabla cabe en una tablet horizontal. */
@media (min-width: 768px) {
  #tablaInventario td:first-child, #tablaInventario th:first-child { min-width: 180px; }
}
/* Campos con tamaño propio que en el celular hacían zoom en el iPhone. */
@media (max-width: 991.98px) and (pointer: coarse) {
  .si-valor, .lic-select-compacto, .form-select-sm, .form-control-sm, #buscarProducto, textarea.form-control { font-size: 16px !important; }
}

/* Punto de venta: ventas guardadas sin conexión que faltan por enviar. */
.pos-cola-aviso { display: flex; flex-direction: column; gap: .4rem; padding: .55rem 1.1rem; background: #fff7e6; border-bottom: 1px solid #f3d9a4; }
.pos-cola-fila { display: flex; align-items: center; gap: .65rem; flex-wrap: wrap; font-size: .86rem; color: #6b4a07; }
.pos-cola-fila > i { font-size: 1.1rem; }
.pos-cola-fila > span { flex: 1 1 220px; min-width: 0; }
.pos-cola-fila small { display: block; font-size: .76rem; opacity: .85; }
.pos-cola-fila.error { color: #9b1c1c; }
.pos-cola-fila .bi-arrow-repeat { animation: posColaGira 1.2s linear infinite; }
@keyframes posColaGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pos-cola-fila .bi-arrow-repeat { animation: none; } }
html[data-bs-theme="dark"] .pos-cola-aviso { background: #3a2a0a; border-color: #5c4413; }
html[data-bs-theme="dark"] .pos-cola-fila { color: #f3d08a; }
html[data-bs-theme="dark"] .pos-cola-fila.error { color: #f9a4a4; }

/* Encabezado común de pantalla (gx_titulo en includes/functions.php) */
.gx-titulo { display: flex; justify-content: space-between; align-items: flex-end; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.gx-titulo-texto { min-width: 0; flex: 1 1 320px; }
.gx-titulo-texto p { max-width: 760px; }
.gx-titulo-volver { align-items: center; gap: .35rem; font-size: .82rem; font-weight: 600; color: var(--ink-500); margin-bottom: .5rem; text-decoration: none; }
.gx-titulo-volver:hover { color: var(--ink-900); }
.gx-titulo-acciones { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }