/* =======================================
   UTILIDADES PERSONALIZADAS
   Nota: Bootstrap 5 ya provee flex, text-center,
   gap-*, m-*, p-* etc. Solo definir lo que
   no existe en Bootstrap o es específico del proyecto.
   ======================================= */

/* Colores de texto con variables propias */
.text-primary-custom  { color: var(--primary)  !important; }
.text-muted-custom    { color: var(--text-muted) !important; }
.text-light-custom    { color: var(--text-light)  !important; }

/* Background personalizado */
.bg-surface   { background-color: var(--surface)   !important; }
.bg-app       { background-color: var(--background) !important; }
.bg-alt       { background-color: var(--background-alt) !important; }

/* Sombras adicionales */
.shadow-custom-sm { box-shadow: var(--shadow-sm); }
.shadow-custom    { box-shadow: var(--shadow);    }
.shadow-custom-md { box-shadow: var(--shadow-md); }
.shadow-custom-lg { box-shadow: var(--shadow-lg); }

/* Bordes redondeados con variables propias */
.rounded-custom    { border-radius: var(--border-radius)    !important; }
.rounded-custom-lg { border-radius: var(--border-radius-lg) !important; }
.rounded-custom-xl { border-radius: var(--border-radius-xl) !important; }

/* Truncar texto */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Transición estándar */
.transition { transition: all var(--transition); }

/* Separador horizontal */
.divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 1rem 0;
}

/* Badge de estado de solicitudes */
.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    white-space: nowrap;
}