/* ================================================================
   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;
  min-height: calc(100vh - var(--vit-nav-alto, 114px));
  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;
  overscroll-behavior: contain;
  padding: 6px 0 24px;
}
 
.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;
}
 
.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;
}

.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);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.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: 9px;
  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); }
.reg-badge.estado-devuelto      { background: rgba(251,146,60,0.14);  border-color: rgba(251,146,60,0.3);  color: #fb923c; }
 
/* Ú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; }
 
/* ── 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: 18px; 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: 600;
  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;
}
.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-dropdown-flotante {
  position: fixed;
  min-width: 150px;
  background: var(--vs2);
  border: 1px solid var(--vbor2);
  border-radius: var(--r);
  padding: 6px;
  z-index: 500;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  display: flex;
  flex-direction: column;
  gap: 2px;
  animation: asomarse 0.15s var(--ease-apple);
}
.reg-card-menu-dropdown-flotante.cerrando {
  animation: despedirse 0.14s var(--ease-apple) forwards;
}
.reg-card-menu-dropdown-flotante.oculto { display: none; }
 
.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;
  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: 9px;
  padding: 2px 8px;
  white-space: nowrap;
}
.reg-resumen-caja-bar-metodo {
  font-size: 12px;
  color: var(--vtx2);
  white-space: nowrap;
}
.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;
}