/* ================================================================
   REGISTRO Y SEGUIMIENTO — VISTA "VITRINA DE BOLETAS"
   Sidebar de filtros + grilla de tarjetas (una por comprobante),
   igual look&feel que vitrina.css. Requiere que vitrina.css y
   vitp-shell.css ya estén cargados antes.
   ================================================================ */
 
#reg-main-container {
  flex: 1;
  /* 100% y no calc(100vh - alto del navbar): el panel que lo contiene ya
     mide exactamente eso. .vitp-page es fixed con top bajo el navbar y
     bottom:0, y .tab-panel hereda ese alto con inset:0 — así que el
     100% sale de la caja real, sin depender de que la medición del
     navbar en JavaScript esté al día. */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
  /* padding-top en 0 (antes 14px): la barra reutilizada de catálogo
     (#vit-filtros-bar-top) ya trae su propio margin-top:10px — sumado
     a este padding quedaba 24px de separación bajo el navbar acá vs.
     solo 10px en catálogo (.vit-main no tiene padding), así que se veía
     más abajo que su contraparte. */
  padding: 0 24px;
}

/* La barra reutilizada de catálogo calcula su "top" de sticky como
   var(--vit-nav-alto)+10px, pensado para el flujo normal de documento
   del catálogo (ahí ese offset SÍ hay que restarlo, el navbar ocupa
   espacio real arriba de todo). Acá adentro (#reg-main-container vive
   dentro de #panel-registro, un .tab-panel con su propio scroll — ver
   webapp-core.css) el contenedor ya arranca DEBAJO del navbar (todo
   .vitp-page es position:fixed con top:var(--vit-nav-alto)), así que
   sumar ese mismo offset de nuevo acá lo empujaba una altura de navbar
   entera más abajo de lo que se ve en catálogo. Con top:10px alcanza
   (mismo margin-top que ya trae la barra, sin duplicar el offset). */
#reg-main-container .vit-filtros-bar-top {
  top: 10px;
}
 
/* ── Resumen: conteo + orden (igual que vit-sb-resumen-top pero en la barra superior) ── */
.reg-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 2px;
  flex-shrink: 0;
}
.reg-count { font-size: 12px; color: var(--vtx3); white-space: nowrap; }
 
/* ── Grilla ── */
.reg-grid-wrap {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 0 24px;
}

/* Esta caja NO scrollea nunca: #reg-main-container tiene min-height de una
   pantalla y ningún tope, así que crece con el contenido, y esta —que es
   flex:1 adentro— crece con él. Medido: alto 4656, contenido 4656, nada
   que scrollear. El que scrollea es .tab-panel (alto 800, contenido 4719).

   Pero "overflow-y: auto" igual la vuelve contenedor de scroll, y el
   "overscroll-behavior: contain" que le llega desde la lista compartida de
   utilidades.css —donde #reg-grid-wrap está por la barra de scroll fina,
   no por el encadenamiento— hacía que se tragara la rueda sin pasarla al
   panel de atrás. Con el puntero sobre la grilla la página no se movía;
   sobre el resumen de caja, que queda fuera de esta caja, sí.

   Va con selector de id porque el de allá también lo es: una clase pierde.

   Si algún día se le pone tope de alto al contenedor, esta vuelve a ser el
   scroller de verdad y habría que sacar esta línea. */
#reg-grid-wrap {
  overscroll-behavior: auto;
}
 
.reg-grid {
  display: grid;
  /* 1 línea = 1 venta: con varias columnas, boletas con distinta
     cantidad de productos quedan de alturas distintas y quedaban
     visualmente desordenadas (una tarjeta empieza donde otra ya
     terminó, sin alinearse entre filas). Ancho completo evita eso. */
  grid-template-columns: 1fr;
  gap: 14px;
}
 
/* Título del grupo "PENDIENTES" dentro de la grilla. Ocupa su propia
   fila (la grilla es de una columna) y va con línea arriba para que se
   lea como un corte, no como una tarjeta más. */
.reg-grid-seccion {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--vtx3);
}
.reg-grid-seccion::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--vbor2);
}

.reg-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  color: var(--vtx3);
  text-align: center;
}
.reg-empty i { font-size: 44px; }
 
/* ── Skeleton de la grilla mientras cargan las boletas: misma
   grilla que .reg-grid para que no haya salto de layout al llegar
   los datos reales. ── */
