/* 
 * CSS Crítico Adicional para prevenir FOUC
 * Este archivo contiene solo clases esenciales para la carga inicial
 * NO afecta los estilos existentes de la aplicación
 */

/* Reseteo mínimo necesario */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Variables CSS críticas */
:root {
  --primary-blue: #0050a0;
  --primary-green: #00936c;
  --background-light: #f1f1f1;
  --text-dark: #2c2c2c;
}

/* Clases de utilidad críticas que deben estar disponibles inmediatamente */
.u-hidden {
  display: none !important;
}
.u-flex {
  display: flex !important;
}
.u-block {
  display: block !important;
}
.u-relative {
  position: relative !important;
}
.u-absolute {
  position: absolute !important;
}
.u-fixed {
  position: fixed !important;
}

.u-w-full {
  width: 100% !important;
}
.u-h-full {
  height: 100% !important;
}
.u-h-screen {
  height: 100vh !important;
}

.u-flex-col {
  flex-direction: column !important;
}
.u-flex-row {
  flex-direction: row !important;
}
.u-items-center {
  align-items: center !important;
}
.u-justify-center {
  justify-content: center !important;
}
.u-justify-between {
  justify-content: space-between !important;
}

.u-text-center {
  text-align: center !important;
}
.u-font-bold {
  font-weight: 700 !important;
}

.u-bg-white {
  background-color: #ffffff !important;
}
.u-bg-gray-100 {
  background-color: #f3f4f6 !important;
}

.u-p-0 {
  padding: 0 !important;
}
.u-p-2 {
  padding: 0.5rem !important;
}
.u-p-4 {
  padding: 1rem !important;
}
.u-px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}
.u-py-2 {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

.u-m-0 {
  margin: 0 !important;
}
.u-m-auto {
  margin: auto !important;
}

.u-rounded {
  border-radius: 0.25rem !important;
}
.u-rounded-lg {
  border-radius: 0.5rem !important;
}

.u-shadow {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
}

.u-transition {
  transition-property:
    color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter !important;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  transition-duration: 150ms !important;
}

.u-opacity-0 {
  opacity: 0 !important;
}
.u-opacity-50 {
  opacity: 0.5 !important;
}
.u-opacity-100 {
  opacity: 1 !important;
}

.u-z-50 {
  z-index: 50 !important;
}

/* Responsive utilities críticas */
@media (min-width: 768px) {
  .u-md-flex {
    display: flex !important;
  }
  .u-md-hidden {
    display: none !important;
  }
  .u-md-block {
    display: block !important;
  }
}

@media (min-width: 1024px) {
  .u-lg-flex {
    display: flex !important;
  }
  .u-lg-hidden {
    display: none !important;
  }
  .u-lg-block {
    display: block !important;
  }
}

/* UNA SOLA TIPOGRAFÍA crítica */
.u-font-sans {
  font-family: "Blanc Regular", sans-serif !important;
}
.u-font-medium {
  font-weight: 500 !important;
}
.u-font-semibold {
  font-weight: 600 !important;
}
.u-font-bold {
  font-weight: 700 !important;
}

/* Estilos específicos para prevenir FOUC en elementos comunes de la app */
.mat-typography {
  font-family: "Blanc Regular", sans-serif !important;
}

/* Asegurar que los contenedores principales mantengan estructura */
app-root {
  display: block;
  min-height: 100vh;
}

/* Prevenir parpadeo en elementos de navegación */
nav,
header,
.navbar {
  transition: all 0.3s ease-in-out;
}

/* Botones y elementos interactivos */
button,
.btn {
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out;
}