/* Estilos propios. Colores en variables para cambiarlos fácil. */
:root {
  --fx-menu: #12263F;
  --fx-menu-activo: #1D3A5C;
  --fx-menu-texto: #DCE3EE;
  --fx-menu-titulo: #8DA0BB;
  --fx-acento: #1F8A7E;
  --fx-acento-oscuro: #0F5E57;
  --fx-fondo: #F4F5F7;
  --fx-borde: #E2E6EC;
  --bs-body-font-family: "IBM Plex Sans", system-ui, sans-serif;
  --bs-primary: #1F8A7E;
  --bs-primary-rgb: 31, 138, 126;
  --bs-link-color: #0F5E57;
  --bs-link-color-rgb: 15, 94, 87;
}
/* ------------------------------------------------------------------ */
/* Escala de la interfaz: todo está medido en rem, así que basta con     */
/* cambiar el tamaño de letra raíz para que la pantalla entera se ajuste  */
/* (como el zoom del navegador, pero automático según la pantalla).      */
/* ------------------------------------------------------------------ */
:root { --fx-base: 16px; --fx-pref: 1; }
@media (max-width: 1680px), (max-height: 900px) { :root { --fx-base: 15px; } }
@media (max-width: 1500px), (max-height: 800px) { :root { --fx-base: 14px; } }
@media (max-width: 1380px), (max-height: 700px) { :root { --fx-base: 13px; } }
@media (max-width: 900px) { :root { --fx-base: 15px; } }      /* celulares y tablets: letra cómoda para el dedo */
:root[data-tam="chico"] { --fx-pref: .9; }
:root[data-tam="grande"] { --fx-pref: 1.12; }
html { font-size: calc(var(--fx-base) * var(--fx-pref)); }

