/* =============================================================================
   SABORA · UTILIDADES
   -----------------------------------------------------------------------------
   Conjunto pequeño y cerrado de clases para lo que se repetía una y otra vez
   como `style="..."` dentro de los .razor: filas flexibles, separaciones,
   tamaños de texto y colores semánticos.

   Regla: si algo se necesita más de tres veces y no es un componente, entra
   aquí. Si es visual de una pantalla concreta, va a css/pages/. Nunca vuelva a
   escribirse un color en crudo dentro de un atributo style.

   Se carga la última para poder ajustar puntualmente a un componente.
   ========================================================================== */

/* Nota sobre la especificidad
   -----------------------------------------------------------------------------
   Las utilidades que sustituyen a un atributo `style=` llevan el nombre de clase
   repetido en el selector (.sb-c-muted.sb-c-muted). Un estilo en línea gana a
   cualquier regla; al sacarlo del marcado, una regla de pantalla podía pasar a
   imponerse y cambiar el aspecto sin que nadie lo pidiera. Duplicar la clase
   sube la especificidad lo justo para conservar la intención original sin
   recurrir a !important, que es precisamente lo que había envenenado la hoja.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------- Estructura */
.sb-row      { display: flex; align-items: center; gap: var(--sb-space-2); }
.sb-row--tight { gap: var(--sb-space-1); }
.sb-row--md  { gap: var(--sb-space-3); }
.sb-row--lg  { gap: var(--sb-space-4); }
.sb-row--wrap { flex-wrap: wrap; }
.sb-row--between { justify-content: space-between; }
.sb-row--end { justify-content: flex-end; }
.sb-row--center { justify-content: center; }
.sb-row--top { align-items: flex-start; }

.sb-col      { display: flex; flex-direction: column; min-width: 0; }
.sb-col--gap-1 { gap: var(--sb-space-1); }
.sb-col--gap-2 { gap: var(--sb-space-2); }
.sb-col--gap-3 { gap: var(--sb-space-3); }
.sb-col--gap-4 { gap: var(--sb-space-4); }

.sb-grow.sb-grow     { flex: 1; min-width: 0; }
.sb-shrink-0 { flex-shrink: 0; }
.sb-push.sb-push     { margin-left: auto; }
.sb-hidden.sb-hidden   { display: none; }
.sb-block    { display: block; }
.sb-inline-flex { display: inline-flex; align-items: center; gap: var(--sb-space-2); }

/* Contenedor estándar de página: todas las pantallas deben usarlo para que el
   ancho máximo y los márgenes sean idénticos en toda la aplicación. */
.sb-page {
    width: 100%;
    max-width: var(--sb-container-max);
    margin-inline: auto;
    padding: var(--sb-space-6) var(--sb-space-5) var(--sb-space-16);
}
@media (max-width: 1024px) {
    .sb-page { padding: var(--sb-space-4) var(--sb-space-3) var(--sb-space-12); }
}

/* Rejillas de uso frecuente (KPIs, filtros, formularios de dos columnas). */
.sb-grid { display: grid; gap: var(--sb-space-4); }
.sb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sb-grid--auto { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 1024px) {
    .sb-grid--3, .sb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .sb-grid--2, .sb-grid--3, .sb-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

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

.sb-p-3.sb-p-3 { padding: var(--sb-space-3); }
.sb-p-4.sb-p-4 { padding: var(--sb-space-4); }
.sb-p-5.sb-p-5 { padding: var(--sb-space-5); }
.sb-p-6.sb-p-6 { padding: var(--sb-space-6); }
.sb-pt-3.sb-pt-3 { padding-top: var(--sb-space-3); }

/* --------------------------------------------------------------- Tipografía */
.sb-text-2xs { font-size: var(--sb-text-2xs); }
.sb-text-xs  { font-size: var(--sb-text-xs); }
.sb-text-sm  { font-size: var(--sb-text-sm); }
.sb-text-md  { font-size: var(--sb-text-md); }
.sb-text-lg  { font-size: var(--sb-text-lg); }
.sb-text-xl  { font-size: var(--sb-text-xl); }

.sb-fw-medium.sb-fw-medium   { font-weight: var(--sb-weight-medium); }
.sb-fw-semibold.sb-fw-semibold { font-weight: var(--sb-weight-semibold); }
.sb-fw-bold.sb-fw-bold     { font-weight: var(--sb-weight-bold); }
.sb-fw-black.sb-fw-black    { font-weight: var(--sb-weight-black); }

.sb-text-center.sb-text-center { text-align: center; }
.sb-text-right.sb-text-right  { text-align: right; }

/* Etiqueta corta en mayúsculas: el patrón repetido de "eyebrow" de las fichas. */
.sb-eyebrow {
    font-size: var(--sb-text-2xs);
    font-weight: var(--sb-weight-black);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sb-text-subtle);
}

/* Corta el texto con puntos suspensivos sin romper la rejilla. */
.sb-truncate { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ------------------------------------------------------------------ Colores
   Sólo alias semánticos. Ningún literal hexadecimal en el marcado. */
.sb-c-text.sb-c-text    { color: var(--sb-text); }
.sb-c-strong.sb-c-strong  { color: var(--sb-text-strong); }
.sb-c-muted.sb-c-muted   { color: var(--sb-text-muted); }
.sb-c-subtle.sb-c-subtle  { color: var(--sb-text-subtle); }
.sb-c-brand.sb-c-brand   { color: var(--sb-brand); }
.sb-c-success.sb-c-success { color: var(--sb-success-text); }
.sb-c-danger.sb-c-danger  { color: var(--sb-danger-text); }
.sb-c-warning.sb-c-warning { color: var(--sb-warning-text); }
.sb-c-info.sb-c-info    { color: var(--sb-info-text); }
.sb-c-inverse.sb-c-inverse { color: var(--sb-text-on-inverse); }

.sb-bg-surface { background: var(--sb-surface); }
.sb-bg-subtle  { background: var(--sb-surface-subtle); }
.sb-bg-muted   { background: var(--sb-surface-muted); }
.sb-bg-brand   { background: var(--sb-brand-surface); }

/* --------------------------------------------------------------- Superficie */
.sb-rounded    { border-radius: var(--sb-radius-lg); }
.sb-rounded-xl { border-radius: var(--sb-radius-xl); }
.sb-bordered   { border: 1px solid var(--sb-border); }
.sb-shadow     { box-shadow: var(--sb-shadow-sm); }

/* ------------------------------------------------------------- Responsividad */
.sb-hide-mobile { }
@media (max-width: 768px) {
    .sb-hide-mobile { display: none !important; }
}
.sb-only-mobile { display: none; }
@media (max-width: 768px) {
    .sb-only-mobile { display: initial; }
}

/* Cualquier contenido ancho (tablas, gráficos) debe desplazarse dentro de su
   caja, nunca hacer que se desplace la página entera. */
.sb-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }