/* ============================================================
   Synapse — Utilidades
   Se cargan al final: ganan sobre los componentes.
   El número de las clases de espaciado es el PASO de la escala
   (tokens.css), no píxeles: .mt-2 = var(--space-2) = 8px.
   ============================================================ */

/* ── Tonos: asignan --tone a los componentes marcados [tone] ── */
.tone-accent    { --tone: var(--accent); }
.tone-danger    { --tone: var(--danger); }
.tone-warning   { --tone: var(--warning); }
.tone-success   { --tone: var(--success); }
.tone-info      { --tone: var(--info); }
.tone-primary   { --tone: var(--text-primary); }
.tone-secondary { --tone: var(--text-secondary); }
.tone-muted     { --tone: var(--text-muted); }

/* Prioridad de tarea (valores de la BD: alta | media | baja) */
.tone-alta  { --tone: var(--prioridad-alta); }
.tone-media { --tone: var(--prioridad-media); }
.tone-baja  { --tone: var(--prioridad-baja); }

/* Estado de tarea (todo | in_progress | in_review | done) */
.tone-todo        { --tone: var(--estado-todo); }
.tone-in_progress { --tone: var(--estado-in-progress); }
.tone-in_review   { --tone: var(--estado-in-review); }
.tone-done        { --tone: var(--estado-done); }

/* Estado de pago de informes (en_curso | pendiente_pago | pagado) */
.tone-en_curso       { --tone: var(--pago-en-curso); }
.tone-pendiente_pago { --tone: var(--pago-pendiente); }
.tone-pagado         { --tone: var(--pago-pagado); }

/* Presencia (verde | rojo | gris) */
.tone-verde { --tone: var(--presencia-verde); }
.tone-rojo  { --tone: var(--presencia-rojo); }
.tone-gris  { --tone: var(--presencia-gris); }

/* Colorea el texto con el tono asignado */
.text-tone { color: var(--tone, inherit); }

/* ── Visibilidad ─────────────────────────────────────────── */
.hidden { display: none !important; }
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Color de texto ──────────────────────────────────────── */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-accent    { color: var(--accent); }
.text-danger    { color: var(--danger); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }

/* ── Tipografía ──────────────────────────────────────────── */
.fs-xs  { font-size: var(--fs-xs); }
.fs-sm  { font-size: var(--fs-sm); }

.fw-700 { font-weight: var(--fw-bold); }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Espaciado ───────────────────────────────────────────── */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* ── Layout ──────────────────────────────────────────────── */
/* Pila vertical */
.stack     { --stack-gap: var(--space-4); display: flex; flex-direction: column; gap: var(--stack-gap); }
.stack--xs { --stack-gap: var(--space-1); }
.stack--sm { --stack-gap: var(--space-2); }
.stack--md { --stack-gap: var(--space-3); }
.stack--lg { --stack-gap: var(--space-6); }

/* Fila que se envuelve (botones, filtros, chips) */
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.d-inline     { display: inline; }