/**
 * ONLAB Campus — G10K4-MVP.1.1
 * PRESENTACIÓN DEL MÓDULO DE FACTURACIÓN
 *
 * POR QUÉ EXISTE ESTA HOJA
 * ------------------------
 * El módulo de facturación emitía 46 clases y 41 no tenían una sola
 * regla. La pantalla funcionaba y era ilegible: la bandeja pintaba cada
 * comprobante DOS veces —la tabla de escritorio y las tarjetas de
 * móvil a la vez— porque las clases que debían alternarlas no existían.
 *
 * POR QUÉ ACOTADA, Y NO GLOBAL
 * ----------------------------
 * Varias de esas clases tienen nombres genéricos que otros módulos ya
 * usan sin estilo: `.muted` en quince módulos, `.actions` en ocho,
 * `.tabs` en cinco, `.toolbar` en tres, `.panel` y `.filters` en dos.
 * Definirlas globalmente cambiaría de golpe la apariencia de media
 * aplicación, y eso no es lo que este encargo autoriza.
 *
 * Por eso TODO aquí cuelga de `.billing-scope`, que el módulo pone en
 * su raíz y en el cuerpo de sus modales. Fuera de facturación, nada
 * cambia. El día que el Colegio quiera unificar ese vocabulario, será
 * una decisión consciente y no un efecto secundario.
 *
 * LO QUE NO ESTÁ AQUÍ
 * -------------------
 * Los botones. El módulo pasó a usar `.btn`, `.btn--primary` y
 * `.btn--ghost`, que son los componentes probados de Campus, con sus
 * estados de hover, foco y deshabilitado ya resueltos. Reutilizarlos es
 * mejor que redefinirlos.
 *
 * Sin framework, sin dependencias: sólo los tokens que ya existen.
 */

/* =====================================================================
   1 · PRIMITIVAS DEL MÓDULO
   ===================================================================== */

.billing-scope .muted {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.billing-scope .stack--tight { gap: var(--space-xs); }

.billing-scope .numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.billing-scope .panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.billing-scope .toolbar,
.billing-scope .actions,
.billing-scope .form-actions,
.billing-scope .filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.billing-scope .form-actions { margin-top: var(--space-sm); }

/* =====================================================================
   2 · INDICADORES
   ===================================================================== */

.billing-scope .kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
}

.billing-scope .kpi-grid > * {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
}

.billing-scope .kpi__value {
  display: block;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: 1.1;
  color: var(--color-text);
}

.billing-scope .kpi__label {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* =====================================================================
   3 · FILTROS Y PESTAÑAS
   ===================================================================== */

.billing-scope .filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--space-sm);
  align-items: end;
}

.billing-scope .filters__actions { grid-column: 1 / -1; }

.billing-scope .tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-md);
}

/* =====================================================================
   4 · LA BANDEJA · TABLA Y TARJETAS, NUNCA LAS DOS
   =====================================================================
   Éste es el defecto que cerró G10K4-MVP.1.1. El punto de ruptura es
   720 px, el mismo que ya usa `responsive.css`: no se inventa uno
   nuevo.
   ===================================================================== */

.billing-scope .table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.billing-scope .table-wrapper table {
  width: 100%;
  border-collapse: collapse;
}

.billing-scope .table-wrapper th,
.billing-scope .table-wrapper td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.billing-scope .table-wrapper th {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.billing-scope .cell-main {
  display: block;
  font-weight: var(--font-weight-medium);
  color: var(--color-text);
}

.billing-scope .cell-sub {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Las tarjetas son la representación de móvil. */
.billing-scope .card-list {
  display: grid;
  gap: var(--space-sm);
}

.billing-scope .record-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  display: grid;
  gap: var(--space-xs);
}

.billing-scope .record-card__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: baseline;
  justify-content: space-between;
}

