:root {
  --pos-primary: #1e3a5f;
  --pos-accent: #2d6a4f;
  --pos-bg: #dbe7f6;
}
body {
  background: linear-gradient(160deg, #eaf1fb 0%, #cfe0f4 45%, #b9d3ef 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

/* Fondo especial (olas azul marino) solo para la pantalla principal de módulos */
body.pos-home-bg {
  background: #04122b url("../img/bg-waves.fd60101a5bc3.svg") center center / cover no-repeat fixed;
  color: #eef4fc;
}
body.pos-home-bg .card,
body.pos-home-bg .modal-content,
body.pos-home-bg .dropdown-menu,
body.pos-home-bg .list-group-item,
body.pos-home-bg .toast,
body.pos-home-bg .offcanvas {
  color: #212529;
}
body.pos-home-bg a { color: #bcdcff; }
body.pos-home-bg .card a { color: var(--pos-primary); }
/* Bootstrap pinta .text-muted en gris oscuro con !important -- sin esto,
   el subtítulo de bienvenida se pierde contra el fondo azul marino. */
body.pos-home-bg .text-muted { color: #cfe0f4 !important; }
body.pos-home-bg .modulo-seccion-titulo { color: #eaf1fb; }

/* ============================================================
   Sistema visual global -- aplica a TODOS los módulos (reportes,
   inventario, clientes, proveedores, compras, contabilidad, caja...).
   El punto de venta tiene sus propios botones/tarjetas custom (no usan
   estas clases de Bootstrap) así que no se ven afectados por esto.
   ============================================================ */

/* --- Botones: color con más carácter, sombra suave y "lift" al pasar el mouse --- */
.btn {
  border-radius: .55rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.98) !important; }
.btn-sm { border-radius: .5rem; }

.btn-primary {
  background: linear-gradient(135deg, #2f6fed, #1c4fc4);
  border-color: #1c4fc4;
  box-shadow: 0 2px 8px rgba(47,111,237,.28);
}
.btn-primary:hover, .btn-primary:focus {
  background: linear-gradient(135deg, #3d7bf5, #2257d1);
  border-color: #2257d1;
  box-shadow: 0 4px 14px rgba(47,111,237,.38);
}
.btn-success {
  background: linear-gradient(135deg, #2fb872, #1e8a54);
  border-color: #1e8a54;
  box-shadow: 0 2px 8px rgba(47,184,114,.25);
}
.btn-success:hover { background: linear-gradient(135deg, #3ac47e, #22995f); box-shadow: 0 4px 14px rgba(47,184,114,.35); }
.btn-danger {
  background: linear-gradient(135deg, #e35d6a, #c0392b);
  border-color: #c0392b;
  box-shadow: 0 2px 8px rgba(220,53,69,.25);
}
.btn-danger:hover { background: linear-gradient(135deg, #ea6d78, #cf3f30); box-shadow: 0 4px 14px rgba(220,53,69,.35); }
.btn-warning {
  background: linear-gradient(135deg, #f7bb5c, #d9891a);
  border-color: #d9891a;
  color: #4a2f05;
  box-shadow: 0 2px 8px rgba(242,169,60,.25);
}
.btn-warning:hover { color: #4a2f05; box-shadow: 0 4px 14px rgba(242,169,60,.35); }

.btn-outline-primary { color: var(--pos-primary); border-color: #c7d3e0; }
.btn-outline-primary:hover { background: var(--pos-primary); border-color: var(--pos-primary); box-shadow: 0 3px 10px rgba(30,58,95,.25); }
.btn-outline-secondary { color: #5b6673; border-color: #d7dde3; }
.btn-outline-secondary:hover { background: #5b6673; border-color: #5b6673; box-shadow: 0 3px 10px rgba(91,102,115,.2); }
.btn-outline-danger { color: #c0392b; border-color: #f0c4c0; }
.btn-outline-danger:hover { background: #c0392b; border-color: #c0392b; box-shadow: 0 3px 10px rgba(192,57,43,.25); }
.btn-outline-success { color: #1e8a54; border-color: #bfe3cf; }
.btn-outline-success:hover { background: #1e8a54; border-color: #1e8a54; box-shadow: 0 3px 10px rgba(30,138,84,.25); }
.btn-outline-warning { color: #a8720f; border-color: #f3dcae; }
.btn-outline-warning:hover { background: #d9891a; border-color: #d9891a; color: #fff; box-shadow: 0 3px 10px rgba(217,137,26,.25); }
.btn-outline-info { color: #146c7d; border-color: #bfe6ec; }
.btn-outline-info:hover { background: #17a2b8; border-color: #17a2b8; box-shadow: 0 3px 10px rgba(23,162,184,.25); }
.btn-link { font-weight: 600; }

/* Grupos de botones tipo "segmentado" (filtros por estado, ej. Pólizas) */
.btn-group .btn-outline-secondary { font-weight: 600; }
.btn-group .btn-outline-secondary.active {
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30,58,95,.25);
}

/* --- Tarjetas: sombra suave y esquinas más redondeadas en toda la app --- */
.card {
  border: 1px solid #eef0f3;
  border-radius: .85rem;
  box-shadow: 0 2px 10px rgba(15,39,68,.06);
}
.card-header {
  background: #f8fafc;
  border-bottom: 1px solid #eef0f3;
  font-weight: 700;
  color: var(--pos-primary);
  border-top-left-radius: .85rem !important;
  border-top-right-radius: .85rem !important;
}

/* --- Tablas dentro de listados: encabezado con más carácter y hover legible --- */
.table thead th {
  background: #f4f7fb;
  color: #5b6673;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 700;
  border-bottom: 2px solid #e3e8ee;
  white-space: nowrap;
}
.table tbody tr { transition: background-color .1s ease; }
.table tbody tr:hover { background-color: #f4f8fd; }
.table td { color: #33404d; }
.table td.text-center.text-muted { padding: 1.75rem 1rem; font-style: italic; }

/* --- Formularios: selects/inputs más pulidos, con foco en verde acento --- */
.form-select, .form-control {
  border-radius: .55rem;
  border-color: #dde3ea;
}
.form-select:focus, .form-control:focus {
  border-color: var(--pos-accent);
  box-shadow: 0 0 0 .2rem rgba(45,106,79,.12);
}
.form-select-sm, .form-control-sm { border-radius: .5rem; }

/* Etiquetas pequeñas de los filtros (ej. "Desde", "Sucursales") -- las
   convierte en etiquetas tipo "panel de filtros avanzado" sin tocar cada
   plantilla, ya que todos los módulos ya usan <label class="small"> igual. */
label.small {
  font-weight: 700;
  color: #5b6673;
  text-transform: uppercase;
  font-size: .66rem;
  letter-spacing: .05em;
  margin-bottom: .2rem;
  display: inline-block;
}

/* Barra de filtros: el patrón <form class="row g-2 mb-3" method="get"> se
   usa en casi todos los reportes y listados con búsqueda -- se envuelve en
   un panel con degradado suave, borde y sombra para que se vea como un
   filtro avanzado en vez de campos sueltos sobre el fondo. */
form.row.g-2 {
  background: linear-gradient(180deg, #ffffff, #f7f9fc);
  border: 1px solid #e7ebf1;
  border-radius: .85rem;
  padding: .9rem 1.1rem .7rem;
  box-shadow: 0 2px 8px rgba(15,39,68,.05);
}

/* Alertas/mensajes: borde de color a la izquierda en vez del estilo plano de Bootstrap */
.alert { border: none; border-left: 4px solid; border-radius: .55rem; font-weight: 500; }
.alert-success { border-left-color: #1e8a54; background: #eafaf1; color: #1e6b40; }
.alert-danger { border-left-color: #c0392b; background: #fdecea; color: #a3291c; }
.alert-warning { border-left-color: #d9891a; background: #fff6e6; color: #8a5a0a; }
.alert-info { border-left-color: #17a2b8; background: #e8f7fa; color: #0f6674; }

/* Insignias de estado con un poco más de peso visual */
.badge { font-weight: 600; padding: .42em .68em; border-radius: .4rem; }

/* Títulos de cada módulo (patrón repetido: <h4 class="mb-0"> o <h4 class="mb-3">) */
h4.mb-0, h4.mb-3 { color: var(--pos-primary); font-weight: 700; letter-spacing: -.01em; }

/* Barra superior (reemplaza el menú lateral) */
.pos-navbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  background: linear-gradient(90deg, #0f2744, #1e3a5f);
  color: #fff;
  padding: .65rem 1.5rem;
  position: sticky;
  top: 0;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pos-navbar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}
.pos-navbar-logo {
  width: 34px;
  height: 34px;
  border-radius: .6rem;
  background: rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.pos-navbar-title {
  font-size: 1.05rem;
  font-weight: 400;
  color: #fff;
  white-space: nowrap;
}
.pos-navbar-title strong { font-weight: 700; color: #fff; }

.pos-navbar-search {
  flex-grow: 1;
  max-width: 480px;
  background: rgba(255,255,255,.12);
  border-radius: .6rem;
  padding: .4rem .8rem;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.75);
}
.pos-navbar-search input {
  background: transparent;
  border: none;
  outline: none;
  color: #fff;
  font-size: .88rem;
  width: 100%;
  flex: 1 1 auto;
  min-width: 0;
}
.pos-navbar-search input::placeholder { color: rgba(255,255,255,.6); }
.pos-navbar-search .pos-navbar-pill-btn { flex-shrink: 0; }

.pos-navbar-actions {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-left: auto;
  flex-shrink: 0;
}
.pos-navbar-sucursal {
  min-width: 160px;
}
.pos-navbar-icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 1rem;
  border: none;
  cursor: pointer;
}
.pos-navbar-icon-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
.pos-navbar-user {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: .3rem .8rem .3rem .3rem;
  font-size: .85rem;
}
.pos-navbar-user:hover { background: rgba(255,255,255,.2); }
.pos-navbar-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pos-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
}

.pos-main-content { max-width: 1400px; }

/* Cuadrícula de módulos (pantalla de inicio) */
.modulo-seccion-titulo {
  color: #6c7a89;
  text-transform: uppercase;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .04em;
  margin-bottom: .75rem;
}
.modulo-card {
  position: relative;
  display: block;
  border-radius: 1rem;
  padding: 1.25rem 1.25rem 1.5rem;
  min-height: 150px;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}
.modulo-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
  color: #fff;
}
.modulo-icono {
  font-size: 1.9rem;
  opacity: 1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
  margin-bottom: .6rem;
  display: block;
}
.modulo-nombre {
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
  margin-bottom: .25rem;
}
.modulo-desc {
  font-size: .78rem;
  opacity: 1;
  color: #fff;
  line-height: 1.3;
}
.modulo-flecha {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.28);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
}

/* Colores más vivos y saturados que antes, cada uno con un "glow" de sombra
   del mismo tono para que las tarjetas resalten sobre el fondo oscuro en
   vez de verse opacas/planas. */
.modulo-blue    { background: linear-gradient(135deg, #4c8dff, #1d4ed8); box-shadow: 0 6px 18px rgba(29,78,216,.45); }
.modulo-teal    { background: linear-gradient(135deg, #22d3ee, #0e7490); box-shadow: 0 6px 18px rgba(14,116,144,.45); }
.modulo-indigo  { background: linear-gradient(135deg, #818cf8, #4338ca); box-shadow: 0 6px 18px rgba(67,56,202,.45); }
.modulo-green   { background: linear-gradient(135deg, #34d399, #15803d); box-shadow: 0 6px 18px rgba(21,128,61,.45); }
.modulo-purple  { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 6px 18px rgba(124,58,237,.45); }
.modulo-violet  { background: linear-gradient(135deg, #e879f9, #a21caf); box-shadow: 0 6px 18px rgba(162,28,175,.45); }
.modulo-amber   { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 18px rgba(217,119,6,.45); }
.modulo-pink    { background: linear-gradient(135deg, #f472b6, #db2777); box-shadow: 0 6px 18px rgba(219,39,119,.45); }
.modulo-brown   { background: linear-gradient(135deg, #d2a06e, #92603a); box-shadow: 0 6px 18px rgba(146,96,58,.45); }
.modulo-gold    { background: linear-gradient(135deg, #fcd34d, #ca8a04); box-shadow: 0 6px 18px rgba(202,138,4,.45); }
.modulo-emerald { background: linear-gradient(135deg, #34d399, #047857); box-shadow: 0 6px 18px rgba(4,120,87,.45); }
.modulo-sky     { background: linear-gradient(135deg, #38bdf8, #0284c7); box-shadow: 0 6px 18px rgba(2,132,199,.45); }
.modulo-navy    { background: linear-gradient(135deg, #3b5998, #1e3a5f); box-shadow: 0 6px 18px rgba(30,58,95,.5); }
.modulo-steel   { background: linear-gradient(135deg, #8fa6bf, #475569); box-shadow: 0 6px 18px rgba(71,85,105,.45); }
.modulo-rose    { background: linear-gradient(135deg, #fb7185, #be123c); box-shadow: 0 6px 18px rgba(190,18,60,.45); }
.modulo-slate   { background: linear-gradient(135deg, #94a3b8, #475569); box-shadow: 0 6px 18px rgba(71,85,105,.4); }
.modulo-card:hover { filter: brightness(1.06); }

.card-kpi {
  border: none;
  border-radius: .75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.card-kpi .kpi-value {
  font-size: 1.6rem;
  font-weight: 700;
}
.table-sm td, .table-sm th { vertical-align: middle; }

/* POS */
.pos-screen { --pos-radius: .9rem; }

/* Botón "Suspendidos" inyectado en la barra superior general (reemplaza el
   buscador de módulos mientras se está en el punto de venta). */
.pos-navbar-pill-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  border: none;
  border-radius: .6rem;
  padding: .45rem .85rem;
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.pos-navbar-pill-btn:hover { background: rgba(255,255,255,.24); color: #fff; }
#badge-ventas-pendientes { background: rgba(255,193,7,.35); cursor: pointer; }
#badge-ventas-pendientes.pos-badge-alerta { background: rgba(220,53,69,.55); }

.pos-mensaje-flotante { min-height: 1.2rem; padding: 0 .1rem .4rem; }

#buscador-productos { font-size: 1rem; }

/* En el punto de venta, la página completa (navbar + contenido) se ajusta
   al alto exacto de la ventana con flexbox real, sin adivinar alturas en
   píxeles: nada se desborda ni obliga a hacer scroll para ver "Cobrar". */
@media (min-width: 992px) {
  body.pos-fullscreen-mode {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  body.pos-fullscreen-mode .pos-navbar {
    flex: 0 0 auto;
    position: static;
  }
  body.pos-fullscreen-mode .pos-main-content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 !important;
    margin: 0;
    max-width: none;
    display: flex;
    flex-direction: column;
  }
  body.pos-fullscreen-mode .pos-screen {
    flex: 1 1 auto;
    min-height: 0;
    margin-left: 0;
    margin-right: 0;
  }
  body.pos-fullscreen-mode .pos-col-izquierda { padding-left: 0; }
  body.pos-fullscreen-mode .pos-col-derecha { padding-right: 0; }
}

.pos-card {
  border: none;
  border-radius: var(--pos-radius);
  box-shadow: 0 2px 10px rgba(15,39,68,.06);
}

.text-pos-accent { color: var(--pos-accent); }

/* Encabezados discretos dentro de tarjetas POS */
.pos-card-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a95a3;
  margin-bottom: .35rem;
}

/* Selector de cliente y de sucursal integrados */
.pos-cliente-row {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.pos-cliente-row i { color: var(--pos-primary); font-size: 1.1rem; }
.pos-cliente-row select {
  border: 1px solid #e3e8ee;
  font-weight: 500;
  flex: 1 1 auto;
  min-width: 0;
}
.pos-cliente-row .dropdown { flex: 0 0 auto; }

/* Barra de búsqueda / escaneo con icono integrado */
.pos-scan-box {
  position: relative;
}
.pos-scan-box i {
  position: absolute;
  left: .9rem;
  top: 50%;
  transform: translateY(-50%);
  color: #9aa5b1;
  font-size: 1rem;
  pointer-events: none;
}
.pos-scan-box input {
  padding-left: 2.4rem;
  border: 1px solid #e3e8ee;
  border-radius: .65rem;
  background: #fbfcfe;
}
.pos-scan-box input:focus {
  border-color: var(--pos-accent);
  box-shadow: 0 0 0 .2rem rgba(45,106,79,.12);
  background: #fff;
}

/* --- Ticket de venta (lista de líneas, sin tabla) --- */
.pos-ticket-scroll {
  max-height: 320px;
  overflow-y: auto;
}
.pos-ticket-list { display: flex; flex-direction: column; }
.pos-ticket-empty {
  text-align: center;
  color: #9aa5b1;
  padding: 2.5rem 1rem;
  font-size: .9rem;
}
.pos-ticket-row {
  padding: .65rem .25rem;
  border-bottom: 1px solid #f0f2f5;
}
.pos-ticket-row:last-child { border-bottom: none; }
.pos-ticket-row-main {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .4rem;
}
.pos-ticket-row-name {
  font-weight: 600;
  font-size: .9rem;
  color: #22303f;
  line-height: 1.25;
}
.pos-ticket-row-del {
  border: none;
  background: transparent;
  color: #c7cdd5;
  font-size: .95rem;
  padding: 0 .1rem;
  flex-shrink: 0;
  transition: color .15s ease;
}
.pos-ticket-row-del:hover { color: #dc3545; }
.pos-ticket-row-controls {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.pos-qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid #e3e8ee;
  border-radius: .5rem;
  overflow: hidden;
  flex-shrink: 0;
}
.qty-btn {
  width: 26px;
  height: 26px;
  border: none;
  background: #f4f6f9;
  color: var(--pos-primary);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qty-btn:hover { background: #e7ecf1; }
.qty-input {
  width: 38px;
  height: 26px;
  border: none;
  border-left: 1px solid #e3e8ee;
  border-right: 1px solid #e3e8ee;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  padding: 0;
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.pos-ticket-row-unit-wrap {
  position: relative;
  flex-shrink: 0;
}
.pos-ticket-row-unit {
  font-size: .76rem;
  color: #8a95a3;
  flex-shrink: 0;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
}
.pos-ticket-row-unit.con-tarifas {
  cursor: pointer;
  color: var(--pos-primary);
  font-weight: 600;
}
.pos-ticket-row-unit.con-tarifas i {
  font-size: .68rem;
  margin-left: .1rem;
  color: var(--pos-accent);
}
.pos-tarifa-popover {
  position: absolute;
  z-index: 20;
  top: 100%;
  left: 0;
  margin-top: .3rem;
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(20,30,45,.15);
  min-width: 165px;
  overflow: hidden;
}
.pos-tarifa-popover.hacia-arriba {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: .3rem;
}
.pos-tarifa-opcion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  border: none;
  background: #fff;
  padding: .45rem .7rem;
  font-size: .8rem;
  color: #22303f;
  text-align: left;
  border-bottom: 1px solid #f0f2f5;
}
.pos-tarifa-opcion:last-child { border-bottom: none; }
.pos-tarifa-opcion:hover { background: #f4f6f9; }
.pos-tarifa-opcion.activa {
  background: #eef4ff;
  color: var(--pos-accent);
  font-weight: 700;
}
.pos-ticket-row-tarifa-tag {
  font-size: .68rem;
  font-weight: 700;
  color: #8a5a00;
  background: #fff3cd;
  border-radius: .35rem;
  padding: .05rem .35rem;
  vertical-align: middle;
}
.pos-ticket-row-desc { flex-shrink: 0; }
.pos-ticket-row-desc input {
  width: 68px;
  height: 26px;
  font-size: .76rem;
  border: 1px dashed #dde3ea;
  border-radius: .4rem;
  padding: 0 .4rem;
  color: #c0392b;
}
.pos-ticket-row-desc input::placeholder { color: #c7cdd5; }
.pos-ticket-row-subtotal {
  margin-left: auto;
  font-weight: 700;
  font-size: .92rem;
  color: var(--pos-primary);
}
.pos-ticket-row.seleccionada {
  background: #eef4ff;
  border-radius: .5rem;
  box-shadow: inset 0 0 0 1.5px var(--pos-accent);
}
.pos-ticket-row-desc-tag {
  font-size: .74rem;
  font-weight: 600;
  color: #c0392b;
  background: #fdeeec;
  border-radius: .35rem;
  padding: .05rem .4rem;
}

/* Resumen de totales, estilo plano (sin caja), como en Odoo */
.pos-totales-total-plano {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.pos-totales-total-plano span { font-weight: 600; color: #22303f; font-size: 1rem; }
.pos-totales-total-plano strong { font-size: 1.9rem; font-weight: 800; color: var(--pos-accent); }
.pos-totales-linea {
  display: flex;
  justify-content: space-between;
  font-size: .85rem;
  color: #5b6673;
  padding: .1rem 0;
}
.pos-totales-meta {
  font-size: .78rem;
  color: #9aa5b1;
  margin-top: .2rem;
}

.pos-divider-accent {
  height: 2px;
  background: var(--pos-accent);
  border-radius: 2px;
  margin: .5rem 0;
}

.pos-btn-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-bottom: .5rem;
}
.pos-btn-grid-2 .btn { width: 100%; padding: .4rem .6rem; font-size: .82rem; }

.pos-cliente-mini { margin-bottom: .5rem; }

/* Tabulador (numpad) del carrito, estilo Odoo: teclado a la izquierda y
   pestañas Cant./Desc. %/Desc. $/Precio apiladas a la derecha. Compacto para
   dejarle todo el espacio posible a la grilla de productos. */
.pos-numpad-odoo {
  display: flex;
  gap: .4rem;
}
.pos-numpad-tabs-vert {
  flex: 0 0 70px;
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.pos-numpad-modo {
  flex: 1 1 auto;
  border: 1px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: .5rem;
  padding: .35rem .2rem;
  font-size: .74rem;
  font-weight: 600;
}
.pos-numpad-modo:hover { background: #f4f6f9; }
.pos-numpad-modo.active {
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: #fff;
}
.pos-numpad-display {
  background: #f4f6f9;
  border-radius: .5rem;
  padding: .35rem .6rem;
  margin-bottom: .4rem;
  min-height: 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: .92rem;
  color: #22303f;
}
.pos-numpad {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: .3rem;
}
.pos-numpad-btn {
  border: 1px solid #e3e8ee;
  background: #fff;
  color: #22303f;
  border-radius: .45rem;
  font-size: .92rem;
  font-weight: 600;
  padding: .3rem 0;
  transition: background .12s ease, transform .08s ease;
}
.pos-numpad-btn:hover { background: #f4f6f9; }
.pos-numpad-btn:active { transform: scale(.96); background: #eef2f6; }
.pos-numpad-btn.pos-numpad-borrar { color: #c0392b; }

/* --- Pantalla completa de pagos (estilo Odoo) --- */
.pos-pago-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: #f4f6f9;
  display: flex;
  flex-direction: column;
}
.pos-pago-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.5rem;
  background: linear-gradient(90deg, #0f2744, #1e3a5f);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.pos-pago-titulo { font-size: 1.15rem; font-weight: 700; }
#mensaje-pago { min-height: 1.4rem; padding-top: .3rem; }

.pos-pago-body {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
  padding: 1.25rem;
  gap: .35rem;
}
.pos-pago-metodos {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  overflow-y: auto;
}
.pos-pago-metodo-btn {
  display: flex;
  align-items: center;
  gap: .9rem;
  text-align: left;
  border: 1.5px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: .7rem;
  padding: 1.5rem 1.4rem;
  font-weight: 700;
  font-size: 1.25rem;
  transition: transform .08s ease, box-shadow .12s ease;
}
.pos-pago-metodo-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.08); }
.pos-pago-metodo-btn i { font-size: 1.65rem; color: var(--pos-accent); }
/* Un color distinto por método de pago, para reconocerlos de un vistazo */
.pos-pago-metodo-efectivo { border-color: #bfe3c9; background: #eafaf0; }
.pos-pago-metodo-efectivo i { color: #1f9d55; }
.pos-pago-metodo-efectivo:hover { background: #ddf5e6; }
.pos-pago-metodo-tarjeta { border-color: #bcd4f7; background: #eaf2ff; }
.pos-pago-metodo-tarjeta i { color: #2f6fed; }
.pos-pago-metodo-tarjeta:hover { background: #dcebff; }
.pos-pago-metodo-transferencia { border-color: #d6c2f0; background: #f3ecfc; }
.pos-pago-metodo-transferencia i { color: #7c3aed; }
.pos-pago-metodo-transferencia:hover { background: #ead9fa; }
.pos-pago-metodo-saldo-favor { border-color: #f7dfa6; background: #fff8ea; }
.pos-pago-metodo-saldo-favor i { color: #d99b12; }
.pos-pago-metodo-saldo-favor:hover { background: #fdf0cd; }
.pos-pago-metodo-credito { border-color: #f5b8c4; background: #fdeef1; }
.pos-pago-metodo-credito i { color: #d6336c; }
.pos-pago-metodo-credito:hover { background: #fbdce3; }
.pos-pago-metodo-clip { border-color: #f8c9a3; background: #fef2e8; }
.pos-pago-metodo-clip i { color: #e8590c; }
.pos-pago-metodo-clip:hover { background: #fce3cc; }
.pos-pago-metodo-btn:disabled,
.pos-pago-metodo-btn.pos-pago-metodo-bloqueado {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Botón "cliente" del panel de cobro (abre el modal de selección) */
.pos-btn-cliente {
  display: flex;
  align-items: center;
  gap: .5rem;
  text-align: left;
  border: 1px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: .5rem;
  padding: .4rem .6rem;
  font-size: .85rem;
  font-weight: 600;
}
.pos-btn-cliente:hover { background: #eef2f6; }
.pos-btn-cliente i { color: var(--pos-accent); }
.pos-btn-cliente span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Modal de selección/alta de cliente */
.pos-cliente-lista { max-height: 260px; overflow-y: auto; }
.pos-cliente-item.active { border-color: #2f6fed; background: #eef4ff; }
.pos-pago-lineas {
  margin-top: .5rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.pos-pago-linea {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: #fff;
  border: 1.5px solid #e3e8ee;
  border-radius: .55rem;
  padding: .6rem .8rem;
  font-size: .88rem;
  cursor: pointer;
}
.pos-pago-linea span { color: #5b6673; }
.pos-pago-linea strong { margin-left: auto; color: #22303f; }
.pos-pago-linea.activa {
  border-color: #2f6fed;
  background: #eef4ff;
  box-shadow: 0 2px 8px rgba(47,111,237,.15);
}
.pago-fs-quitar {
  border: none;
  background: transparent;
  color: #c7cdd5;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0 0 .3rem;
}
.pago-fs-quitar:hover { color: #dc3545; }

.pos-pago-columna-centro {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  min-width: 0;
  overflow-y: auto;
}
.pos-pago-centro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-width: 0;
}
.pos-pago-monto-grande {
  font-size: 4.3rem;
  font-weight: 800;
  color: var(--pos-accent);
  line-height: 1;
}
.pos-pago-hint {
  color: #9aa5b1;
  margin-top: .6rem;
  font-size: 1.05rem;
}
.pos-pago-resumen-grande {
  display: flex;
  gap: 2.5rem;
  margin-top: 1.5rem;
}
.pos-pago-resumen-grande div {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pos-pago-resumen-grande span { font-size: .9rem; color: #9aa5b1; text-transform: uppercase; letter-spacing: .03em; }
.pos-pago-resumen-grande strong { font-size: 1.75rem; font-weight: 700; margin-top: .2rem; }

.pos-pago-numpad-wrap {
  width: 380px;
  max-width: 100%;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: .7rem;
}
.pos-pago-cliente {
  background: #fff;
  border: 1px solid #dde3ea;
  border-radius: .55rem;
  padding: .8rem 1rem;
  font-size: 1.08rem;
  color: var(--pos-primary);
  font-weight: 600;
}
.pos-pago-cliente i { color: var(--pos-accent); margin-right: .3rem; }
.pos-numpad-pago .pos-numpad-btn { padding: 1.3rem 0; font-size: 1.65rem; }
.pos-numpad-rapido {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
}
.pos-numpad-btn-quick {
  border: 1px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: .5rem;
  font-size: 1rem;
  font-weight: 600;
  padding: .75rem 0;
}
.pos-numpad-btn-quick:hover { background: #f4f6f9; }

@media (max-width: 900px) {
  .pos-pago-body { flex-direction: column; overflow-y: auto; }
  .pos-pago-metodos, .pos-pago-numpad-wrap { flex: 0 0 auto; }
}

/* Botón principal de cobro */
.btn-cobrar-pos {
  background: linear-gradient(135deg, #2f6fed, #1a4fc4);
  border: none;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  border-radius: .6rem;
  padding: .6rem 1rem;
  box-shadow: 0 4px 14px rgba(47,111,237,.35);
  transition: transform .1s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-cobrar-pos:hover:not(:disabled) {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(47,111,237,.45);
}
.btn-cobrar-pos:disabled { opacity: .45; box-shadow: none; }

.pos-btn-secundario {
  border: 1px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: .6rem;
  font-weight: 500;
  font-size: .85rem;
}
.pos-btn-secundario:hover { background: #f4f6f9; color: var(--pos-primary); }

.pos-btn-limpiar {
  border: none;
  background: #e5533d;
  color: #fff;
  border-radius: .6rem;
  font-weight: 600;
  font-size: .85rem;
}
.pos-btn-limpiar:hover { background: #cf4530; color: #fff; }

.pos-btn-suspender {
  border: none;
  background: #f2a93c;
  color: #4a2f05;
  border-radius: .6rem;
  font-weight: 600;
  font-size: .85rem;
}
.pos-btn-suspender:hover { background: #d99326; color: #4a2f05; }

/* Franja inferior con datos de la sesión de caja */
.pos-footer-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  font-size: .76rem;
  color: #8a95a3;
  padding: .55rem .9rem;
  background: #fff;
  border-radius: .6rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.pos-footer-strip span strong { color: #5b6673; font-weight: 600; }
.pos-footer-strip i { color: var(--pos-accent); margin-right: .25rem; }

/* Columna izquierda fija: el ticket se desplaza internamente, la zona de
   cobro (totales, botones, cliente y tabulador) permanece siempre visible,
   como un único panel plano (estilo Odoo). */
@media (min-width: 992px) {
  .pos-col-izquierda,
  .pos-col-derecha {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: .9rem;
    box-shadow: 0 2px 10px rgba(15,39,68,.06);
    overflow: hidden;
  }
  .pos-fijo { flex: 0 0 auto; }
  .pos-ticket-card {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem .3rem;
  }
  .pos-ticket-scroll {
    flex: 1 1 auto;
    max-height: none;
    overflow-y: auto;
  }
  .pos-cobro-fijo {
    padding: .6rem .8rem .7rem;
    border-top: 1px solid #eef0f3;
  }

  .pos-col-derecha .pos-cat-tabs {
    flex: 0 0 auto;
    margin: 0;
    padding: .9rem 1rem 0;
  }
  .pos-col-derecha .pos-product-grid-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding: .9rem 1rem 1rem;
  }
}

/* Pestañas de categoría */
.pos-cat-tabs {
  display: flex;
  gap: .4rem;
  overflow-x: auto;
  padding-bottom: .6rem;
  margin-bottom: .6rem;
  border-bottom: 1px solid #eef0f3;
  scrollbar-width: thin;
}
.pos-cat-tab {
  flex: 0 0 auto;
  border: 1px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pos-cat-tab:hover { background: #eef2f6; }
.pos-cat-tab.active {
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30,58,95,.25);
}

/* Pestañas del módulo de contabilidad */
.acc-nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding-bottom: .8rem;
  margin-bottom: .2rem;
  border-bottom: 1px solid #eef0f3;
}
.acc-nav-tab {
  flex: 0 0 auto;
  border: 1px solid #dde3ea;
  background: #fff;
  color: var(--pos-primary);
  border-radius: 999px;
  padding: .4rem 1rem;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.acc-nav-tab:hover { background: #eef2f6; color: var(--pos-primary); }
.acc-nav-tab.active {
  background: var(--pos-primary);
  border-color: var(--pos-primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(30,58,95,.25);
}

/* Grilla de productos */
.pos-product-grid-wrap {
  max-height: calc(100vh - 330px);
  min-height: 320px;
  overflow-y: auto;
}
.pos-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .65rem;
}
.pos-product-card {
  background: #fff;
  border: 1px solid #eef0f3;
  border-radius: .75rem;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  transition: transform .1s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
}
.pos-product-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,.10);
  border-color: var(--pos-accent);
  transform: translateY(-2px);
}
.pos-product-card:active {
  transform: translateY(0) scale(.98);
}
.pos-product-img {
  height: 92px;
  background: #f4f6f9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b7c1cc;
  font-size: 1.9rem;
  overflow: hidden;
}
.pos-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pos-product-info {
  padding: .5rem .6rem .6rem;
}
.pos-product-name {
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.2;
  height: 2.3em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: .3rem;
}
.pos-product-price {
  font-weight: 700;
  color: var(--pos-accent);
  font-size: .95rem;
}
.pos-product-tarifa-tag {
  font-size: .62rem;
  font-weight: 700;
  color: #8a5a00;
  background: #fff3cd;
  border-radius: .35rem;
  padding: .05rem .3rem;
}
.pos-product-tarifa-tag:empty { display: none; }
.pos-product-stock {
  font-size: .7rem;
}

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .ticket-58mm { width: 58mm; font-size: 10px; }
  .ticket-80mm { width: 80mm; font-size: 11px; }
  /* En tickets/cortes impresos, sin fondos de color ni mayúsculas raras en los encabezados de tabla */
  .table thead th { background: none !important; text-transform: none !important; letter-spacing: normal !important; }
  .card, form.row.g-2 { box-shadow: none !important; }
}