/* ═══ LA CAPA VIAJA CON LA HOJA ══════════════════════════════════════════════
   Esta hoja declara su @layer adentro, así cae en su capa se cargue como se
   cargue (lo que no tiene capa le gana a todo lo que la tiene), y el <head>
   puede usar <link> (paralelo; un fallo se ve en Network) en vez de @import
   (serial, bloqueante y falla en silencio).
   ═════════════════════════════════════════════════════════════════════════ */
@layer lib {
/*
 * Cy · the look of the composite components, global and not scoped: markup drawn outside the component (the ZHub
 * Studio preview, a PDF, a .guiz screen) gets the same data table header and empty state as the app.
 */

/* ── Cy · the DATA TABLE header ────────────────────────────────────────────────────────────────────────── */
/* CyDataTable — orquesta la tabla + paginado. Sólo tokens --mx-*.
   El skin de celdas (th/td) viene de wwwroot/cx-tables.css (global). */
.cy-datatable {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-2);
}

/* encabezado: contenido + indicador de orden */
.cy-datatable__th {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-1);
}
.cy-datatable__th--sortable {
    cursor: pointer;
    user-select: none;
}
.cy-datatable__sort {
    color: var(--mx-color-primary);
    font-size: var(--mx-text-xs);
}

/* alineación de celdas */
.cy-datatable__cell--center { text-align: center; }
.cy-datatable__cell--end { text-align: right; }

/* columna de acciones: no parte líneas */
.cy-datatable__actions { white-space: nowrap; }

/* estado de carga dentro del cuerpo */
.cy-datatable__loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--mx-space-2);
    padding: var(--mx-space-4);
    color: var(--mx-color-text-muted);
}

/* pie con la paginación a la derecha */
.cy-datatable__foot {
    display: flex;
    justify-content: flex-end;
}
.cy-datatable__sort-button { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; cursor: pointer; }
.cy-datatable__sort-button:hover { color: var(--mx-color-primary); }
.cy-datatable__sort-button:focus-visible { outline: 2px solid var(--mx-color-primary); outline-offset: 3px; border-radius: 3px; }

/* ── Cy · the EMPTY STATE ──────────────────────────────────────────────────────────────────────────────── */
/* CyEmptyState — estado vacío centrado. Sólo tokens --mx-*; dark resuelto por tokens. */
.cy-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--mx-space-3);
    padding: var(--mx-space-8) var(--mx-space-4);
    color: var(--mx-color-text-muted);
}

/* densidad */
.cy-empty--xs { padding: var(--mx-space-4) var(--mx-space-3); gap: var(--mx-space-2); }
.cy-empty--sm { padding: var(--mx-space-5) var(--mx-space-3); gap: var(--mx-space-2); }
.cy-empty--lg { padding: var(--mx-space-12) var(--mx-space-6); }
.cy-empty--xl { padding: var(--mx-space-16) var(--mx-space-8); }

.cy-empty__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mx-color-text-subtle, var(--mx-color-text-muted));
}

.cy-empty__title {
    margin: 0;
    font-size: var(--mx-text-base);
    font-weight: var(--mx-font-weight-semibold);
    color: var(--mx-color-text);
}
.cy-empty--sm .cy-empty__title,
.cy-empty--xs .cy-empty__title { font-size: var(--mx-text-sm); }
.cy-empty--lg .cy-empty__title,
.cy-empty--xl .cy-empty__title { font-size: var(--mx-text-lg); }

.cy-empty__desc {
    margin: 0;
    font-size: var(--mx-text-sm);
    color: var(--mx-color-text-muted);
    max-width: 44ch;
    line-height: var(--mx-line-height-normal, 1.5);
}

.cy-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--mx-space-2);
    margin-top: var(--mx-space-2);
}

}