/* ==========================================================================
   QUOMYA — REGISTRO V1
   Wave S4.4B. Scoped entirely to `.qy-registro-screen`.
   Filtering/search logic remains in history.module.js; this file is
   presentation only. Reuses qy-foundation-v1.css primitives (.qy-input,
   .qy-btn, .qy-badge, .qy-field) and the qy-dashboard-v1.css record-row
   pattern (.qy-recent-list / .qy-record-summary) rather than duplicating
   them.
   ========================================================================== */

.qy-registro-screen,
.qy-registro-screen * {
  box-sizing: border-box;
}

.qy-registro-screen {
  display: grid;
  gap: var(--qy-space-6);
  padding-block: var(--qy-space-6) var(--qy-space-4);
  color: var(--qy-color-text-primary);
}

.qy-registro-panel {
  display: grid;
  gap: var(--qy-space-4);
  padding: var(--qy-space-5);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-xl);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-registro-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qy-space-2);
}

/*
 * Encuadre compacto del buscador + filtros principales. Envoltorio puro de
 * presentación: misma rejilla y hueco que heredaba del panel, para que la
 * pantalla no cambie y el spotlight del onboarding pueda apuntar solo a los
 * controles primarios (sin "Más filtros" ni padding de tarjeta).
 */
.qy-registro-primary-controls {
  display: grid;
  gap: var(--qy-space-4);
}

.qy-filter-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--qy-touch-min);
  padding: 0 var(--qy-space-4);
  color: var(--qy-color-text-secondary);
  background: var(--qy-color-surface-2);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-pill);
  font: var(--qy-text-label-md);
  cursor: pointer;
  transition:
    color var(--qy-motion-fast) var(--qy-motion-ease),
    background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-filter-chip:hover {
  color: var(--qy-color-text-primary);
  background: var(--qy-color-active);
}

.qy-filter-chip.is-active {
  color: var(--qy-color-text-on-brand);
  background: var(--qy-color-brand);
  border-color: var(--qy-color-brand);
}

.qy-filter-chip:focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring);
}

.qy-registro-filter-row {
  display: flex;
  align-items: flex-end;
  gap: var(--qy-space-4);
}

.qy-registro-filter-row .qy-field {
  flex: 1;
  min-width: 0;
}

.qy-registro-reset-btn {
  flex: none;
}

.qy-registro-summary {
  margin: calc(var(--qy-space-2) * -1) 0 0;
  color: var(--qy-color-text-secondary);
}

.qy-registro-list {
  border-radius: var(--qy-radius-lg);
}

.qy-registro-item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
}

.qy-registro-item.is-cancelled {
  opacity: 0.62;
}

.qy-registro-item__status {
  display: grid;
  justify-items: end;
  gap: var(--qy-space-1);
  text-align: right;
}

.qy-registro-item__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--qy-space-1);
}

.qy-registro-item .qy-badge {
  font-size: 10px;
  white-space: nowrap;
}