body { background: var(--fx-fondo); color: #172033; }
.mono { font-family: "IBM Plex Mono", monospace; overflow-wrap: anywhere; }   /* claves de 49 dígitos no se salen */
td.mono, th.mono, .table .mono { overflow-wrap: normal; }

.btn-primary { --bs-btn-bg: var(--fx-acento); --bs-btn-border-color: var(--fx-acento);
  --bs-btn-hover-bg: var(--fx-acento-oscuro); --bs-btn-hover-border-color: var(--fx-acento-oscuro);
  --bs-btn-active-bg: var(--fx-acento-oscuro); }

/* Barra superior */
.fx-top { position: sticky; top: 0; z-index: 1030; background: var(--fx-menu); color: #fff;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding: 0.625rem 1.5rem; min-height: 3.75rem; }
.fx-marca { display: flex; align-items: center; gap: 0.625rem; color: #fff; text-decoration: none; font-weight: 700; }
.fx-marca:hover { color: #fff; }
.fx-logo { width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; background: var(--fx-acento); display: grid; place-items: center;
  font-size: 0.8125rem; font-weight: 800; letter-spacing: .02em; }
.fx-marca-texto { max-width: 12.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fx-btn-top { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.375rem; padding: 0 0.75rem; border-radius: 0.5625rem;
  background: var(--fx-menu-activo); border: 0; color: #fff; text-decoration: none; font-weight: 500; }
.fx-btn-top:hover, .fx-btn-top:focus-visible { background: #27507D; color: #fff; }
.fx-btn-top:focus-visible, .fx-tile:focus-visible, .fx-sub a:focus-visible { outline: 2px solid #8FD3C9; outline-offset: 2px; }
.fx-solo-icono { width: 2.375rem; justify-content: center; padding: 0; font-size: 1.0625rem; }
.fx-ruta { display: flex; align-items: center; gap: 0.5rem; color: var(--fx-menu-texto); font-size: 0.875rem; min-width: 0; }
.fx-ruta a { color: var(--fx-menu-texto); text-decoration: none; }
.fx-ruta a:hover { color: #fff; text-decoration: underline; }
.fx-ruta i { font-size: 0.6875rem; color: var(--fx-menu-titulo); }
.fx-ruta span { color: #fff; font-weight: 600; white-space: nowrap; }
.fx-buscar { flex: 1 1 13.75rem; max-width: 26.25rem; margin-left: auto; position: relative; }
.fx-buscar i { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--fx-menu-titulo); }
.fx-buscar input { width: 100%; height: 2.375rem; border-radius: 0.5625rem; border: 1px solid #2A4A70; background: var(--fx-menu-activo);
  color: #fff; padding: 0 0.75rem 0 2.25rem; }
.fx-buscar input::placeholder { color: #9FB0C8; }
.fx-buscar input:focus { outline: 2px solid #8FD3C9; outline-offset: 1px; background: #fff; color: #172033; }
.fx-acciones { display: flex; align-items: center; gap: 0.5rem; }
.fx-amb { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 0.25rem 0.625rem; border-radius: 1.25rem; }
.fx-amb-pruebas { background: #FFC93C; color: #172033; }
.fx-amb-prod { background: #1E8E4E; color: #fff; }

/* Pestañas del módulo actual */
.fx-sub { position: sticky; top: 3.75rem; z-index: 1020; background: #fff; border-bottom: 1px solid var(--fx-borde);
  display: flex; align-items: center; gap: 0.25rem; padding: 0.5rem 1.5rem; overflow-x: auto; scrollbar-width: thin; }
.fx-sub-mod { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; margin-right: 0.75rem; white-space: nowrap; }
.fx-sub a { padding: 0.4375rem 0.75rem; border-radius: 0.5rem; color: #3B465C; text-decoration: none; white-space: nowrap; font-size: 0.875rem; }
.fx-sub a:hover { background: #F1F3F6; color: #172033; }
.fx-sub a.activo { background: color-mix(in srgb, var(--fx-mod) 12%, #fff); color: var(--fx-mod); font-weight: 600; }

.fx-main { padding: 1.75rem 1.5rem 3rem; max-width: max(80rem, 1280px); width: 100%; min-width: 0; margin: 0 auto; }
.table-responsive { max-width: 100%; position: relative; }
/* Los textos ocultos para lectores de pantalla (.visually-hidden) dentro de tablas con scroll
   no deben ensanchar la página en el celular */
.fx-main { position: relative; overflow-x: clip; }
.fx-main.fx-embebido { padding: 0.75rem 1rem 1.5rem; max-width: none; }

/* Cuadros de módulos */
.fx-modulos { border: 0; border-radius: 1.125rem; padding: 1.5rem; }
.fx-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(14.375rem, 1fr)); gap: 0.875rem; }
.fx-tile { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; border: 1px solid #E8EBEF; border-radius: 0.875rem;
  color: #172033; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.fx-tile:hover { border-color: #C9D2DC; box-shadow: 0 0.375rem 1.125rem rgba(18, 38, 63, .08); transform: translateY(-1px); color: #172033; }
.fx-tile.activo { border-color: var(--fx-acento); box-shadow: 0 0 0 1px var(--fx-acento); }
.fx-tile b { display: block; font-size: 0.9375rem; }
.fx-tile small { display: block; color: #6B7486; font-size: 0.7812rem; line-height: 1.35; }
.fx-ic { width: 2.75rem; height: 2.75rem; flex: none; border-radius: 0.75rem; display: grid; place-items: center; color: #fff; font-size: 1.25rem; }
.fx-ic-sm { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) { .fx-tile { transition: none; } .fx-tile:hover { transform: none; } }

@media (max-width: 900px) {
  .fx-top { padding: 0.625rem 1rem; }
  .fx-ruta { display: none; }
  .fx-buscar { order: 9; flex-basis: 100%; max-width: none; }
  .fx-btn-top span { display: none; }
  .fx-marca-texto { max-width: 8.75rem; }
  .fx-acciones { margin-left: auto; }
  .fx-sub { top: 0; position: static; padding: 0.5rem 1rem; }
  .fx-main { padding: 1rem; }
}

.tarjeta { background: #fff; border: 1px solid var(--fx-borde); border-radius: 0.875rem; padding: 1.25rem; }
.kpi .etiqueta { font-size: 0.8125rem; color: #5A6578; }
.kpi .valor { font-family: "IBM Plex Mono", monospace; font-size: 1.625rem; font-weight: 600; }
.badge-estado { font-weight: 600; }
.table > :not(caption) > * > * { padding: .6rem .5rem; }

/* Factura nueva */
.resultados { position: absolute; z-index: 20; left: 0; right: 0; max-height: 20rem; overflow-y: auto; }
.linea input { min-width: 4.375rem; }
.totales td { padding: .35rem .5rem; }

@media (max-width: 520px) {
  .fx-marca-texto, .fx-amb { display: none; }
  .fx-top { gap: 0.5rem; }
}

/* Paneles que siguen al bajar (debajo de la barra y las pestañas) */
.fx-pegado { top: 8rem; }
@media (max-width: 900px) { .fx-pegado { top: 4.75rem; } }

/* ------------------------------------------------------------------ */
/* Punto de venta                                                      */
/* ------------------------------------------------------------------ */
.fx-main.fx-ancho { max-width: none; padding: 1rem 1.25rem 1.5rem; }
.pos { display: grid; grid-template-columns: minmax(0, 1fr) 25rem; gap: 0.75rem; align-items: start; }
.pos-izq { display: grid; gap: 0.75rem; min-width: 0; }
.pos-der { display: grid; gap: 0.75rem; position: sticky; top: 7.75rem; max-height: calc(100vh - 12.5rem); overflow-y: auto; scrollbar-width: thin; }
.pos-teclas { grid-column: 1 / -1; }
.pos .tarjeta { padding: 0.875rem 1rem; border-radius: 0.75rem; }
.pos label, .pos legend, .pos dt { font-size: 0.75rem; font-weight: 600; color: #5A6578; margin-bottom: 0.1875rem; }
.pos legend { float: none; width: auto; padding: 0; }
.pos kbd { font-size: 0.6562rem; padding: 1px 0.3125rem; background: #EEF1F5; color: #3B465C; border: 1px solid #D5DBE3; box-shadow: none; }

.pos-cab { padding: 0 !important; }
.pos-cab-izq { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 1.75rem; padding: 0.625rem 1rem; }
.pos-condicion .btn { font-weight: 700; min-width: 7rem; padding: 0.625rem 1rem; }
.pos-datos { display: flex; flex-wrap: wrap; gap: 0.5rem 1.75rem; margin: 0; }
.pos-datos dd { margin: 0; font-weight: 600; font-size: 0.9375rem; }
.pos .pos-total { background: var(--fx-menu); border-color: var(--fx-menu); color: #fff; padding: 0.625rem 1.25rem; display: flex; flex-direction: column; justify-content: center; text-align: right; }
.pos-total-etq { font-size: 0.7188rem; letter-spacing: .1em; color: #9FB0C8; font-weight: 600; }
.pos-total-valor { font-size: clamp(2.375rem, 4vw, 3.625rem); font-weight: 600; line-height: 1.05; color: #7DE2D1; }
.pos-total-pie { font-size: 0.7812rem; color: #B9C6D8; }

.pos-cliente { display: grid; grid-template-columns: 15.625rem minmax(12.5rem, 1fr) 10.625rem auto; gap: 0.625rem 0.75rem; align-items: end; padding: 0.625rem 1rem !important; }
.pos-extra, .pos-crear { display: none; }
.pos-cliente.creando .pos-extra, .pos-cliente.creando .pos-crear:not([hidden]) { display: block; }
.pos-cliente.creando { grid-template-columns: 15.625rem 1fr 1fr 1fr; }
.pos-crear { grid-column: span 1; }
.pos-listas .btn { min-width: 2.125rem; font-weight: 700; }
.pos-aviso { grid-column: 1 / -1; margin-top: -0.25rem; color: #5A6578; }
.pos-aviso:empty { display: none; }

.pos-ingreso { padding: 0.625rem 1rem !important; display: grid; grid-template-columns: 6.875rem minmax(20rem, 1fr) auto; gap: 0.75rem; align-items: end; }
.pos-codigo { position: relative; }
.pos-codigo .form-control-lg { font-size: 1.125rem; border-width: 2px; border-color: var(--fx-acento); }
.pos-sugerencias { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: 21.25rem; overflow-y: auto; margin-top: 0.25rem; }
.pos-sugerencias .list-group-item { cursor: pointer; }
.pos-sugerencias .active { background: #E7F3F1; color: #0F5E57; border-color: #CFE8E3; }
.pos-info { display: flex; gap: 0.375rem 1.375rem; margin: 0; padding: 0.5rem 0.875rem; background: #F6F8FA; border: 1px solid var(--fx-borde); border-radius: 0.625rem; }
.pos-info dd { margin: 0; font-family: "IBM Plex Mono", monospace; font-weight: 600; white-space: nowrap; }

.pos-grilla { padding: 0 !important; overflow: hidden; }
.pos-grilla .table-responsive { min-height: 12.5rem; height: calc(100vh - 31.25rem); max-height: 62vh; overflow-y: auto; }
.pos-grilla thead th { position: sticky; top: 0; z-index: 1; background: #EEF1F5; font-size: 0.75rem; color: #3B465C; padding: 0.5625rem 0.5rem; border-bottom: 1px solid #D5DBE3; white-space: nowrap; }
.pos-grilla td { padding: 0.3125rem 0.5rem; }
.pos-grilla tbody tr:nth-child(even):not(.pos-sel) td { background: #FAFBFC; }
.pos-grilla tr.pos-sel td { background: #E7F3F1; }
.pos-grilla tr.pos-sel td:first-child { box-shadow: inset 0.25rem 0 0 var(--fx-acento); }
.pos-grilla input.form-control-sm { display: inline-block; padding: 0.1875rem 0.375rem; }
.pos-vacio td { color: #8A93A3; text-align: center; padding: 3rem 0.5rem !important; background: #fff !important; }

.pos-notas { padding: 0.625rem 1rem !important; }
.pos-totales { padding: 0.625rem 1rem !important; }
.pos-totales th { font-weight: 500; color: #5A6578; padding: 2px 0; font-size: 0.8438rem; }
.pos-totales td { text-align: right; padding: 2px 0; }
.pos-totales-total { display: none; }
.pos-totales-total th, .pos-totales-total td { font-size: 1rem; font-weight: 700; color: #172033; border-top: 1px solid var(--fx-borde); padding-top: 0.5rem; }
.pos-formas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; margin-bottom: 0.5rem; }
.pos-formas button { display: flex; flex-direction: column; align-items: center; gap: 0.1875rem; padding: 0.5rem 2px; border: 1px solid var(--fx-borde); border-radius: 0.625rem;
  background: #fff; font-size: 0.75rem; font-weight: 600; color: #253049; }
.pos-formas button i { font-size: 1.25rem; color: var(--fx-acento); }
.pos-formas button[data-forma="CREDITO"] i { color: #C2410C; }
.pos-formas button:hover { border-color: var(--fx-acento); background: #F2FAF8; }
.pos-formas button:focus-visible, .pos-teclas button:focus-visible { outline: 2px solid var(--fx-acento); outline-offset: 2px; }
.pos-tabla-pagos th { font-size: 0.75rem; color: #5A6578; }
.pos-tabla-pagos .pos-vacio td { padding: 0.625rem 0.5rem !important; font-size: 0.7812rem; }
.pos-plazo { display: flex; align-items: center; gap: 0.625rem; margin-bottom: 0.625rem; }
.pos-plazo label { margin: 0; } .pos-plazo input { width: 5.625rem; }
.pos-cuadre { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pos-cuadre div { background: #F6F8FA; border-radius: 0.625rem; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; }
.pos-cuadre span { font-size: 0.75rem; color: #5A6578; font-weight: 600; }
.pos-cuadre b { font-size: 1.125rem; text-align: right; }
.pos-cuadre div { padding: 0.375rem 0.625rem !important; }
.pos-dif[data-estado="falta"] { background: #FDECEC !important; } .pos-dif[data-estado="falta"] b { color: #B42318; }
.pos-dif[data-estado="vuelto"] { background: #E5F4E4 !important; } .pos-dif[data-estado="vuelto"] b { color: #11703A; }

.pos-teclas { position: sticky; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(7, 1fr) 1.6fr; gap: 0.5rem;
  padding: 0.625rem; background: #fff; border: 1px solid var(--fx-borde); border-radius: 0.75rem; box-shadow: 0 -0.25rem 1rem rgba(18,38,63,.06); }
.pos-teclas button, .pos-teclas a { text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; border: 1px solid var(--fx-borde);
  border-radius: 0.5625rem; background: #F6F8FA; font-weight: 600; color: #253049; font-size: 0.8438rem; }
.pos-teclas button:hover, .pos-teclas a:hover { background: #EEF1F5; color: #253049; }
.pos-teclas i { font-size: 1rem; }
.pos-teclas .pos-tecla-limpiar { color: #B42318; }
.pos-teclas .pos-tecla-grabar { background: var(--fx-acento); border-color: var(--fx-acento); color: #fff; font-size: 0.9375rem; }
.pos-teclas .pos-tecla-grabar:hover { background: var(--fx-acento-oscuro); }
.pos-teclas .pos-tecla-grabar kbd { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.pos-teclas .pos-tecla-grabar:disabled { opacity: .6; }

@media (max-width: 1400px) {
  .pos { grid-template-columns: minmax(0, 1fr) 22.5rem; }
  .pos-cliente { grid-template-columns: 13.125rem minmax(10rem, 1fr) 9.375rem auto; }
  .pos-cliente.creando { grid-template-columns: 13.125rem 1fr 1fr; }
  .pos-info-precios { display: none; }
}
@media (max-width: 1100px) {
  .pos { grid-template-columns: 1fr; }
  .pos-der { position: static; grid-template-columns: 1fr 1fr; }
  .pos-der .pos-pagos { grid-column: 1 / -1; }
  .pos-grilla .table-responsive { height: auto; }
}
@media (max-width: 900px) {
  .pos-ingreso, .pos-cliente, .pos-der { grid-template-columns: 1fr; }
  .pos-nombre { grid-column: auto; }
  .pos-info { flex-wrap: wrap; }
  .pos-teclas { grid-template-columns: repeat(4, 1fr); }
  .pos-teclas .pos-tecla-grabar { grid-column: span 4; }
  .pos-formas { grid-template-columns: repeat(3, 1fr); }
}

/* Pie con el desarrollador */
.fx-pie { text-align: center; font-size: 0.75rem; color: #8A93A3; padding: 1rem 1.5rem 1.25rem; }
.fx-pie strong { color: #5A6578; font-weight: 600; }
.fx-pie-login { color: #9FB0C8; padding-top: 0.5rem; }
.fx-pie-login strong { color: #DCE3EE; }
body { display: flex; flex-direction: column; min-height: 100vh; }
body > .fx-main { flex: 1 0 auto; }

/* POS: total grande abajo, junto al cobro y al botón Grabar */
.pos-der { display: flex; flex-direction: column; height: calc(100vh - 13.75rem); max-height: none; }
.pos-der > .tarjeta { flex: none; }
.pos .pos-cierre { margin-top: auto; background: var(--fx-menu); border-color: var(--fx-menu); color: #fff; padding: 0.75rem 1.125rem; }
.pos-cierre-total { text-align: right; }
.pos-cierre .pos-cuadre { grid-template-columns: 1fr 1fr; margin-top: 0.625rem; }
.pos-cierre .pos-cuadre div { background: #1D3A5C; }
.pos-cierre .pos-cuadre span { color: #B9C6D8; }
.pos-cierre .pos-cuadre b { color: #fff; }
.pos-cierre .pos-dif[data-estado="falta"] { background: #7A1F1F !important; }
.pos-cierre .pos-dif[data-estado="falta"] b { color: #FFD7D7; }
.pos-cierre .pos-dif[data-estado="vuelto"] { background: #145C3A !important; }
.pos-cierre .pos-dif[data-estado="vuelto"] b { color: #B6F2CF; font-size: 1.375rem; }
@media (max-width: 1100px) { .pos-der { height: auto; } .pos .pos-cierre { grid-column: 1 / -1; } }
.pos-der { overflow: hidden; }
.pos-der > .pos-pagos { flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
@media (max-height: 820px) {
  .pos .pos-cierre { padding: 0.5rem 0.875rem; }
  .pos-cierre .pos-total-valor { font-size: 2.5rem; }
  .pos-cierre .pos-total-pie { display: none; }
  .pos-cierre .pos-cuadre { margin-top: 0.375rem; }
  .pos-totales th, .pos-totales td { font-size: 0.7812rem; padding: 1px 0; }
  .pos-formas button { padding: 0.3125rem 2px; }
  .pos-formas button i { font-size: 1.0625rem; }
}
@media (max-width: 1100px) { .pos-der { overflow: visible; } .pos-der > .pos-pagos { overflow: visible; } }

/* Accesos rápidos en la ventana de módulos */
.fx-rapidos { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fx-borde); }
.fx-rapidos a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 62.4375rem; background: #E7F3F1;
  color: #0F5E57; font-weight: 600; text-decoration: none; font-size: 0.875rem; }
.fx-rapidos a:hover { background: #D3ECE7; color: #0F5E57; }
.fx-rapidos a:focus-visible { outline: 2px solid var(--fx-acento); outline-offset: 2px; }

/* ------------------------------------------------------------------ */
/* POS a pantalla completa: todo cabe en la ventana, sin scroll de página */
/* Solo la lista de productos y la de pagos se desplazan por dentro.      */
/* ------------------------------------------------------------------ */
body:has(.fx-ancho) .fx-pie { display: none; }
/* La altura de las barras de arriba la mide base.html (--fx-arriba). Si la pantalla es baja y no cabe todo,
   la zona se desplaza por dentro en lugar de cortar el contenido. */
.fx-main.fx-ancho { height: calc(100vh - var(--fx-arriba, 7.125rem)); height: calc(100dvh - var(--fx-arriba, 7.125rem));
  padding: 0.75rem 1rem; display: flex; flex-direction: column; overflow-x: hidden; overflow-y: auto; }
.fx-ancho .pos-grilla { min-height: 11rem; }
/* Líneas de compras y facturas: siempre se ven al menos ~8 filas; si la pantalla es baja, la página baja */
.fx-ancho .vf-grilla { min-height: max(24rem, 52vh); }
.fx-main.fx-ancho > .alert { flex: none; margin-bottom: 0.5rem; padding: 0.375rem 0.75rem; }
.fx-ancho .pos { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; align-items: stretch; gap: 0.625rem; }
.fx-ancho .pos-izq { min-height: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.fx-ancho .pos-izq > .tarjeta { flex: none; }
.fx-ancho .pos-grilla { flex: 1 1 auto !important; min-height: 0; display: flex; flex-direction: column; }
.fx-ancho .pos-grilla .table-responsive { flex: 1 1 auto; height: auto; min-height: 0; max-height: none; }
.fx-ancho .pos-der { position: static; height: auto; max-height: none; min-height: 0; overflow: hidden; gap: 0.625rem; }
.fx-ancho .pos-der > .pos-pagos { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.fx-ancho .pos .pos-cierre { flex: none; margin-top: 0; }
.fx-ancho .pos-teclas { position: static; box-shadow: none; padding: 0.5rem; }
.fx-ancho .pos-teclas button, .fx-ancho .pos-teclas a { min-height: 2.625rem; }
.fx-ancho .pos-vacio td { padding: 1.75rem 0.5rem !important; }

/* Pantallas muy bajas o angostas: vuelve al modo normal con scroll */
@media (max-height: 520px), (max-width: 1100px) {
  .fx-main.fx-ancho { height: auto; overflow: visible; }
  .fx-ancho .pos { grid-template-rows: auto; }
  .fx-ancho .pos-grilla .table-responsive { min-height: 13.75rem; }
  .fx-ancho .pos-der > .pos-pagos { overflow: visible; }
  .fx-ancho .pos-teclas { position: sticky; bottom: 0; }
  body:has(.fx-ancho) .fx-pie { display: block; }
}

.fx-caja-cajero > form:first-child { flex: 0 1 23.75rem; }
.fx-caja-cajero > form:last-child { flex: 0 1 35rem; }

/* ------------------------------------------------------------------ */
/* Ventana de cobro                                                    */
/* ------------------------------------------------------------------ */
.cobro { border: 0; border-radius: 1rem; overflow: hidden; }
.cobro kbd { font-size: 0.6562rem; padding: 1px 0.3125rem; background: rgba(0,0,0,.08); color: inherit; box-shadow: none; }
.cobro .btn-primary kbd { background: rgba(255,255,255,.22); }
.cobro-cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.375rem; background: var(--fx-menu); color: #fff; }
.cobro-cliente { color: #B9C6D8; }
.cobro-etq { font-size: 0.7188rem; letter-spacing: .1em; color: #9FB0C8; font-weight: 600; }
.cobro-total { font-size: 2.875rem; font-weight: 600; line-height: 1; color: #7DE2D1; }
.cobro-cuerpo { display: grid; grid-template-columns: 13.125rem 1fr; min-height: 20.625rem; }
.cobro-formas { display: flex; flex-direction: column; gap: 0.375rem; padding: 1rem; background: #F6F8FA; border-right: 1px solid var(--fx-borde); }
.cobro-formas button { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 0.875rem; border: 1px solid transparent; border-radius: 0.625rem;
  background: transparent; font-weight: 600; color: #253049; text-align: left; }
.cobro-formas button i { font-size: 1.25rem; color: var(--fx-acento); }
.cobro-formas button[data-forma="CREDITO"] i { color: #C2410C; }
.cobro-formas button:hover { background: #fff; border-color: var(--fx-borde); }
.cobro-formas button.activo { background: #fff; border-color: var(--fx-acento); box-shadow: 0 0 0 1px var(--fx-acento); }
.cobro-formas button:focus-visible, .cobro-billetes button:focus-visible { outline: 2px solid var(--fx-acento); outline-offset: 2px; }
.cobro-editor { padding: 1.125rem 1.375rem; }
.cobro-label { font-size: 0.7812rem; font-weight: 600; color: #5A6578; margin-bottom: 0.25rem; display: block; }
.cobro-input-xl { font-size: 2.5rem; font-weight: 600; height: 4.5rem; border-width: 2px; border-color: var(--fx-acento); }
.cobro-billetes { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 1rem; }
.cobro-billetes button { padding: 0.5rem 1rem; border: 1px solid var(--fx-borde); border-radius: 62.4375rem; background: #fff; font-weight: 600; font-family: "IBM Plex Mono", monospace; }
.cobro-billetes button:hover { border-color: var(--fx-acento); background: #F2FAF8; }
.cobro-cambio { display: flex; justify-content: space-between; align-items: center; background: #E5F4E4; border-radius: 0.75rem; padding: 0.75rem 1.125rem; }
.cobro-cambio span { font-weight: 600; color: #11703A; }
.cobro-cambio b { font-size: 2.375rem; color: #11703A; }
.cobro-error { min-height: 1.4em; margin-top: 0.625rem; color: #B42318; font-weight: 600; }
.cobro-pie { border-top: 1px solid var(--fx-borde); padding: 0.875rem 1.375rem; background: #fff; }
.cobro-lista { margin-bottom: 0.625rem !important; }
.cobro-lista th { font-size: 0.75rem; color: #5A6578; }
.cobro-resumen { display: grid; grid-template-columns: repeat(3, minmax(6.875rem, 10rem)) 1fr; gap: 0.625rem; align-items: stretch; }
.cobro-resumen > div:not(.cobro-acciones) { background: #F6F8FA; border-radius: 0.625rem; padding: 0.5rem 0.75rem; display: flex; flex-direction: column; }
.cobro-resumen span { font-size: 0.75rem; font-weight: 600; color: #5A6578; }
.cobro-resumen b { font-size: 1.375rem; text-align: right; }
.cobro-dif[data-estado="falta"] { background: #FDECEC !important; } .cobro-dif[data-estado="falta"] b { color: #B42318; }
.cobro-dif[data-estado="cambio"] { background: #E5F4E4 !important; } .cobro-dif[data-estado="cambio"] b { color: #11703A; }
.cobro-acciones { display: flex; justify-content: flex-end; align-items: center; gap: 0.625rem; }
@media (max-width: 760px) {
  .cobro-cuerpo { grid-template-columns: 1fr; }
  .cobro-formas { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--fx-borde); }
  .cobro-formas button span { white-space: nowrap; }
  .cobro-resumen { grid-template-columns: repeat(3, 1fr); }
  .cobro-acciones { grid-column: 1 / -1; }
  .cobro-total { font-size: 2.125rem; }
}
/* Columna derecha del POS: el resumen ocupa el espacio libre */
.fx-ancho .pos-der > .pos-totales { flex: 1 1 auto; }
.pos-totales th, .pos-totales td { font-size: 0.9375rem !important; padding: 0.375rem 0 !important; }

/* POS: ficha del producto y última venta (columna derecha) */
.fx-ancho .pos-der > .pos-totales { flex: none; }
.fx-ancho .pos-der > .pos-ficha { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.pos-ficha-etq { font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A93A3; margin-bottom: 0.375rem; }
.pos-ficha-vacia { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; text-align: center;
  color: #8A93A3; font-size: 0.8125rem; height: calc(100% - 1.25rem); min-height: 5.625rem; }
.pos-ficha-vacia i { font-size: 1.875rem; color: #C2CAD5; }
.pos-ficha-nombre { font-size: 1.0625rem; font-weight: 700; line-height: 1.25; }
.pos-ficha-codigo { font-size: 0.75rem; color: #6B7486; margin-bottom: 0.375rem; }
.pos-ficha-precio { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.5rem; }
.pos-ficha-precio span { font-size: 1.875rem; font-weight: 700; color: var(--fx-acento-oscuro); }
.pos-ficha-precio small { color: #8A93A3; }
.pos-ficha-datos { display: flex; gap: 1.375rem; margin: 0 0 0.5rem; }
.pos-ficha-datos dt { font-size: 0.6875rem; color: #8A93A3; font-weight: 600; }
.pos-ficha-datos dd { margin: 0; font-weight: 700; }
.pos-ficha-listas { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.pos-ficha-listas span { font-family: "IBM Plex Mono", monospace; font-size: 0.7812rem; padding: 0.1875rem 0.5rem; border-radius: 0.375rem; background: #F1F3F6; color: #3B465C; }
.pos-ficha-listas span.activo { background: #E7F3F1; color: #0F5E57; box-shadow: inset 0 0 0 1px var(--fx-acento); }
.pos-ultima-venta { padding: 0.625rem 1rem !important; }
.pos-totales th, .pos-totales td { font-size: 0.8438rem !important; padding: 2px 0 !important; }
.pos-cab .pos-cab-izq { padding: 0.5rem 1rem; }
@media (max-height: 820px) { .pos-ficha-precio span { font-size: 1.5rem; } .pos-ficha-nombre { font-size: 0.9375rem; } }

/* Ventana de cobro: app bancaria */
.cobro-formas button small { display: block; font-size: 0.6875rem; font-weight: 500; color: #8A93A3; }
.cobro-apps { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cobro-apps label { cursor: pointer; }
.cobro-apps input { position: absolute; opacity: 0; pointer-events: none; }
.cobro-apps span { display: inline-block; padding: 0.625rem 1rem; border: 1px solid var(--fx-borde); border-radius: 0.625rem; font-weight: 600; background: #fff; }
.cobro-apps input:checked + span { border-color: var(--fx-acento); box-shadow: 0 0 0 1px var(--fx-acento); background: #F2FAF8; color: #0F5E57; }
.cobro-apps input:focus-visible + span { outline: 2px solid var(--fx-acento); outline-offset: 2px; }

/* Marca CaVaSoft en la barra superior */
.fx-marca-logo { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.fx-marca-textos { display: flex; flex-direction: column; line-height: 1.1; }
.fx-marca-nombre { font-weight: 800; letter-spacing: .01em; }
.fx-marca-nombre b { color: #8FD3FF; font-weight: 800; }
.fx-marca-empresa { font-size: 0.7188rem; font-weight: 500; color: #9FB0C8; max-width: 12.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .fx-marca-textos { display: none; } }

/* ------------------------------------------------------------------ */
/* Inicio: tablero con gráficos                                        */
/* ------------------------------------------------------------------ */
:root { --tb-barra: #1E7FD8; --tb-barra-hoy: #0B4F99; --tb-pista: #EDF1F6; --tb-guia: #E7EBF0; }
.tb-var { display: inline-flex; align-items: center; gap: 2px; margin-left: 0.375rem; font-weight: 600; font-size: 0.75rem; }
.tb-var.sube { color: #11703A; } .tb-var.baja { color: #B42318; }
.tb-alerta { border-color: #F1C9B5 !important; }
.tb-grafico { display: grid; grid-template-columns: 3.5rem 1fr; grid-template-rows: 13.75rem auto; column-gap: 0.5rem; }
.tb-eje { position: relative; font-size: 0.6875rem; color: #6B7486; font-family: "IBM Plex Mono", monospace; }
.tb-eje span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.tb-area { position: relative; border-bottom: 1px solid #C9D1DB; }
.tb-guia { position: absolute; left: 0; right: 0; border-top: 1px solid var(--tb-guia); }
.tb-barras { position: absolute; inset: 0; display: flex; align-items: flex-end; gap: 2px; }
.tb-col { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; cursor: default; outline: none; border-radius: 0.25rem 0.25rem 0 0; }
.tb-col:focus-visible { box-shadow: 0 0 0 2px var(--tb-barra); }
.tb-barra { width: 100%; min-height: 0; background: var(--tb-barra); border-radius: 0.25rem 0.25rem 0 0; transition: filter .12s; }
.tb-col.hoy .tb-barra { background: var(--tb-barra-hoy); }
.tb-col.activa .tb-barra, .tb-col:hover .tb-barra { filter: brightness(1.15); }
.tb-col.activa { background: rgba(30, 127, 216, .07); }
.tb-tip { position: absolute; top: 0.25rem; transform: translateX(-50%); background: #172033; color: #fff; padding: 0.3125rem 0.625rem; border-radius: 0.5rem;
  font-size: 0.75rem; display: flex; flex-direction: column; align-items: center; pointer-events: none; white-space: nowrap; box-shadow: 0 0.25rem 0.75rem rgba(0,0,0,.18); z-index: 2; }
.tb-tip b { font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; }
.tb-fechas { grid-column: 2; display: flex; gap: 2px; font-size: 0.6875rem; color: #6B7486; margin-top: 0.25rem; }
.tb-fechas span { flex: 1 1 0; overflow: visible; white-space: nowrap; }
.tb-fila { margin-bottom: 0.75rem; }
.tb-pista { height: 0.5rem; border-radius: 0.25rem; background: var(--tb-pista); margin-top: 0.25rem; overflow: hidden; }
.tb-pista div { height: 100%; background: var(--tb-barra); border-radius: 0.25rem; min-width: 0.25rem; }
.tb-vacio { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; color: #8A93A3; padding: 1.875rem 0.625rem; text-align: center; font-size: 0.8438rem; }
.tb-vacio i { font-size: 1.75rem; color: #C2CAD5; }
.tb-atencion li { padding: 0.625rem 0; border-top: 1px solid var(--fx-borde); }
.tb-atencion li:first-child { border-top: 0; padding-top: 0; }
.tb-msg { line-height: 1.3; margin-top: 2px; }
@media (prefers-reduced-motion: reduce) { .tb-barra { transition: none; } }
.tb-grafico { flex: 1 1 auto; grid-template-rows: minmax(13.75rem, 1fr) auto; min-height: 15.625rem; }

/* ===================== Productos: ficha ===================== */
.pf-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 0.75rem; margin-bottom: 0.875rem; }
.pf-kbd { background: rgba(255,255,255,.22); color: inherit; font-size: 0.6875rem; margin-left: 0.25rem; padding: 1px 0.3125rem; }
.pf-secciones { position: sticky; top: 0; z-index: 5; display: flex; gap: 0.25rem; overflow-x: auto; padding: 0.5rem 0; margin-bottom: 0.375rem; background: var(--fx-fondo); }
.pf-secciones a { white-space: nowrap; padding: 0.3125rem 0.75rem; border-radius: 62.4375rem; font-size: 0.8125rem; color: #42506A; text-decoration: none; border: 1px solid transparent; }
.pf-secciones a:hover { background: #fff; border-color: var(--fx-borde); }
.pf-secciones a.activo { background: #fff; border-color: var(--fx-acento); color: var(--fx-acento-oscuro); font-weight: 600; }
.pf-titulo { font-size: 0.9375rem; font-weight: 600; margin-bottom: 0.875rem; display: flex; align-items: center; gap: 0.5rem; }
.pf-titulo i { width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; display: inline-grid; place-items: center; background: #E6F3F1; color: var(--fx-acento-oscuro); font-size: 0.875rem; }
section[id^="s-"] { scroll-margin-top: 3.5rem; }
.pf-et { font-size: 0.8125rem; font-weight: 500; color: #3A4659; margin-bottom: 0.25rem; }
.pf-mas { border: 0; background: none; padding: 2px 0 0; font-size: 0.75rem; color: var(--bs-link-color); }
.pf-mas:hover { text-decoration: underline; }
.pf-precios th, .pf-precios td { padding: 0.375rem 0.375rem; }
.pf-precios thead th { font-size: 0.75rem; font-weight: 500; color: #5A6578; border-bottom-width: 1px; }
.pf-precios input { min-width: 6rem; }
.pf-lista { display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; font-weight: 700; font-size: 0.8125rem; background: #EEF1F5; color: #42506A; }
.pf-lista-A { background: var(--fx-acento); color: #fff; }
.pf-promo { border: 1px dashed #C9B8F0; background: #FBF9FF; border-radius: 0.625rem; padding: 0.625rem 0.75rem; }
.pf-stock { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pf-stock > div { border: 1px solid var(--fx-borde); border-radius: 0.625rem; padding: 0.375rem 0.75rem; display: flex; flex-direction: column; min-width: 6.875rem; }
.pf-stock > div span { font-size: 0.75rem; color: #5A6578; }
.pf-stock > div.total { background: #F4FAF9; border-color: #BFE0DB; }
.pf-hist li { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.8125rem; padding: 0.375rem 0; border-bottom: 1px solid #EEF1F5; }
.pf-resumen { position: sticky; top: 3.25rem; background: #fff; border: 1px solid var(--fx-borde); border-radius: 0.875rem; padding: 1rem; }
.pf-foto { aspect-ratio: 4 / 3; border-radius: 0.75rem; background: #F2F4F7; display: grid; place-items: center; overflow: hidden; margin-bottom: 0.625rem; }
.pf-foto img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.pf-sinfoto { display: flex; flex-direction: column; align-items: center; color: #8A94A6; font-size: 0.8125rem; }
.pf-sinfoto i { font-size: 2.125rem; }
.pf-nombre { font-weight: 600; font-size: 1rem; line-height: 1.3; margin-bottom: 0.375rem; word-break: break-word; }
.pf-precio { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.625rem; }
.pf-precio span { font-size: 1.875rem; font-weight: 700; color: var(--fx-acento-oscuro); }
.pf-precio small { color: #5A6578; }
.pf-datos { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: 0 0 0.625rem; }
.pf-datos > div { background: #F6F8FA; border-radius: 0.625rem; padding: 0.375rem 0.625rem; }
.pf-datos dt { font-size: 0.6875rem; font-weight: 500; color: #5A6578; text-transform: uppercase; letter-spacing: .3px; }
.pf-datos dd { margin: 0; font-weight: 600; }

/* ===================== Productos: consulta ===================== */
.pc-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); gap: 0.625rem; }
.pc-kpi { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 0.625rem; align-items: center; background: #fff;
  border: 1px solid var(--fx-borde); border-radius: 0.75rem; padding: 0.625rem 0.875rem; text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.pc-kpi i { grid-row: span 2; width: 2.125rem; height: 2.125rem; border-radius: 0.625rem; display: grid; place-items: center; background: #E6F3F1; color: var(--fx-acento-oscuro); }
.pc-kpi b { font-family: "IBM Plex Mono", monospace; font-size: 1.25rem; line-height: 1.1; }
.pc-kpi span { font-size: 0.75rem; color: #5A6578; }
.pc-kpi:hover { border-color: #B9C3D0; }
.pc-kpi.activo { border-color: var(--fx-acento); box-shadow: 0 0 0 0.1875rem rgba(31,138,126,.14); }
.pc-kpi.rojo i { background: #FDECEC; color: #B42318; }
.pc-kpi.ambar i { background: #FEF3DC; color: #9A5B00; }
.pc-kpi.morado i { background: #F1EBFD; color: #6B3FC6; }
.pc-kpi.gris i { background: #EEF1F5; color: #42506A; }
.pc-filtros { padding: 0.875rem 1rem; }
.pc-letras { display: flex; flex-wrap: wrap; gap: 2px; }
.pc-letras a { min-width: 1.625rem; text-align: center; padding: 2px 0.375rem; border-radius: 0.375rem; font-size: 0.75rem; color: #42506A; text-decoration: none; }
.pc-letras a:hover { background: #EEF1F5; }
.pc-letras a.activo { background: var(--fx-acento); color: #fff; font-weight: 600; }
.pc-tabla thead th { font-size: 0.75rem; font-weight: 500; color: #5A6578; background: #F8FAFB; white-space: nowrap; padding: 0.625rem 0.75rem; }
.pc-tabla td { padding: 0.5rem 0.75rem; }
.pc-tabla tbody tr { cursor: pointer; }
.pc-tabla tbody tr:hover { background: #F6FAF9; }
.pc-orden { color: inherit; text-decoration: none; }
.pc-orden.activo { color: var(--fx-acento-oscuro); font-weight: 600; }
.pc-mini { width: 2.5rem; height: 2.5rem; border-radius: 0.5rem; object-fit: cover; display: grid; place-items: center; background: #F2F4F7; color: #8A94A6; }
.pc-barras { font-size: 0.6875rem; }
.pc-nombre { font-weight: 600; color: #172033; text-decoration: none; }
.pc-nombre:hover { color: var(--fx-acento-oscuro); text-decoration: underline; }
.pc-etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 2px; }
.pc-etiquetas span { font-size: 0.6875rem; padding: 1px 0.4375rem; border-radius: 62.4375rem; background: #EEF1F5; color: #42506A; }
.pc-etiquetas .t-promo { background: #F1EBFD; color: #5B2FB5; }
.pc-etiquetas .t-bloq { background: #FDECEC; color: #B42318; }
.pc-etiquetas .t-serv { background: #E7F1FD; color: #1D5DAF; }
.pc-etiquetas .t-inac { background: #E9ECEF; color: #5A6578; }
.pc-inactivo td { opacity: .6; }
.pc-util { font-family: "IBM Plex Mono", monospace; font-size: 0.8125rem; font-weight: 600; padding: 1px 0.4375rem; border-radius: 0.375rem; }
.pc-util.ok { background: #E7F6EE; color: #11703A; }
.pc-util.bajo { background: #FEF3DC; color: #8A5300; }
.pc-util.neg { background: #FDECEC; color: #B42318; }
.pc-stock { font-family: "IBM Plex Mono", monospace; font-weight: 600; }
.pc-stock.bajo { color: #9A5B00; }
.pc-stock.cero { color: #B42318; }
.cat-lista li { border-bottom: 1px solid #EEF1F5; }
.cat-lista li.inactivo input { color: #8A94A6; text-decoration: line-through; }

/* POS: datos del producto (foto, promoción, nota) */
.pos-ficha-cab { display: flex; gap: 0.625rem; align-items: flex-start; }
.pos-ficha-foto { width: 3.5rem; height: 3.5rem; border-radius: 0.625rem; object-fit: cover; flex: none; border: 1px solid var(--fx-borde); background: #fff; }
.pos-ficha-promo { margin: 0.375rem 0 2px; font-size: 0.75rem; font-weight: 600; color: #5B2FB5; background: #F1EBFD; border-radius: 0.5rem; padding: 0.25rem 0.5rem; }
.pos-ficha-nota { margin: 0.375rem 0 2px; font-size: 0.7812rem; color: #7A4B00; background: #FEF3DC; border-left: 0.1875rem solid #E0A100; border-radius: 0.375rem; padding: 0.3125rem 0.5rem; }
.pos-promo-tag { font-size: 0.6562rem; font-weight: 700; color: #5B2FB5; background: #F1EBFD; border-radius: 62.4375rem; padding: 1px 0.375rem; vertical-align: middle; }
.min-w-0 { min-width: 0; }
.pc-etiquetas .t-peso { background: #E8F5EC; color: #11703A; }
.pf-peso > .row { background: #F4FAF9; border: 1px dashed #BFE0DB; border-radius: 0.625rem; padding: 0.25rem 0.25rem 0.75rem; margin: 0; }
/* POS: precio y descuento fijos para el cajero */
.pos-fijo { background: #F4F6F8 !important; color: #42506A; border-color: transparent !important; cursor: default; }

/* ===================== Factura normal: todo en una pantalla ===================== */
.vf { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0.625rem; }
.vf .tarjeta { padding: 0.625rem 0.875rem; border-radius: 0.75rem; }
.vf-etq { display: block; font-size: 0.7188rem; font-weight: 600; color: #5A6578; margin-bottom: 2px; }
.vf legend.vf-etq { float: none; width: auto; padding: 0; }
.vf kbd { font-size: 0.625rem; padding: 0 0.25rem; background: #EEF1F5; color: #3B465C; border: 1px solid #D5DBE3; box-shadow: none; }
.vf .vf-kbd-claro { background: rgba(255,255,255,.2); color: #fff; border-color: transparent; }
.vf-valor { font-size: 0.8438rem; font-weight: 600; padding: 0.25rem 0; white-space: nowrap; }
.vf-cab { flex: none; display: grid; grid-template-columns: minmax(17.5rem, 1.25fr) minmax(18.75rem, 1.1fr) minmax(16.25rem, 1fr); gap: 0.625rem 1.375rem; }
.vf-cliente { min-width: 0; }
.vf-cli-datos { margin-top: 0.375rem; }
.vf-cli-nombre { font-weight: 700; font-size: 0.9375rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-cli-extra { font-size: 0.75rem; color: #5A6578; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vf-doc, .vf-otros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr) minmax(0, 1fr); gap: 0.375rem 0.75rem; align-content: start; }
.vf-otros { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vf-sug { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; max-height: 18.75rem; overflow-y: auto; box-shadow: 0 0.625rem 1.75rem rgba(16,24,40,.16); }
.vf-sug .list-group-item { font-size: 0.8125rem; padding: 0.375rem 0.625rem; cursor: pointer; }
.vf-grilla { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vf-entrada { display: flex; gap: 0.625rem; margin-bottom: 0.5rem; }
.vf-cant { width: 5rem; flex: none; }
.vf-tabla { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--fx-borde); border-radius: 0.5rem; }
.vf-tabla thead th { position: sticky; top: 0; z-index: 2; background: #F4F6F9; font-size: 0.7188rem; font-weight: 600; color: #5A6578; border-bottom: 1px solid var(--fx-borde); white-space: nowrap; }
.vf-tabla td { padding: 0.1875rem 0.375rem; font-size: 0.8438rem; }
.vf-tabla tr.vf-sel td { background: #E9F5F3; }
.vf-tabla .form-control-sm, .vf-tabla .form-select-sm { padding-top: 2px; padding-bottom: 2px; font-size: 0.8125rem; }
.vf-vacio td { color: #8A93A3; text-align: center; padding: 2.25rem 0.5rem !important; }
.vf-desc { line-height: 1.25; }
.vf-nota { font-size: 0.7188rem; color: #8A5300; }
.vf-pie { flex: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) 22.5rem; gap: 0.625rem; height: 12.25rem; }
.vf-pie > .tarjeta { min-height: 0; display: flex; flex-direction: column; }
.vf-cupos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.375rem; }
.vf-cupos > div { background: #F6F8FA; border-radius: 0.5rem; padding: 0.25rem 0.5rem; display: flex; flex-direction: column; }
.vf-cupos span { font-size: 0.6875rem; color: #5A6578; }
.vf-cupos b { font-size: 0.875rem; }
.vf-aviso { margin-top: 0.25rem; min-height: 1.125rem; font-weight: 600; }
.vf-pagos-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 0.3125rem; }
.vf-pago { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 4rem 1.375rem; gap: 0.3125rem; align-items: center; }
.vf-totales { padding: 0.5rem 0.875rem !important; }
.vf-tot { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.875rem; }
.vf-tot > div { display: flex; justify-content: space-between; font-size: 0.7812rem; padding: 1px 0; border-bottom: 1px dashed #E6EAF0; }
.vf-tot dt { font-weight: 500; color: #5A6578; } .vf-tot dd { margin: 0; font-family: "IBM Plex Mono", monospace; }
.vf-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--fx-menu); color: #fff; border-radius: 0.625rem; padding: 0.25rem 0.875rem; margin: 0.375rem 0; }
.vf-total span { font-size: 0.8125rem; font-weight: 700; letter-spacing: .08em; color: #9FB3CC; }
.vf-total b { font-size: 1.875rem; color: #6EE7D2; }
@media (max-width: 1100px) {
  .vf-cab { grid-template-columns: 1fr 1fr; }
  .vf-pie { grid-template-columns: 1fr 1fr; height: auto; }
  .vf-grilla { min-height: 20rem; }
}
.vl-sumas td { background: #F8FAFB; border-top: 2px solid var(--fx-borde); padding: 0.625rem 0.75rem !important; }

/* Reportes */
.rp-tabs { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.rp-tabs a { padding: 0.4375rem 0.875rem; border-radius: 62.4375rem; background: #fff; border: 1px solid var(--fx-borde); color: #42506A; text-decoration: none; font-size: 0.875rem; }
.rp-tabs a:hover { border-color: #B9C3D0; }
.rp-tabs a.activo { background: var(--fx-acento); border-color: var(--fx-acento); color: #fff; font-weight: 600; }
.rp-barras { display: flex; align-items: flex-end; gap: 0.1875rem; height: 7.5rem; margin-bottom: 0.625rem; padding-bottom: 1rem; border-bottom: 1px solid var(--fx-borde); }
.rp-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.rp-col > div { width: 100%; max-width: 1.625rem; background: var(--tb-barra, #1E7FD8); border-radius: 0.1875rem 0.1875rem 0 0; min-height: 2px; }
.rp-col span { position: absolute; bottom: -1rem; font-size: 0.625rem; color: #8A93A3; }
.rp-tabla-alta { max-height: 22.5rem; overflow: auto; }
.rp-part { display: inline-block; width: 3.75rem; height: 0.375rem; background: #EEF1F5; border-radius: 0.1875rem; margin-right: 0.375rem; vertical-align: middle; overflow: hidden; }
.rp-part > div { height: 100%; background: var(--fx-acento); }
.cf-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.cf-cifras > div { background: #F6F8FA; border-radius: 0.625rem; padding: 0.375rem 0.625rem; display: flex; flex-direction: column; }
.cf-cifras span { font-size: 0.6875rem; color: #5A6578; text-transform: uppercase; letter-spacing: .3px; }
.cf-cifras b { font-size: 0.9375rem; }
.cf-cifras > div.rojo { background: #FDECEC; } .cf-cifras > div.rojo b { color: #B42318; }
.font-sans { font-family: var(--bs-body-font-family); }
.cf-cifras dt { font-size: 0.6875rem; font-weight: 500; color: #5A6578; text-transform: uppercase; letter-spacing: .3px; }
.cf-cifras dd { margin: 0; font-size: 0.9375rem; }

/* Facturación electrónica */
.fe-icono { display: inline-grid; place-items: center; width: 1.875rem; height: 1.875rem; border-radius: 50%; font-size: 1rem; font-weight: 700; }
.fe-icono.ok { background: #E7F6EE; color: #11703A; }
.fe-icono.error { background: #FDECEC; color: #B42318; }
.fe-icono.espera { background: #FEF3DC; color: #9A5B00; }
.fe-icono.anulado { background: #EEF1F5; color: #5A6578; }
.pc-kpi.fe-ok i { background: #E7F6EE; color: #11703A; }
.fe-msg { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Proforma (sin formas de pago): el pie usa dos columnas para no dejar un hueco */
.vf-pie:not(:has(.vf-pagos)) { grid-template-columns: minmax(0, 1fr) 22.5rem; }

/* Celulares: una sola columna en las pantallas de trabajo, sin desbordes hacia el costado */
@media (max-width: 1100px) { .pos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) {
  .vf-cab, .vf-pie, .vf-pie:not(:has(.vf-pagos)) { grid-template-columns: minmax(0, 1fr); }
  .vf-doc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vf-pago { grid-template-columns: minmax(0, 1fr) 5.5rem 4rem 1.375rem; }
}
@media (max-width: 760px) {
  .pos-teclas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pos-teclas .pos-tecla-grabar { grid-column: 1 / -1; }
}

/* Inicio: gráfico de ventas más bajo para que se vea lo demás sin bajar */
.tb-compacto .tb-grafico { flex: 0 0 auto; grid-template-rows: 10rem auto; min-height: 0; }

/* Impresión directa del navegador (Ctrl+P sin la barra): solo el contenido, sin menús ni botones */
@media print {
  .fx-top, .fx-sub, .fx-salida, .btn, .pagination, .alert, .dropdown-menu, .modal, form[role="search"], .pc-filtros { display: none !important; }
  body { background: #fff !important; }
  .fx-main { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  .tarjeta { box-shadow: none !important; border: 0 !important; padding: 0 !important; }
  .table-responsive { overflow: visible !important; }
  a { color: inherit !important; text-decoration: none !important; }
}
.fx-solo-impresion { display: none !important; }
@media print { .fx-solo-impresion { display: flex !important; } }
.fx-firmas { gap: 2rem; margin-top: 4rem; }
.fx-firmas > div { flex: 1; border-top: 1px solid #333; padding-top: .25rem; text-align: center; font-size: .8rem; }

/* Botón «Ampliar» de las líneas (compras y facturas): la tabla ocupa toda la pantalla. Esc o el botón la vuelve. */
.vf-grilla.vf-grande { position: fixed; inset: 0.75rem; z-index: 1045; margin: 0; min-height: 0 !important;
  box-shadow: 0 1rem 3rem rgba(16,24,40,.28); }
body.vf-con-grande::after { content: ""; position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 1040; }