/* @overa/ui-kit 0.6.2 · lists.css — lo que pintan list-view.js y charts.js y
   que app.css (el de app-tradeinsight) no tiene. Va en su propio fichero (en
   0.6.0 estaba en portal.css) para que lo cargue cualquier app, use o no el
   portal.css del kit: app-sign tiene el suyo. Detrás de app.css:

     <link rel="stylesheet" href="/kit/<versión>/css/lists.css">

   Cómo se usa todo esto: UI-GUIDE.md. */
/* ── Listados y cabeceras con gráficas, como app-tradeinsight ─────────────
   list-view.js y charts.js pintan con las clases de app.css (.card, .filter-bar,
   .filter-panel, .pager, .data-table, .kebab-btn, .row-menu, .wealth-readings,
   .wealth-charts); aquí sólo va lo que app.css no tiene. Una sección con un
   listado usa el ancho de tradeinsight (las tablas lo necesitan). */
.pt-main:has([data-list-view]) { --pt-page-max: var(--content-max, 1600px); }
.pt-list-count { font-weight: 400; font-size: var(--fs-sm); color: var(--dim); }
.pt-actions-col { width: 40px; text-align: right; }
.pt-table-empty td { text-align: center; }
[data-list-view] .filter-bar { margin-bottom: 10px; }
[data-list-view] .pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
[data-list-view] .hint { margin: -6px 0 10px; }
table.data-table td .pt-cell-note { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--dim); max-width: 60ch; }

.pt-chart-svg { width: 100%; min-width: 320px; height: auto; display: block; }
.pt-chart-bar:hover rect:not(.pt-chart-hit) { opacity: .82; }
.pt-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: var(--fs-xs); color: var(--dim); }
.pt-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.pt-legend-item strong { color: var(--tx); }
.pt-legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }

.pt-share { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.pt-share-row { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.pt-share-label { overflow-wrap: anywhere; }
.pt-share-track { height: 10px; border-radius: 5px; background: var(--bg3); overflow: hidden; }
.pt-share-fill { display: block; height: 100%; border-radius: 5px; }
.pt-share-value { white-space: nowrap; color: var(--dim); font-variant-numeric: tabular-nums; }
.pt-share-value strong { color: var(--tx); }
@media (max-width: 520px) {
  .pt-share-row { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-share-track { grid-column: 1 / -1; grid-row: 2; }
}

.pt-period { display: inline-flex; gap: 4px; }
.pt-period .btn[aria-pressed="true"] { border-color: var(--a); background: var(--a-soft); color: var(--a2); }
.pt-head-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pt-head-row .card-title { margin-bottom: 0; }
/* Con ratón y pantalla ancha, el paginador con la medida de tradeinsight; en el móvil o al
   tacto, todo lo que se pulsa mide al menos 44 × 44 px (0.6.2: lo mide app-sign a 360 px). */
@media (pointer: fine) and (min-width: 761px) {
  .pt-body [data-list-view] .pager .btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
  .pt-body .pt-period .btn-sm { min-height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
}
/* En el móvil (las tablas son tarjetas desde 760 px, app.css): el ⋮ a la derecha y sin fondo, y
   el texto largo de una celda debajo de su insignia, a todo el ancho. */
@media (max-width: 760px) {
  table.data-table td.pt-actions-col { justify-content: flex-end; background: none; padding-top: 0; }
  table.data-table td:has(.pt-cell-note) { flex-wrap: wrap; }
  table.data-table td .pt-cell-note { flex-basis: 100%; max-width: none; text-align: left; }
}
@media (max-width: 760px), (pointer: coarse) {
  [data-list-view] .filter-toggle,
  [data-list-view] .pager .btn,
  .pt-period .btn,
  .filter-panel .filter-close { height: auto; min-height: 44px; min-width: 44px; }
  [data-list-view] .pager-size { height: auto; min-height: 44px; }
  table.data-table .kebab-btn { width: 44px; height: 44px; flex: none; font-size: 20px; }
  table.data-table td.pt-actions-col { width: auto; }
}