/* === Utilidades de layout/espaciado rápidas === */
.flex {
    display: flex;
}

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

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

.gap-8 {
    gap: 8px;
}

.gap-12 {
    gap: 12px;
}

.gap-16 {
    gap: 16px;
}

.mt-16 {
    margin-top: 16px;
}

.mb-16 {
    margin-bottom: 16px;
}

.w-100 {
    width: 100%;
}

.maxw-1200 {
    max-width: 1200px;
    margin: 0 auto;
}

/* Safe padding de área principal */
.main-content {
    padding: var(--sp-5);
}

@media (max-width: 768px) {
    .main-content {
        padding: var(--sp-4);
    }
}

/* Contenedor de página */
.container-page {
    padding-top: var(--sp-3);
}

/* Texto utilidades */
.text-right {
    text-align: right;
}

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

.text-muted {
    color: var(--color-text-2);
}

/* Truncado */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid helpers */
.grid {
    display: grid;
    gap: var(--sp-3);
}

.grid-2 {
    grid-template-columns: repeat(2,1fr);
    gap: var(--sp-4);
}

.grid-3 {
    grid-template-columns: repeat(3,1fr);
    gap: var(--sp-4);
}

@media (max-width: 900px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }
}

/* Elevaciones rápidas */
.elev-0 {
    background: var(--surface-0);
}

.elev-1 {
    background: var(--surface-1);
}

/* Espaciados verticales */
.stack > * + * {
    margin-top: var(--sp-3);
}