.billing-scope .record-card__title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.billing-scope .record-card__sub {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.billing-scope .record-card__amount {
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}

.billing-scope .record-card__grid {
  display: grid;
  grid-template-columns: minmax(7rem, auto) 1fr;
  gap: 0.15rem var(--space-sm);
  font-size: var(--font-size-sm);
}

/* --- EL INTERRUPTOR. Una sola representación a la vez. --- */
.billing-scope .card-list--mobile { display: none; }
.billing-scope .table-wrapper--desktop { display: block; }

@media (max-width: 720px) {
  .billing-scope .table-wrapper--desktop { display: none; }
  .billing-scope .card-list--mobile { display: grid; }
}

/* =====================================================================
   5 · EL DETALLE
   =====================================================================
   `detail-grid` tiene que aguantar un folio fiscal de 36 caracteres sin
   desbordar el documento. A partir de 720 px es de dos columnas; por
   debajo, el valor cae bajo su etiqueta y puede partirse.
   ===================================================================== */

.billing-scope .detail-section { margin-bottom: var(--space-md); }

.billing-scope .detail-section > h3,
.billing-scope .detail-section > h4 {
  margin: 0 0 var(--space-xs);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.billing-scope .detail-grid {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: 0.2rem var(--space-md);
  align-items: baseline;
}

.billing-scope .detail-grid > dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.billing-scope .detail-grid > dd {
  margin: 0;
  min-width: 0;
  /* Un UUID no lleva espacios: sin esto empuja el ancho del documento. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 720px) {
  .billing-scope .detail-grid { grid-template-columns: 1fr; }
  .billing-scope .detail-grid > dd { margin-bottom: var(--space-xs); }
}

/* =====================================================================
   5 bis · LAS TRES DESCARGAS · G10K4-MVP.2C.1
   =====================================================================
   Tres botones, y el más largo —«Descargar PDF propio»— no cabe
   junto a otro en 375 px. El flex-wrap que ya tienen los dejaría en dos
   filas desiguales, con uno suelto y más estrecho que los demás.

   Por debajo de 720 px se apilan a ancho completo: tres objetivos del
   mismo tamaño, que es lo que se pulsa bien con el pulgar. En escritorio
   siguen en fila, como el resto de `form-actions` del módulo.
   ===================================================================== */

@media (max-width: 720px) {
  .billing-scope [data-billing-downloads] {
    flex-direction: column;
    align-items: stretch;
  }
  .billing-scope [data-billing-downloads] .btn { width: 100%; }
}

/* =====================================================================
   6 · TRAZABILIDAD
   ===================================================================== */

.billing-scope .timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-md);
  border-left: 2px solid var(--color-border);
  display: grid;
  gap: var(--space-sm);
}

.billing-scope .timeline > li { position: relative; }

.billing-scope .timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-md) - 5px);
  top: 0.45em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}

.billing-scope .timeline__when {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.billing-scope .timeline__what {
  display: block;
  font-weight: var(--font-weight-medium);
}

.billing-scope .timeline__who {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* =====================================================================
   7 · AVISOS Y LISTAS DE COMPROBACIÓN
   ===================================================================== */

.billing-scope .callout {
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
}

.billing-scope .callout > p { margin: 0; }
.billing-scope .callout > p + p { margin-top: var(--space-xs); }

.billing-scope .callout--warning {
  border-left-color: var(--color-warning);
  background: var(--color-warning-bg);
}

.billing-scope .callout--danger {
  border-left-color: var(--color-danger);
  background: var(--color-danger-bg);
}

.billing-scope .checklist {
  margin: 0;
  padding-left: var(--space-md);
  display: grid;
  gap: 0.2rem;
  font-size: var(--font-size-sm);
}

/* =====================================================================
   8 · CARGA Y PAGINACIÓN
   ===================================================================== */

.billing-scope .skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--space-sm);
}

.billing-scope .skeleton--card {
  height: 4.5rem;
  border-radius: var(--radius-md);
}

.billing-scope .pagination__status {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   9 · NADA DESBORDA EL DOCUMENTO
   ===================================================================== */

.billing-scope table { max-width: 100%; }
.billing-scope img, .billing-scope pre { max-width: 100%; }

/* =====================================================================
   10 · G10K4-MVP.2D.1 · EL ASISTENTE
   ===================================================================== */

/* El buscador del Paso 1. En escritorio el campo y los botones van en
   línea; por debajo de 720 px se apilan a ancho completo, igual que ya
   hacen los tres botones de la ficha desde MVP.2C.1. */
.billing-scope .billing-wizard-search {
  display: grid;
  gap: var(--space-xs);
}

@media (min-width: 720px) {
  .billing-scope .billing-wizard-search {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}

/* La paginación del asistente usa la misma caja que la de la bandeja:
   una sola regla, y no dos que algún día se separen. */
.billing-scope [data-billing-wizard-pagination] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  justify-content: space-between;
}

/* El formulario del importe fiscal. Va dentro de su sección y no se
   escapa del ámbito de facturación. */
.billing-scope .billing-fiscal-form {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

@media (min-width: 720px) {
  .billing-scope .billing-fiscal-form {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: end;
  }
  .billing-scope .billing-fiscal-form > p,
  .billing-scope .billing-fiscal-form > .toolbar {
    grid-column: 1 / -1;
  }
}

/* A 375 px nada se sale: el importe es tabular y los campos no pasan
   del ancho de su caja. */
.billing-scope [data-billing-fiscal-input] {
  font-variant-numeric: tabular-nums;
}

.billing-scope [data-billing-fiscal-form] input,
.billing-scope .billing-wizard-search input {
  max-width: 100%;
}