@media (max-width: 559px) {
  .qy-registro-screen {
    gap: var(--qy-space-5);
    padding-top: var(--qy-space-5);
  }

  .qy-registro-panel {
    padding: var(--qy-space-4);
  }

  .qy-registro-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .qy-registro-reset-btn {
    width: 100%;
  }

  /*
   * Mismo problema que en S4.3: icono + copia + importe/insignias no caben
   * en una sola fila a este ancho sin truncar texto real. Se recompone en
   * dos filas de rejilla en lugar de comprimir el contenido.
   */
  .qy-registro-item {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "status status";
    gap: var(--qy-space-2);
    padding-block: var(--qy-space-3);
  }

  .qy-registro-item > i {
    grid-area: icon;
    width: 36px;
    height: 36px;
  }

  .qy-registro-item .qy-record-summary__copy {
    grid-area: copy;
  }

  .qy-registro-item__status {
    grid-area: status;
    justify-items: start;
    text-align: left;
  }

  .qy-registro-item__badges {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .qy-registro-filter-chips {
    gap: var(--qy-space-3);
  }
}

@media (min-width: 1180px) {
  .qy-registro-screen {
    gap: var(--qy-space-8);
    padding-block: var(--qy-space-8);
  }

  .qy-registro-panel {
    padding: var(--qy-space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .qy-filter-chip {
    transition: none;
  }
}

/* ==========================================================================
   S4.11B — REGISTRO MOBILE UX

   El registro contiene unidades discretas: cada referencia debe respirar por
   separado. La lista deja de ser una caja que agrupa todas las ventas y los
   estados secundarios pasan a una disclosure nativa, cerrada por defecto.
   La lógica de filtros y la pareja cobro/cierre permanecen intactas.
   ========================================================================== */

.qy-registro-screen .qy-registro-panel {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.qy-registro-screen .qy-registro-filters {
  padding: var(--qy-space-5);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-xl);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-registro-more-filters {
  border-top: 1px solid var(--qy-color-border);
}

.qy-registro-more-filters > summary {
  display: flex;
  align-items: center;
  gap: var(--qy-space-3);
  min-height: var(--qy-touch-min);
  padding-top: var(--qy-space-3);
  color: var(--qy-color-brand-text);
  font: var(--qy-text-label-md);
  cursor: pointer;
  list-style: none;
}

.qy-registro-more-filters > summary::-webkit-details-marker {
  display: none;
}

.qy-registro-more-filters > summary::after {
  flex: none;
  margin-left: auto;
  content: "+";
  color: var(--qy-color-brand);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1;
}

.qy-registro-more-filters[open] > summary::after {
  content: "−";
}

.qy-registro-more-filters > summary:focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring);
}

.qy-registro-more-filters__hint {
  overflow: hidden;
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-body-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-registro-secondary-filters {
  display: grid;
  gap: var(--qy-space-4);
  padding-top: var(--qy-space-3);
}

.qy-registro-screen .qy-registro-list {
  gap: var(--qy-space-3);
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.qy-registro-screen .qy-registro-item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy status";
  min-height: 84px;
  padding: var(--qy-space-4);
  border: 1px solid var(--qy-color-border-strong);
  border-left: 3px solid var(--qy-color-brand);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
  transition:
    background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease),
    transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-registro-screen .qy-registro-item:last-child {
  border-bottom: 1px solid var(--qy-color-border-strong);
}

.qy-registro-screen .qy-registro-item:hover {
  border-color: var(--qy-color-brand);
  background: var(--qy-color-active);
  transform: translateY(-1px);
}

.qy-registro-screen .qy-registro-item .qy-record-summary__copy {
  grid-area: copy;
}

.qy-registro-screen .qy-registro-item .qy-record-summary__copy strong,
.qy-registro-screen .qy-registro-item .qy-record-summary__copy small {
  overflow-wrap: anywhere;
  white-space: normal;
}

.qy-registro-screen .qy-registro-item__status {
  grid-area: status;
  align-self: center;
}

.qy-registro-screen .qy-registro-item__badges {
  gap: var(--qy-space-1);
}

.qy-registro-screen .qy-registro-item .qy-badge {
  padding: 2px var(--qy-space-2);
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
}

.qy-registro-screen .qy-registro-item.is-cancelled {
  border-left-color: var(--qy-color-cancelled);
}

@media (max-width: 559px) {
  .qy-registro-screen .qy-registro-filters {
    padding: var(--qy-space-4);
  }

  .qy-registro-screen .qy-registro-item {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "copy"
      "status";
    gap: var(--qy-space-3);
  }

  .qy-registro-screen .qy-registro-item__status {
    justify-items: start;
    text-align: left;
  }

  .qy-registro-screen .qy-registro-item__badges {
    justify-content: flex-start;
  }
}

@media (min-width: 768px) {
  .qy-registro-secondary-filters {
    gap: var(--qy-space-5);
  }

  .qy-registro-screen .qy-registro-filter-row {
    align-items: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qy-registro-screen .qy-registro-item {
    transition: none;
  }
}