/**
 * Filtered legacy utility compatibility.
 * Curated from utilities.css: Bootstrap collisions and active duplicate selectors removed.
 * Do not add rules here; migrate consumers to Bootstrap or gaia-* components.
 */

/**
 * ============================================
 * MSI STUDIO DESIGN SYSTEM - UTILITIES
 * ============================================
 *
 * Sistema completo de utility classes estilo Tailwind.
 * Incluye utilities para spacing, colors, typography, layout, etc.
 *
 * Debe importarse al final, después de todos los otros archivos.
 */

/* ============================================
   TEXT COLOR UTILITIES
   ============================================ */

/* Brand colors */

/* Neutral colors */

/* Status colors */

/* ============================================
   BACKGROUND COLOR UTILITIES
   ============================================ */

/* Brand colors */

/* Neutral backgrounds */

/* Transparent */

/* ============================================
   BORDER UTILITIES
   ============================================ */
.border-2 { border: 2px solid var(--border-primary) !important; }

.border-t { border-top: 1px solid var(--border-primary) !important; }
.border-r { border-right: 1px solid var(--border-primary) !important; }
.border-b { border-bottom: 1px solid var(--border-primary) !important; }
.border-l { border-left: 1px solid var(--border-primary) !important; }

/* Border colors */
.border-error { border-color: var(--border-error) !important; }

/* Border radius */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }

/* ============================================
   SPACING UTILITIES - MARGIN
   ============================================ */

/* Margin Top */

/* Margin Right */

/* Margin Bottom */

/* Margin Left */

/* Margin X (horizontal) */

/* Margin Y (vertical) */

/* ============================================
   SPACING UTILITIES - PADDING
   ============================================ */

/* Padding Top */

/* Padding Right */

/* Padding Bottom */

/* Padding Left */

/* Padding X (horizontal) */

/* Padding Y (vertical) */

/* ============================================
   DISPLAY UTILITIES
   ============================================ */

/* ============================================
   FLEXBOX UTILITIES
   ============================================ */

.flex { display: flex !important; }
.inline-flex { display: inline-flex !important; }

/* Flex Direction */
.flex-col { flex-direction: column !important; }
.flex-col-reverse { flex-direction: column-reverse !important; }

/* Flex Wrap */

