/* ==========================================================================
   SISTEMA DE UTILIDADES IP SANTO TOMÁS - OPTIMIZADO
   ========================================================================== */

:root {
   /* Corporativo IP */
   --ip-darker: #002D4D;
   --ip-dark: #003C66;
   --ip-regular: #00528C;
   --ip-light: #0068B3;
   /* Ratio 8.12:1 - PASS AA */

   /* Corporativo UST */
   --ust-darker: #004F45;
   /* Ratio 9.53:1 - PASS AA */
   --ust-regular: #008272;
   /* Ratio 4.73:1 - PASS AA */

   /* Complementario (Naranjas) */
   --comp-dark: #B35647;
   /* Ratio 4.84:1 - PASS AA */
   --comp-regular: #D96857;

   /* Sistema */
   --text-grey-aa: #767676;
   /* Gris mínimo legal AA */
   --white: #ffffff;
}

/* ==========================================================================
   1. UTILIDADES TAILWIND (Layout, Espaciado y Tipografía)
   ========================================================================== */

/* Layout & Flexbox */
.flex {
   display: flex;
}

.flex-col {
   display: flex;
   flex-direction: column;
}

.flex-wrap {
   flex-wrap: wrap;
}

.justify-between {
   justify-content: space-between;
}

.items-stretch {
   align-items: stretch;
}

.flex-grow {
   flex-grow: 1;
}

/* Dimensiones */
.w-full {
   width: 100%;
}

.h-full {
   height: 100%;
}

/* Espaciado */
.mb-4 {
   margin-bottom: 1rem;
}

.mb-6 {
   margin-bottom: 1.5rem;
}

.mt-auto {
   margin-top: auto;
}

.p-4 {
   padding: 1rem;
}

.pb-2 {
   padding-bottom: .5rem;
}

.pb-4 {
   padding-bottom: 1rem;
}

/* Tipografía Base */
.text-base\! {
   font-size: 1rem !important;
}

.text-xs\! {
   font-size: 0.75rem !important;
}

.font-bold\! {
   font-weight: 700 !important;
}

.underline\! {
   text-decoration: underline !important;
}

.text-white\! {
   color: var(--white) !important;
}

/* Responsive Utilities */
@media (min-width: 768px) {
   .md-w-1-3 {
      width: 33.333333%;
   }
}

[v-cloak] {
   display: none !important;
}

/* Contenedores con Altura Mínima */
.min-h-\[42px\] {
   min-height: 42px;
}

.min-h-\[50px\] {
   min-height: 50px;
}

.min-h-\[100px\] {
   min-height: 100px;
}

.min-h-\[400px\] {
   min-height: 400px;
}


.min-h-\[500px\] {
   min-height: 500px;
}

@media (min-width: 768px) {
   .md\:min-h-\[50px\] {
      min-height: 50px;
   }

   .md\:min-h-\[200px\] {
      min-height: 200px;
   }
}