.reg-loading {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
 
/* ── Tarjeta "boleta" (igual estructura que .vit-card) ── */
.reg-card {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 14px 16px;
  cursor: pointer;
  /* Ítem directo de .reg-grid (CSS Grid): por default un ítem de grid
     nunca se achica más allá de su contenido mínimo, sin importar que
     .reg-grid sea 1fr — así que en pantallas angostas la tarjeta se
     negaba a angostarse y empujaba toda la grilla a un ancho mayor que
     la pantalla (con scroll horizontal), aunque el texto de adentro ya
     tuviera text-overflow:ellipsis puesto (nunca llegaba a activarse). */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.2s var(--ease-apple), transform 0.15s var(--ease-apple), box-shadow 0.2s var(--ease-apple);
  animation: surgir 0.3s var(--ease-apple) both;
  animation-delay: min(calc(var(--i, 0) * 30ms), 300ms);
}
.reg-card:hover {
  border-color: var(--vbor2);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 0 0 1px rgba(206,147,216,0.12);
}
 
.reg-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2px 8px;
}

/* Número de la tarjeta, a la izquierda del código. Ancho mínimo fijo
   para que los códigos queden alineados entre sí aunque el número pase
   de una a dos o tres cifras. */
.reg-card-numero {
  flex: 0 0 auto;
  min-width: 20px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vtx3);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}

