/**
 * LIST PAGE — primitivo de layout para pantallas de lista (contrato: docs/contrato-list-page.md).
 *
 * Estructura: encabezado (eyebrow + título + acciones) · resumen (tarjetas) ·
 * barra de filtros · tabla (table-container, ver table-responsive.css) · estados.
 * Se renderiza con ListPage.render() (assets/js/list-page.js). Solo tokens de
 * design-tokens.css: nada de colores ni tamaños sueltos fuera de las variantes `tone`.
 */
.lp-header { display:flex; justify-content:space-between; align-items:flex-start; gap:1.5rem; margin-bottom:1.25rem; flex-wrap:wrap; }
.lp-header h1 { margin:.15rem 0 .25rem; color:var(--gray-900); letter-spacing:-.03em; }
.lp-header p { margin:0; color:var(--gray-500); font-size:.9rem; }
/* El bloque de título cede ancho para que las acciones queden a la derecha; en pantallas angostas pasan debajo */
.lp-header > div:first-child { flex:1 1 320px; min-width:0; }
.lp-actions { flex:none; }
.lp-eyebrow { color:var(--primary-600); font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.lp-actions { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.lp-actions .btn { display:inline-flex; align-items:center; gap:6px; }

.lp-overview { display:grid; grid-template-columns:repeat(var(--lp-cols, 4), minmax(0,1fr)); gap:.8rem; margin-bottom:1.25rem; }
.lp-card { display:flex; align-items:center; gap:.75rem; padding:1rem 1.1rem; min-width:0; background:var(--surface-card); border:1px solid var(--surface-border); border-radius:var(--radius-lg); box-shadow:0 2px 8px rgba(15,23,42,.04); }
.lp-card > span { display:grid; place-items:center; flex:none; width:2.35rem; height:2.35rem; border-radius:.75rem; color:#0284c7; background:#e0f2fe; }
.lp-card strong, .lp-card small { display:block; }
.lp-card strong { color:var(--gray-900); font-size:1.25rem; line-height:1.15; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; }
.lp-card small { color:var(--gray-500); font-size:.72rem; margin-top:.18rem; }
.lp-card--green > span  { color:#059669; background:#d1fae5; }
.lp-card--violet > span { color:#7c3aed; background:#ede9fe; }
.lp-card--amber > span  { color:#b45309; background:#fef3c7; }
.lp-card--red > span    { color:#dc2626; background:#fee2e2; }
.lp-card--red strong    { color:#dc2626; }

.lp-toolbar { display:flex; gap:.75rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap; padding:.75rem; background:var(--surface-card); border:1px solid var(--surface-border); border-radius:var(--radius-md); }
.lp-search { position:relative; flex:1; min-width:220px; max-width:400px; }
.lp-search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--gray-400); pointer-events:none; }
.lp-search input { padding-left:34px; width:100%; }
.lp-toolbar select { width:auto; min-width:130px; }
.lp-count { font-size:.82rem; color:var(--gray-500); white-space:nowrap; }
/* Barra integrada: buscador, filtros y controles de la tabla en una sola franja pegada a la tabla */
.lp-toolbar--en-tabla { gap:.5rem; margin-bottom:0; padding:.5rem .75rem; border-bottom:0; border-radius:var(--radius-md) var(--radius-md) 0 0; }
.lp-toolbar--en-tabla .table-view-toggle { flex:0 1 auto; width:auto; margin:0 0 0 auto; padding:0; border:0; gap:var(--space-2); }
.lp-toolbar--en-tabla + .table-container { margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }
.lp-toolbar--en-tabla .lp-search { flex:1 1 200px; min-width:160px; }
/* Controles solo con ícono para caber en una línea; su nombre sigue en title y aria-label */
.lp-toolbar--en-tabla .table-export-btn > span,
.lp-toolbar--en-tabla .table-view-toggle__group button > span { display:none; }
@media (max-width: 767px) {
    .lp-toolbar--en-tabla .lp-search { flex:1 1 100%; max-width:none; }
    .lp-toolbar--en-tabla select { flex:1 1 40%; min-width:0; }
    .lp-toolbar--en-tabla .table-view-toggle { flex-wrap:nowrap; justify-content:flex-end; }
}

/* table-responsive.css fuerza white-space:normal !important en todas las celdas: las numéricas necesitan excepción explícita */
.lp-table table td.num, .lp-table table th.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap !important; }
.lp-table td small { color:var(--gray-500); }
.lp-tag { display:inline-flex; align-items:center; gap:4px; padding:var(--space-1) var(--space-2); border:1px solid transparent; border-radius:var(--radius-md); font-size:.72rem; font-weight:600; white-space:nowrap; background:var(--gray-50); color:var(--gray-600); border-color:var(--surface-border); }
.lp-tag--green { background:var(--badge-aprobada-bg); color:var(--badge-aprobada-text); border-color:var(--badge-aprobada-border); }
.lp-tag--amber { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.lp-tag--orange { background:#fff7ed; color:#c2410c; border-color:#fed7aa; }
.lp-tag--red { background:#fef2f2; color:#dc2626; border-color:#fecaca; }

.lp-state { padding:3rem 1rem; text-align:center; color:var(--gray-500); background:var(--surface-card); border:1px solid var(--surface-border); border-radius:var(--radius-md); }
.lp-state strong { display:block; color:var(--gray-900); margin-bottom:4px; }
.lp-state--error strong { color:#dc2626; }
.lp-state .btn { margin-top:12px; }

@media (max-width: 800px) { .lp-overview { grid-template-columns:repeat(2,minmax(0,1fr)); } .lp-actions { flex:1 1 100%; justify-content:flex-start; } .lp-actions .btn { max-width:100%; } }
@media (max-width: 480px) { .lp-overview { gap:.55rem; } .lp-card { flex-direction:column; align-items:flex-start; gap:.5rem; padding:.75rem; } .lp-card strong { font-size:1rem; } .lp-card small { font-size:.65rem; } }