/* Justify Content */
.justify-start { justify-content: flex-start !important; }
.justify-end { justify-content: flex-end !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.justify-evenly { justify-content: space-evenly !important; }

/* Align Items */
.items-start { align-items: flex-start !important; }
.items-end { align-items: flex-end !important; }
.items-center { align-items: center !important; }
.items-baseline { align-items: baseline !important; }
.items-stretch { align-items: stretch !important; }

/* Align Self */
.self-auto { align-self: auto !important; }
.self-start { align-self: flex-start !important; }
.self-end { align-self: flex-end !important; }
.self-center { align-self: center !important; }
.self-stretch { align-self: stretch !important; }

/* Flex Grow & Shrink */
.flex-1 { flex: 1 1 0% !important; }
.flex-auto { flex: 1 1 auto !important; }
.flex-none { flex: none !important; }

.grow { flex-grow: 1 !important; }
.grow-0 { flex-grow: 0 !important; }
.shrink { flex-shrink: 1 !important; }
.shrink-0 { flex-shrink: 0 !important; }

/* Gap */
.gap-6 { gap: var(--spacing-24) !important; }
.gap-8 { gap: var(--spacing-32) !important; }

/* ============================================
   TEXT ALIGNMENT & DECORATION
   ============================================ */

.underline { text-decoration: underline !important; }
.line-through { text-decoration: line-through !important; }
.no-underline { text-decoration: none !important; }

/* Font Weight */
.font-regular { font-weight: var(--font-weight-regular) !important; }
.font-demi { font-weight: var(--font-weight-demi-bold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }

/* ============================================
   SIZING UTILITIES
   ============================================ */

/* Width */
.w-full { width: 100% !important; }
.w-screen { width: 100vw !important; }

/* Height */
.h-full { height: 100% !important; }
.h-screen { height: 100vh !important; }

/* Min/Max Width */
.min-w-0 { min-width: 0 !important; }
.min-w-full { min-width: 100% !important; }
.max-w-full { max-width: 100% !important; }
.max-w-screen { max-width: 100vw !important; }

/* Min/Max Height */
.min-h-0 { min-height: 0 !important; }
.min-h-full { min-height: 100% !important; }
.min-h-screen { min-height: 100vh !important; }
.max-h-full { max-height: 100% !important; }
.max-h-screen { max-height: 100vh !important; }

/* ============================================
   POSITION UTILITIES
   ============================================ */

.static { position: static !important; }
.relative { position: relative !important; }
.absolute { position: absolute !important; }
.fixed { position: fixed !important; }
.sticky { position: sticky !important; }

/* ============================================
   OVERFLOW UTILITIES
   ============================================ */

/* ============================================
   SHADOW UTILITIES
   ============================================ */

/* ============================================
   VISIBILITY UTILITIES
   ============================================ */

/* ============================================
   CURSOR UTILITIES
   ============================================ */

.cursor-auto { cursor: auto !important; }
.cursor-pointer { cursor: pointer !important; }
.cursor-not-allowed { cursor: not-allowed !important; }

/* ============================================
   POINTER EVENTS
   ============================================ */

.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

/* ============================================
   ADDITIONAL UTILITIES - Inline Styles Replacement
   ============================================

   Las siguientes clases fueron creadas para reemplazar estilos inline
   repetidos en archivos .cshtml, mejorando la mantenibilidad y
   cumplimiento del sistema de diseño.

   Auditoría: 2025-11-12
   Propósito: Eliminar 86+ instancias de estilos inline
   ============================================ */

/* ============================================
   TOAST/NOTIFICATION POSITIONING
   ============================================ */

/**
 * .toast-notification
 * Posicionamiento fijo para notificaciones toast en la esquina superior derecha.
 * Reemplaza: style="top: 20px; right: 20px; z-index: 1050; min-width: 300px;"
 */
.toast-notification {
  position: fixed !important;
  top: var(--spacing-20) !important; /* 1.25rem = 20px */
  right: var(--spacing-20) !important; /* 1.25rem = 20px */
  z-index: 1050 !important;
  min-width: 18.75rem !important; /* 300px */
}

/**
 * .toast-notification-high
 * Toast notification con prioridad más alta (z-index: 1051).
 * Reemplaza: style="top: 20px; right: 20px; z-index: 1051; min-width: 300px;"
 * Usado en: Timesheets/EditMultiple.cshtml (JavaScript)
 */
.toast-notification-high {
  position: fixed !important;
  top: var(--spacing-20) !important; /* 1.25rem = 20px */
  right: var(--spacing-20) !important; /* 1.25rem = 20px */
  z-index: 1051 !important;
  min-width: 18.75rem !important; /* 300px */
}

/* ============================================
   PROGRESS BAR VARIANTS
   ============================================ */

/**
 * .progress-sm
 * Progress bar de altura pequeña (8px).
 * Reemplaza: style="height: 8px;"
 */

/* ============================================
   SCROLL CONTAINERS
   ============================================ */

/**
 * .scroll-container-sm, .scroll-container-md, .scroll-container-lg
 * Contenedores con altura máxima y scroll vertical automático.
 * Reemplaza: style="max-height: 200px; overflow-y: auto;"
 */
.scroll-container-sm {
  max-height: 12.5rem !important; /* 200px */
  overflow-y: auto !important;
}

.scroll-container-md {
  max-height: 25rem !important; /* 400px */
  overflow-y: auto !important;
}

.scroll-container-lg {
  max-height: 37.5rem !important; /* 600px */
  overflow-y: auto !important;
}

/* ============================================
   MINIMUM HEIGHTS
   ============================================ */

/**
 * .min-h-sm, .min-h-md
 * Alturas mínimas para contenedores.
 * Reemplaza: style="min-height: 100px;" o style="min-height: 200px;"
 */
.min-h-sm {
  min-height: 6.25rem !important; /* 100px */
}

.min-h-md {
  min-height: 12.5rem !important; /* 200px */
}

/* ============================================
   AVATAR SIZES
   ============================================ */

/**
 * .avatar-xl
 * Avatar extra grande (80x80px).
 * Reemplaza: style="width: 80px; height: 80px;"
 */
.avatar-xl {
  width: 5rem !important; /* 80px */
  height: 5rem !important; /* 80px */
  flex-shrink: 0 !important;
}

/* ============================================
   SPECIFIC WIDTHS
   ============================================ */

/**
 * .w-60, .w-180
 * Anchos específicos para columnas de tablas y elementos.
 * Reemplaza: style="width: 60px;" o style="width: 180px;"
 */
.w-60 {
  width: 3.75rem !important; /* 60px */
}

.w-120 {
  width: 7.5rem !important; /* 120px - Columna de acciones en tablas */
}

.w-180 {
  width: 11.25rem !important; /* 180px */
}

/**
 * .min-w-select
 * Ancho mínimo para elementos select.
 * Reemplaza: style="min-width: 150px;"
 */
.min-w-select {
  min-width: 9.375rem !important; /* 150px */
}

/**
 * .min-w-300
 * Ancho mínimo de 300px para toast notifications y modales pequeños.
 * Reemplaza: style="min-width: 300px;"
 * Usado en: BookRoom/Index.cshtml (toast notifications)
 */
.min-w-300 {
  min-width: 18.75rem !important; /* 300px */
}

/* ============================================
   ADDITIONAL MARGIN UTILITIES
   ============================================ */

/* Note: .mt-6, .ml-1, and .mb-2 duplicates removed - use design system token values defined above */

/**
 * .mt-30
 * Margin top de 30px (1.875rem).
 * Reemplaza: style="margin-top: 30px;"
 * Usado en: ProjectCalculator/Index.cshtml (líneas 151, 413)
 */

/* ============================================
   ICON SIZES
   ============================================ */

/**
 * .icon-3xl, .icon-4xl, .icon-5xl
 * Tamaños de iconos grandes para estados vacíos y elementos decorativos.
 * Reemplaza: style="font-size: 3rem;", style="font-size: 4rem;", style="font-size: 5rem;"
 * Usado en: Admin/Index.cshtml, Admin/RoleDetails.cshtml (12+ instancias)
 */

/**
 * .icon-3xl
 * Tamaño de icono 48px (3rem) - Iconos grandes decorativos.
 */
.icon-3xl {
  font-size: var(--font-size-icon-3xl) !important; /* 48px */
  line-height: 1 !important;
}

/**
 * .icon-4xl
 * Tamaño de icono 64px (4rem) - Iconos extra grandes para estados vacíos.
 */
.icon-4xl {
  font-size: var(--font-size-icon-4xl) !important; /* 64px */
  line-height: 1 !important;
}

/**
 * .icon-5xl
 * Tamaño de icono 80px (5rem) - Iconos máximos para heros y estados vacíos principales.
 */
.icon-5xl {
  font-size: var(--font-size-icon-5xl) !important; /* 80px */
  line-height: 1 !important;
}

/* ============================================
   NUEVAS UTILITIES - Sesión 3 (2025-11-12)
   ============================================

   Clases adicionales para completar la refactorización de estilos inline.
   Total: ~50 nuevas clases para cubrir patrones identificados en 189 instancias.
   ============================================ */

/* ============================================
   ICON/SVG DIMENSIONS - Tamaños pequeños
   ============================================ */

/**
 * .icon-xs
 * Tamaño de icono/SVG 12px (0.75rem).
 * Reemplaza: style="width: 12px; height: 12px;" o style="font-size: 12px;"
 */

/**
 * .icon-sm
 * Tamaño de icono/SVG 16px (1rem).
 * Reemplaza: style="width: 16px; height: 16px;" o style="font-size: 16px;"
 * Usado en: Shared/_LoginPartial.cshtml (múltiples iconos dropdown)
 */

/**
 * .icon-md
 * Tamaño de icono/SVG 18px (1.125rem).
 * Reemplaza: style="width: 18px; height: 18px;" o style="font-size: 18px;"
 * Usado en: Shared/_LoginPartial.cshtml (iconos principales)
 */

/**
 * .icon-lg
 * Tamaño de icono/SVG 24px (1.5rem).
 * Reemplaza: style="width: 24px; height: 24px;" o style="font-size: 24px;"
 */

/**
 * .icon-xl
 * Tamaño de icono/SVG 32px (2rem).
 * Reemplaza: style="width: 32px; height: 32px;" o style="font-size: 32px;"
 */

/**
 * .icon-2xl
 * Tamaño de icono/SVG 40px (2.5rem).
 * Reemplaza: style="width: 40px; height: 40px;" o style="font-size: 40px;"
 */
.icon-2xl {
  width: var(--font-size-icon-2xl) !important; /* 40px */
  height: var(--font-size-icon-2xl) !important;
  font-size: var(--font-size-icon-2xl) !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* ============================================
   TABLE COLUMN WIDTHS - Anchos porcentuales
   ============================================ */

/**
 * Clases para anchos de columnas de tabla en porcentajes.
 * Reemplaza: style="width: X%"
 * Usado en: ProjectBudget/*.cshtml (múltiples tablas)
 *
 * IMPORTANTE: Usar !important para forzar ancho en columnas <th> y <td>.
 */

.w-2-percent { width: 2% !important; }
.w-4-percent { width: 4% !important; }
.w-5-percent { width: 5% !important; }
.w-8-percent { width: 8% !important; }
.w-9-percent { width: 9% !important; }
.w-10-percent { width: 10% !important; }
.w-15-percent { width: 15% !important; }
.w-20-percent { width: 20% !important; }
.w-25-percent { width: 25% !important; }
.w-30-percent { width: 30% !important; }
.w-40-percent { width: 40% !important; }

/* ============================================
   SPECIFIC DIMENSIONS - Dimensiones específicas
   ============================================ */

/**
 * Anchos específicos en rem (convertidos de píxeles).
 * Reemplaza: style="width: Xpx;"
 */

.w-250 { width: 15.625rem !important; } /* 250px */
.w-260 { width: 16.25rem !important; } /* 260px - Projects/Index.cshtml dropdown */
.w-450 { width: 28.125rem !important; } /* 450px */
.w-600 { width: 37.5rem !important; } /* 600px */

/**
 * Anchos mínimos específicos en rem.
 * Reemplaza: style="min-width: Xpx;"
 */

.min-w-250 { min-width: 15.625rem !important; } /* 250px - Shared/_LoginPartial.cshtml dropdown */

/**
 * Anchos máximos específicos en rem.
 * Reemplaza: style="max-width: Xpx;"
 */

.max-w-200 { max-width: 12.5rem !important; } /* 200px - Shared/Timesheets/_Timesheets.cshtml */
.max-w-300 { max-width: 18.75rem !important; } /* 300px */
.max-w-450 { max-width: 28.125rem !important; } /* 450px */
.max-w-600 { max-width: 37.5rem !important; } /* 600px */

/**
 * Alturas específicas en rem.
 * Reemplaza: style="height: Xpx;"
 */

.h-300 { height: 18.75rem !important; } /* 300px - Projects/Edit.cshtml */
.h-400 { height: 25rem !important; } /* 400px */
.h-500 { height: 31.25rem !important; } /* 500px - DEPRECATED: Use .h-chart instead */
.h-600 { height: 37.5rem !important; } /* 600px */

/* Responsive chart height - uses relative rem units */
.h-chart {
    min-height: 25rem !important;               /* 400px minimum for charts */
    height: auto !important;                     /* Auto instead of 100% to prevent collapse */
    max-height: 60vh !important;                 /* Max 60% of viewport height */
}

/* Responsive adjustments for tablets and mobile */
@media (max-width: 991px) {
    .h-chart {
        min-height: 18.75rem !important;        /* 300px on tablets */
    }
}

@media (max-width: 575px) {
    .h-chart {
        min-height: 15.625rem !important;       /* 250px on mobile */
    }
}

/**
 * Alturas mínimas adicionales en rem.
 * Reemplaza: style="min-height: Xpx;"
 */

.min-h-300 { min-height: 18.75rem !important; } /* 300px - Projects/Edit.cshtml */
.min-h-400 { min-height: 25rem !important; } /* 400px */
.min-h-600 { min-height: 37.5rem !important; } /* 600px */

/* ============================================
   ADDITIONAL MARGINS - Márgenes adicionales
   ============================================ */

/**
 * Márgenes superiores específicos que no están en el sistema de spacing.
 * Reemplaza: style="margin-top: Xpx;"
 */ /* 10px - Projects/Edit.cshtml */ /* 20px */ /* 40px */ /* 50px - Projects/Edit.cshtml */

/**
 * CORRECCIÓN: .mt-60 para margin-top de 60px (no .mt-6)
 * La clase .mt-6 del sistema usa --spacing-24 (1.5rem = 24px), no 60px.
 * Esta clase es específica para 60px.
 */ /* 60px - ProjectCalculator/Index.cshtml */

/**
 * Márgenes izquierdos específicos grandes.
 * Reemplaza: style="margin-left: Xrem;" (valores grandes para indentación)
 */ /* 56px - Indentación de sidebar */ /* 192px - Indentación con sidebar expandido */

/**
 * Márgenes inferiores adicionales (complementan .mb-* del sistema)
 * NOTA: .mb-10 del sistema principal usa --spacing-40 (40px), no 10px.
 * Estas clases son para valores específicos de 10px y 5px.
 */ /* 10px - Production/*.cshtml (3 archivos) */ /* 5px - Production/TodosEmpleados.cshtml */

/* ============================================
   BORDER RADIUS SPECIFIC - Border radius específicos
   ============================================ */

/**
 * Border radius específicos para input groups y componentes personalizados.
 * Reemplaza: style="border-radius: Xrem Y Z W;"
 * Usado en: Projects/Index.cshtml (input groups con botones)
 */

.rounded-start-2rem {
    border-radius: 2rem 0 0 2rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.rounded-end-2rem {
    border-radius: 0 2rem 2rem 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.rounded-2rem {
    border-radius: 2rem !important;
}

.rounded-1-5rem {
    border-radius: 1.5rem !important;
}

/**
 * Border radius muy pequeños (píxeles justificados para bordes decorativos).
 */
.rounded-2px {
    border-radius: 2px !important;
}

.rounded-5px {
    border-radius: 5px !important;
}

/* ============================================
   SCROLL CONTAINERS ADDITIONAL
   ============================================ */

/**
 * .scroll-container-300
 * Contenedor con altura máxima de 300px y scroll vertical.
 * Reemplaza: style="max-height: 300px; overflow-y: auto;"
 * Usado en: Timesheets/Timer.cshtml (línea 177)
 */
.scroll-container-300 {
    max-height: 18.75rem !important; /* 300px */
    overflow-y: auto !important;
}

/**
 * .scroll-container-420
 * Contenedor con altura máxima de 420px y scroll vertical.
 * Reemplaza: style="max-height: 420px; overflow-y: auto;"
 * Usado en: Shared/Projects/_BitacoraProject.cshtml
 */
.scroll-container-420 {
    max-height: 26.25rem !important; /* 420px */
    overflow-y: auto !important;
}

/* ============================================
   AVATAR SIZES ADDITIONAL
   ============================================ */

/**
 * Tamaños de avatar adicionales (complementan .avatar-xl existente).
 * Reemplaza: style="width: Xpx; height: Xpx;"
 * Usado en: Shared/Timesheets/_Timesheets.cshtml, Shared/_LoginPartial.cshtml
 */

.avatar-sm {
    width: 2rem !important; /* 32px - Shared/Timesheets/_Timesheets.cshtml */
    height: 2rem !important;
    border-radius: var(--radius-full) !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
}

.avatar-md {
    width: 3rem !important; /* 48px */
    height: 3rem !important;
    border-radius: var(--radius-full) !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
}

.avatar-lg {
    width: 4rem !important; /* 64px */
    height: 4rem !important;
    border-radius: var(--radius-full) !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
}

/* ============================================
   IMAGE UTILITIES
   ============================================ */

/**
 * .object-cover
 * Hace que la imagen cubra todo el contenedor manteniendo aspect ratio.
 * Reemplaza: style="object-fit: cover;"
 * Usado en: Shared/_LoginPartial.cshtml (avatares)
 */
.object-cover {
    object-fit: cover !important;
}

/**
 * .img-centered
 * Centra una imagen horizontalmente usando márgenes automáticos.
 * Reemplaza: style="display: block; margin-left: auto; margin-right: auto;"
 */
.img-centered {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ============================================
   TYPOGRAPHY UTILITIES ADDITIONAL
   ============================================ */

/**
 * Tamaños de fuente adicionales para elementos que necesitan escalas personalizadas.
 * Reemplaza: style="font-size: Xrem;"
 */ /* 12px */ /* 12.8px - Texto pequeño en tablas (sin token equivalente) */ /* 14.4px - Tamaño base alternativo (sin token equivalente) */ /* 16px - Tamaño estándar de fuente */ /* 17.6px - Texto ligeramente grande (sin token equivalente) */

/**
 * .font-medium
 * Font weight intermedio (500) entre regular (400) y demi-bold (600).
 * Reemplaza: style="font-weight: 500;"
 */
.font-medium {
    font-weight: 500 !important;
}

/* ============================================
   STATUS COLORS - Colores de semáforo
   ============================================ */

/**
 * Sistema de colores para estados tipo semáforo.
 * Usado en: Shared/Projects/_BitacoraProject.cshtml (50+ instancias)
 *
 * Reemplaza estilos inline como:
 * - style="background-color: #4CAF50;" (verde normal)
 * - style="background-color: #FFC107;" (amarillo advertencia)
 * - style="background-color: #F44336;" (rojo crítico)
 * - style="background-color: #6c757d;" (gris N/A)
 */

/**
 * .semaforo-circle
 * Círculo pequeño para indicadores de estado tipo semáforo.
 * Combinar con clases .bg-status-* para el color.
 * Ejemplo: <span class="semaforo-circle bg-status-normal"></span>
 */
.semaforo-circle {
    display: inline-block !important;
    width: 0.75rem !important; /* 12px */
    height: 0.75rem !important;
    border-radius: 50% !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
}

/**
 * Colores de estado para semáforos y badges.
 * Ahora usando design tokens con soporte automático para dark mode.
 */

/* ============================================
   Z-INDEX UTILITIES
   ============================================ */

/**
 * Z-index específicos para capas de UI.
 * Reemplaza: style="z-index: X;"
 *
 * Jerarquía de z-index en la aplicación:
 * - 1050: General notifications/overlays
 * - 1051: High-priority notifications/overlays
 * - 1090: Bootstrap toast notifications (aligned with Bootstrap standard)
 */

.z-1050 {
    z-index: 1050 !important;
}

.z-1051 {
    z-index: 1051 !important;
}

/* Bootstrap-aligned toast notification layer */
.z-toast {
    z-index: 1090 !important;
}

/* ============================================
   RESIZE UTILITIES
   ============================================ */

/**
 * .resize-none
 * Previene el redimensionamiento de elementos como textareas.
 * Reemplaza: style="resize: none;"
 * Usado en: Shared/Projects/_BitacoraProject.cshtml (textareas de solo lectura)
 */
.resize-none {
    resize: none !important;
}

/* ============================================
   FORM SECTION UTILITIES - Bitácora & Forms
   ============================================

   Patrones reutilizables para secciones de formulario con headers estilizados.
   Reemplaza múltiples estilos inline repetidos en _BitacoraProject.cshtml.
   ============================================ */

/**
 * .form-section-header
 * Header de sección con borde inferior decorativo.
 * Reemplaza: style="padding-bottom: 0.5rem; border-bottom: 1px solid #dee2e6;"
 * Usado en: Shared/Projects/_BitacoraProject.cshtml (líneas 442, 539)
 */
.form-section-header {
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid #dee2e6 !important;
}

/**
 * .form-section-title
 * Título de sección con tamaño ligeramente mayor.
 * Reemplaza: style="font-size: 1.1rem;"
 * Usado en: Shared/Projects/_BitacoraProject.cshtml (líneas 443, 540)
 * Nota: 1.1rem (17.6px) no tiene token equivalente en el design system
 */
.form-section-title {
    font-size: 1.1rem !important; /* 17.6px - sin token equivalente */
    margin-bottom: 0 !important;
}

/**
 * .form-section-label
 * Label pequeño para metadatos de sección (ej: "Semana").
 * Reemplaza: style="font-size: 0.8rem;"
 * Usado en: Shared/Projects/_BitacoraProject.cshtml (líneas 445, 542)
 * Nota: 0.8rem (12.8px) no tiene token equivalente en el design system
 */
.form-section-label {
    font-size: 0.8rem !important; /* 12.8px - sin token equivalente */
    color: var(--text-tertiary) !important;
}

/**
 * .form-section-value
 * Valor destacado con peso medio para información de sección.
 * Reemplaza: style="font-size: 0.9rem; font-weight: 500;"
 * Usado en: Shared/Projects/_BitacoraProject.cshtml (líneas 446, 543)
 * Nota: 0.9rem (14.4px) no tiene token equivalente en el design system
 */
.form-section-value {
    font-size: 0.9rem !important; /* 14.4px - sin token equivalente */
    font-weight: 500 !important;
}

/* ============================================
   ICON STATES - Decorative Icons with Opacity
   ============================================ */

/**
 * .icon-empty-state
 * Icono grande con opacidad reducida para estados vacíos.
 * Combina icon-4xl (4rem) con opacity 0.3 para indicadores visuales sutiles.
 * Reemplaza: style="font-size: 4rem; opacity: 0.3;"
 * Usado en: Timesheets/EveryOneTimesheets.cshtml (líneas 147, 338)
 */
.icon-empty-state {
    font-size: var(--font-size-icon-4xl) !important; /* 64px */
    opacity: 0.3 !important;
    line-height: 1 !important;
}

/**
 * .icon-warning-state
 * Icono grande con opacidad media para estados de advertencia.
 * Combina icon-4xl (4rem) con opacity 0.5 para señales de atención.
 * Reemplaza: style="font-size: 4rem; opacity: 0.5;"
 * Usado en: Timesheets/EveryOneTimesheets.cshtml (línea 246)
 */
.icon-warning-state {
    font-size: var(--font-size-icon-4xl) !important; /* 64px */
    opacity: 0.5 !important;
    line-height: 1 !important;
}

/**
 * .icon-empty-md
 * Icono mediano con opacidad reducida para estados vacíos pequeños.
 * Combina icon-3xl (3rem) con opacity 0.3 para indicadores sutiles.
 * Reemplaza: style="font-size: 3rem; opacity: 0.3;"
 * Usado en: Shared/BookRoom/_GetExactHoursOptions.cshtml (línea 135)
 */
.icon-empty-md {
    font-size: var(--font-size-icon-3xl) !important; /* 48px */
    opacity: 0.3 !important;
    line-height: 1 !important;
}

/* ============================================
   BADGE VARIANTS - Status & Category Badges
   ============================================ */

/**
 * .badge-neutral
 * Badge con fondo neutral y texto invertido para estados informativos.
 * Utiliza tokens de diseño para mantener consistencia con el tema.
 * Reemplaza: style="background-color: var(--neutral-500); color: var(--text-primary-invert);"
 * Usado en: Traveling/Index.cshtml (línea 173)
 */
.badge-neutral {
    background-color: var(--neutral-500) !important;
    color: var(--text-primary-invert) !important;
    padding: 0.375rem 0.75rem !important;
    border-radius: var(--radius-sm) !important;
}

/**
 * .badge-turquoise
 * Badge con fondo turquesa y texto primario para estados destacados.
 * Utiliza tokens de diseño para mantener consistencia con el tema.
 * Reemplaza: style="background-color: var(--turquoise-500); color: var(--text-primary);"
 * Usado en: Traveling/Index.cshtml (línea 187)
 */

/* ============================================
   FORM ELEMENT HEIGHTS
   ============================================ */

/**
 * .textarea-md
 * Altura estándar para textareas medianos (100px equivalente).
 * Proporciona espacio adecuado sin ocupar demasiado espacio vertical.
 * Reemplaza: style="height: 100px"
 * Usado en: Inventario/CreateHardware.cshtml, Inventario/EditHardware.cshtml
 */
.textarea-md {
    height: 6.25rem !important; /* 100px */
}

/* ============================================
   LAYOUT UTILITIES - INLINE STYLES REPLACEMENT
   ============================================
   Utilities creadas para eliminar inline styles y usar valores relativos.
   Todas basadas en tokens del design system.
   ============================================ */

/**
 * .min-h-viewport-75
 * Altura mínima del 75% del viewport para contenedores de páginas de bienvenida.
 * Proporciona centrado vertical elegante para contenido principal.
 * Reemplaza: style="height: 75vh"
 * Usado en: Home/Bienvenida.cshtml
 */
.min-h-viewport-75 {
    min-height: 75vh !important;
}

/**
 * .card-welcome
 * Card de bienvenida con ancho máximo responsivo.
 * Usa valores relativos (rem) en lugar de px absolutos.
 * Reemplaza: style="max-width: 450px; width: 100%;"
 * Usado en: Home/Bienvenida.cshtml
 */
.card-welcome {
    max-width: 28.125rem !important; /* 450px ÷ 16 */
    width: 100% !important;
}

/**
 * .avatar-border-accent
 * Border sutil para avatares usando color accent del design system.
 * Reemplaza: style="border: 2px solid rgba(59, 130, 246, 0.2);"
 * Usado en: Shared/_LoginPartial.cshtml
 */
.avatar-border-accent {
    border: var(--border-width-2) solid var(--avatar-border-accent) !important;
}

/**
 * .code-block
 * Estilo para bloques de código en reportes de error.
 * Usa tokens de spacing y radius del design system.
 * Reemplaza: style="background-color:#f9f9f9; padding:10px; border-radius:5px;"
 * Usado en: Shared/Error.cshtml, Home/ReportError.cshtml
 */
.code-block {
    background-color: var(--neutral-200) !important;
    padding: var(--spacing-10) !important; /* 10px → 0.625rem */
    border-radius: var(--radius-sm) !important; /* 4px → 0.25rem */
}

/* Dark mode variant para code-block */
[data-bs-theme="dark"] .code-block {
    background-color: var(--neutral-800) !important;
}

/**
 * .hidden
 * Clase utility para ocultar elementos.
 * Reemplaza: style="display: none;"
 * Usado en: múltiples vistas para JavaScript-controlled visibility
 */
.hidden {
    display: none !important;
}

/**
 * .text-4xl
 * Tamaño de fuente extra grande para iconos decorativos (4rem = 64px).
 * Reemplaza: style="font-size: 4rem;"
 * Usado en: Admin/Roles.cshtml, BookRoom/BookFast.cshtml
 */

/* ============================================
   TABLE COLUMN WIDTHS - RELATIVE VALUES
   ============================================
   Utilities para anchos de columna en tablas.
   Usan porcentajes para mantener proporcionalidad.
   ============================================ */

/**
 * Anchos de columna para tablas de presupuesto
 * Reemplaza: style="width: X%;"
 * Usado en: ProjectBudget/SinPvp.cshtml
 */

/* Live legacy utilities without an equivalent in the bundled Bootstrap build. */
.bg-accent { background-color: var(--bg-accent) !important; }
.bg-error { background-color: var(--bg-error) !important; }
.bg-status-na { background-color: var(--status-na) !important; }
.bg-tertiary { background-color: var(--bg-tertiary) !important; }

.text-accent { color: var(--text-accent) !important; }
.text-blue { color: var(--blue-500) !important; }
.text-error { color: var(--error-red) !important; }
.text-primary-invert { color: var(--text-primary-invert) !important; }
.text-tertiary { color: var(--text-tertiary) !important; }

.col-w-5 { width: 5% !important; }
.col-w-40 { width: 40% !important; }

.mb-5px { margin-bottom: 0.3125rem !important; }
.mb-10px { margin-bottom: 0.625rem !important; }
.mb-6 { margin-bottom: var(--spacing-24) !important; }
.mb-8 { margin-bottom: var(--spacing-32) !important; }
.ml-1 { margin-left: var(--spacing-4) !important; }
.ml-2 { margin-left: var(--spacing-8) !important; }
.ml-6 { margin-left: var(--spacing-24) !important; }
.ml-3-5rem { margin-left: 3.5rem !important; }
.ml-12rem { margin-left: 12rem !important; }
.mr-1 { margin-right: var(--spacing-4) !important; }
.mr-2 { margin-right: var(--spacing-8) !important; }
.mr-3 { margin-right: var(--spacing-12) !important; }
.mt-6 { margin-top: var(--spacing-24) !important; }
.mt-8 { margin-top: var(--spacing-32) !important; }
.mt-16 { margin-top: var(--spacing-64) !important; }
.mt-20 { margin-top: 1.25rem !important; }
.mt-30 { margin-top: 1.875rem !important; }

.p-6 { padding: var(--spacing-24) !important; }
.p-8 { padding: var(--spacing-32) !important; }
.pl-1 { padding-left: var(--spacing-4) !important; }
.pl-4 { padding-left: var(--spacing-16) !important; }
.px-6 { padding-left: var(--spacing-24) !important; padding-right: var(--spacing-24) !important; }
.py-6 { padding-top: var(--spacing-24) !important; padding-bottom: var(--spacing-24) !important; }
.py-8 { padding-top: var(--spacing-32) !important; padding-bottom: var(--spacing-32) !important; }

.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-xl { box-shadow: var(--shadow-xl) !important; }