.reg-card-codigo {
  font-size: 13px;
  font-weight: 700;
  color: var(--va);
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.reg-card-fecha {
  font-size: 11px;
  color: var(--vtx3);
  white-space: nowrap;
  flex-shrink: 0;
}
.reg-card-hora {
  font-size: 11px;
  color: var(--vtx3);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
.reg-card-hora::before { content: '· '; }
 
/* ── Una fila por producto vendido: su miniatura pegada a su propio
   nombre, apiladas — no todas las fotos juntas arriba y el texto
   aparte, para que se entienda de un vistazo qué foto es de qué. ── */
.reg-card-productos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reg-card-producto-fila {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.reg-card-producto-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 2px;
}
.reg-card-producto-precio {
  font-size: 13px;
  font-weight: 700;
  color: var(--va);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: 8px;
}
.reg-badge-producto { align-self: flex-start; }
.reg-card-productos-img {
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.reg-card-productos-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  box-sizing: border-box;
}
.reg-card-productos-img i { font-size: 20px; color: var(--vtx3); }
.reg-card-producto-nombre {
  font-size: 12px;
  color: var(--vtx3);
  /* Antes: white-space:nowrap + ellipsis (cortaba el nombre con "..."
     si no entraba en una línea) — ahora pasa a la línea siguiente en
     vez de truncarse, para no perder texto del nombre. */
  white-space: normal;
  overflow-wrap: break-word;
}

.reg-card-cliente {
  font-size: 14px;
  font-weight: 600;
  color: var(--vtx); overflow-wrap: anywhere;
}
.reg-card-sub { font-size: 11px; color: var(--vtx3); display: flex; flex-wrap: wrap; gap: 2px 10px; }
.reg-card-sub-item { display: inline-flex; align-items: center; gap: 4px; }
.reg-card-sub-item i { font-size: 12px; }
 
/* Ya no crece (flex:1) para no empujar fecha/hora/total fuera de la
   fila — solo ocupa el ancho que necesitan sus propios badges,
   pegados justo a la derecha del código. */
.reg-card-badges { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; min-width: 0; }
.reg-badge {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 12px;
  background: var(--vag2);
  border: 1px solid var(--vbor2);
  color: var(--va);
  white-space: nowrap;
}
.reg-badge.estado-pendiente     { background: rgba(255,213,79,0.14);  border-color: rgba(255,213,79,0.3);  color: var(--color-amarillo); }
.reg-badge.estado-diagnostico   { background: rgba(96,165,250,0.14);  border-color: rgba(96,165,250,0.3);  color: #60a5fa; }
.reg-badge.estado-en-reparacion { background: rgba(167,139,250,0.14); border-color: rgba(167,139,250,0.3); color: #a78bfa; }
.reg-badge.estado-en-espera     { background: rgba(255,213,79,0.14);  border-color: rgba(255,213,79,0.3);  color: var(--color-amarillo); }
.reg-badge.estado-terminado     { background: rgba(74,222,128,0.14);  border-color: rgba(74,222,128,0.3);  color: var(--vgrn); }
.reg-badge.estado-entregado     { background: rgba(74,222,128,0.14);  border-color: rgba(74,222,128,0.3);  color: var(--vgrn); }
.reg-badge.estado-cancelado     { background: rgba(248,113,113,0.14); border-color: rgba(248,113,113,0.3); color: var(--vred); }
/* Método de pago: neutro a propósito. Los otros badges de la tarjeta
   son estados (verde/amarillo/rojo, "cómo va esto"); el método es un
   dato, no un estado, y pintarlo de color competía con ellos. */
.reg-badge.reg-badge-metodo {
  background: rgba(255,255,255,0.05);
  border-color: var(--vbor2);
  color: var(--txt-sub);
}
.reg-badge.estado-devuelto      { background: rgba(251,146,60,0.14);  border-color: rgba(251,146,60,0.3);  color: #fb923c; }

/* Venta emitida otro día que aparece acá porque se cobró dentro del
   rango. Lila, el color de "esto es de la app hablándote", no verde ni
   rojo: no es un estado de la venta, es la explicación de por qué está
   en esta lista. */
.reg-badge.reg-badge-cobrada-fuera {
  background: rgba(206,147,216,0.14);
  border-color: rgba(206,147,216,0.35);
  color: var(--va);
}
 
/* Único elemento con margin-left:auto en .reg-card-header-top — total
   y botón de menú quedan pegados al extremo derecho de esa fila. */
.reg-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--vbor);
}
/* Total + botón de menú, pegados a la derecha — mismo margen que usa
   .reg-card-producto-precio arriba, para que el total quede alineado
   en columna con el precio de cada producto. */
.reg-card-footer-precio {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.reg-card-total { font-size: 14px; font-weight: 700; color: var(--va); white-space: nowrap; }
/* Una venta CON ABONO muestra las dos cifras: lo que costó, tachado, y lo
   que falta cobrar — en el mismo morado de siempre, que el rojo ya lo
   ponen los badges de estado. Sin abono no se tacha nada: el saldo sería
   el mismo total escrito dos veces. */
.reg-card-total-con-saldo {
  display: flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.reg-card-total-tachado {
  font-size: 12px;
  color: var(--txt-tenue);
  text-decoration: line-through;
  white-space: nowrap;
}
 
/* ── Modal detalle (mismo patrón que .vit-detalle-*) ── */
.reg-detalle-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.reg-detalle-overlay.oculto { display: none; }
 
.reg-detalle-modal {
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--rxl);
  width: 100%; max-width: 560px; max-height: 90vh;
  overflow-y: auto; position: relative;
  overscroll-behavior: contain;
  box-shadow: 0 32px 80px rgba(0,0,0,0.8);
  animation: asomarse 0.2s var(--ease-apple);
}
 
.reg-detalle-header {
  padding: 20px 24px 14px;
  border-bottom: 1px solid var(--vbor);
  display: flex; justify-content: space-between; align-items: center;
}
.reg-detalle-codigo { font-size: 17px; font-weight: 800; color: var(--vtx); }
.reg-detalle-fecha  { font-size: 12px; color: var(--vtx3); }
 
.reg-detalle-body { padding: 18px 24px 24px; display: flex; flex-direction: column; gap: 16px; }
 
.reg-detalle-cliente,
.reg-detalle-productos,
.reg-detalle-archivos {
  background: var(--vs3, rgba(255,255,255,0.03));
  border: 1px solid var(--vbor);
  border-radius: var(--rl);
  padding: 14px;
}
 
.reg-detalle-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 6px;
}
.reg-detalle-total { font-size: 22px; font-weight: 800; color: var(--va); }
.reg-detalle-acciones { display: flex; gap: 8px; }
 
/* ════════════════════════════════════════════════════════════════
   PASO 6 — PAGINACIÓN + MODAL PENDIENTES
   ════════════════════════════════════════════════════════════════ */
 
/* ── Paginación ── */
.reg-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 4px 8px;
  gap: 12px;
  flex-wrap: wrap;
}
.reg-pag-info {
  font-size: 12px;
  color: var(--vtx3);
}
.reg-pag-botones {
  display: flex;
  gap: 6px;
  align-items: center;
}
.reg-pag-btn {
  background: var(--vs);
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 12px;
  font-weight: 400;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s var(--ease-apple);
  min-width: 32px;
  text-align: center;
}
.reg-pag-btn:hover:not(:disabled) {
  border-color: var(--va);
  color: var(--va);
  box-shadow: 0 4px 12px rgba(206,147,216,0.18);
}
.reg-pag-btn.activo {
  background: var(--va);
  border-color: var(--va);
  color: #fff;
  font-weight: 700;
}
.reg-pag-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
 
/* ── Acciones rápidas en la tarjeta: menú ⋮ (vive en la fila del total) ── */
.reg-btn-menu-card {
  width: 33px;
  height: 33px;
  flex-shrink: 0;
  background: transparent;
  border: 1px solid var(--vbor);
  border-radius: var(--r);
  color: var(--vtx3);
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s var(--ease-apple);
}
.reg-btn-menu-card:hover {
  background: var(--vag);
  border-color: var(--vbor2);
  color: var(--va);
  transform: scale(1.08);
}
 
/* ── Dropdown flotante ⋮ de una tarjeta .reg-card (mismo patrón que
   vit-card-menu-dropdown) — clase, no id: el motor genérico
   (_asegurarMenuCardRegistro, utilidades.js) crea uno de estos por
   cada lista que lo necesite (boletas, pendientes, etc.), cada uno con
   su propio id para poder tener más de uno en el DOM, pero todos
   comparten este mismo look. ── */
 
.reg-card-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  background: transparent;
  border: none;
  border-radius: var(--r);
  color: var(--vtx2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s var(--ease-apple), color 0.15s var(--ease-apple);
  text-align: left;
}
.reg-card-menu-item:hover { background: var(--vag2); color: var(--vtx); }
.reg-card-menu-item i { color: var(--va); font-size: 15px; flex-shrink: 0; }
.reg-card-menu-item-rojo i { color: var(--vred); }
.reg-card-menu-item-rojo:hover { background: rgba(248,113,113,0.12); color: var(--vred); }
 
/* ── Resumen de caja: vive DENTRO de #vit-filtros-bar-top (la barra
   flotante bajo el buscador), en el mismo lugar donde el catálogo
   muestra sus chips de filtros activos + conteo + orden — ver
   _actualizarBarraTopParaPagina en vitp-paginas.js. 3 líneas: comprobantes
   + total arriba, métodos de pago al medio, estados de Seguimiento
   abajo — compartir línea entre cualquiera de las tres las cortaba
   contra el borde de la barra apenas había 3-4 de algo. ── */
.reg-resumen-caja-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  padding: 2px 0;
}
.reg-resumen-caja-bar.oculto { display: none; }
.reg-resumen-caja-bar.clickeable { cursor: pointer; }
.reg-resumen-caja-bar-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.reg-resumen-caja-bar-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--vtx);
  white-space: nowrap;
  flex-shrink: 0;
}
.reg-resumen-caja-bar-sub {
  font-size: 12px;
  color: var(--vtx3);
  white-space: nowrap;
  flex-shrink: 0;
}
.reg-resumen-caja-bar-fila.reg-resumen-caja-bar-seguimientos,
.reg-resumen-caja-bar-fila.reg-resumen-caja-bar-metodos-fila {
  gap: 6px;
  flex-wrap: wrap;
}
.reg-resumen-caja-bar-badge {
  font-size: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.reg-resumen-caja-bar-metodo {
  font-size: 12px;
  color: var(--vtx2);
  white-space: nowrap;
}
/* Lo que falta cobrar comparte la línea del desglose por método, pero no
   es plata que entró: va en rojo, el mismo color con que la tarjeta
   marca "POR PAGAR", para que no se lea como un método más. */
.reg-resumen-caja-bar-metodo.reg-resumen-caja-bar-porcobrar {
  color: var(--vred);
}
.reg-resumen-caja-bar-total {
  color: var(--va);
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}
 
/* ── Diagnóstico del equipo dentro de la ficha de detalle ── */
.info-fila-diagnostico {
  border-bottom: none;
  padding-top: 10px;
}
.info-fila-diagnostico .info-label {
  font-weight: 600;
  color: var(--color-accent);
}
.info-subfila {
  padding-left: 12px;
}
.info-subfila .info-label {
  font-weight: 400;
  opacity: 0.75;
}

/* ── El pie de la tarjeta en el teléfono ───────────────────────────
   Las insignias (VENTA, EN REPARACIÓN, ABONADO $18.000) y el precio se
   reparten la misma línea. En una pantalla angosta al precio le quedan
   ~120px y a las insignias una columna de 60: cada una se parte en dos o
   tres renglones, y las que no alcanzan a partirse se desbordan por
   encima del precio — se veía "EN REPARACIÓN" escrito sobre "$15.000".

   Acá se separan: las insignias ocupan su propia línea completa y el
   precio baja a la siguiente, pegado a la derecha como siempre. */
@media (max-width: 700px) {
  .reg-card-footer { align-items: flex-start; }
  .reg-card-badges { flex: 1 1 100%; }
  .reg-card-footer-precio { margin-left: auto; }
}