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

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

.hidden {
    display: none;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animaciones */

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

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

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

.hidden {
    display: none;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =================================================
   SIMPLE GRID SYSTEM (RESPONSIVE)
================================================= */

.app-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.app-col {
    flex: 1 1 0;
    min-width: 280px;
}


/* =================================================
   ANIMACIONES
================================================= */

@keyframes fadeInOut {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -45%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* =================================================
   WIDTH UTILITIES
================================================= */

.w-100 { width: 100%; }
.w-75  { width: 75%; }
.w-50  { width: 50%; }
.w-25  { width: 25%; }

/* Auto */
.w-auto { width: auto; }

@media (max-width: 600px) {
    .w-75,
    .w-50,
    .w-25 {
        width: 100%;
    }
}

/* =================================================
   INLINE GROUP (BUTTON ROW)
================================================= */

.app-inline-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

/* Cuando se usan dentro del grupo */
.app-inline-group > .w-100 { flex: 0 0 100%; }
.app-inline-group > .w-75  { flex: 0 0 calc(75% - 5px); }
.app-inline-group > .w-50  { flex: 0 0 calc(50% - 5px); }
.app-inline-group > .w-25  { flex: 0 0 calc(25% - 5px); }

/* =================================================
   FIELD ROW (INPUT GROUP HORIZONTAL)
================================================= */

.app-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}

.app-field-row > .w-100 { flex: 0 0 100%; }
.app-field-row > .w-75  { flex: 0 0 calc(75% - 5px); }
.app-field-row > .w-50  { flex: 0 0 calc(50% - 5px); }
.app-field-row > .w-25  { flex: 0 0 calc(25% - 5px); }

/* =================================================
   APP GRID SYSTEM
================================================= */

.app-row {
    display: grid;
    gap: 10px; /* separación general del sistema */
}

/* Grid base de 4 columnas */
.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Grid base de 12 columnas (opcional futuro profesional) */
.grid-12 {
    grid-template-columns: repeat(12, 1fr);
}

/* =================================================
   COLUMN SPAN SYSTEM
================================================= */

.span-1  { grid-column: span 1; }
.span-2  { grid-column: span 2; }
.span-3  { grid-column: span 3; }
.span-4  { grid-column: span 4; }

/* Para grid-12 si lo usas */
.span-6  { grid-column: span 6; }
.span-12 { grid-column: span 12; }