/* ============================================================
   GLOBAL UTILITIES — CLASES RESPONSIVE REUTILIZABLES
   Sistema de Administración de Condominios
   ============================================================

   Este archivo es el hogar canónico de las clases utilitarias
   responsive. Las mismas clases pueden existir temporalmente
   en global/mobile.css durante la migración (Prioridad 2).

   CONTENIDO
   - Visibilidad: hide/show por breakpoint
   - Estado: .hidden (reemplaza style.display='none')
   - Spacing helpers mobile
   - Stacking helpers

   ============================================================ */

/* ── ESTADO — OCULTAR ELEMENTO (reemplaza style.display='none') ─ */
/*
 * USO: element.classList.add('hidden')
 * Reemplaza el patrón JS: element.style.display = 'none'
 * Migración progresiva — no rompe código JS existente
 */
.hidden {
    display: none !important;
}


/* ── VISIBILIDAD POR BREAKPOINT ─────────────────────────────── */

/* Ocultar en mobile (< 768px) */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Mostrar SOLO en mobile */
@media (max-width: 767px) {
    .show-mobile-block  { display: block !important; }
    .show-mobile-flex   { display: flex !important; }
    .show-mobile-inline { display: inline !important; }
}

@media (min-width: 768px) {
    .show-mobile-block  { display: none !important; }
    .show-mobile-flex   { display: none !important; }
    .show-mobile-inline { display: none !important; }
}

/* Ocultar en tablet (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .hide-tablet { display: none !important; }
}

/* Mostrar SOLO en tablet */
@media (min-width: 768px) and (max-width: 1023px) {
    .show-tablet { display: block !important; }
}
@media (max-width: 767px),
       (min-width: 1024px) {
    .show-tablet { display: none !important; }
}

/* Ocultar en desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .hide-desktop { display: none !important; }
}

/* Ocultar desde tablet hacia arriba */
@media (min-width: 768px) {
    .hide-tablet-up { display: none !important; }
}


/* ── SPACING HELPERS MOBILE ──────────────────────────────────── */
/*
 * Clases utilitarias de spacing para ajustes mobile.
 * Usar cuando el spacing base del componente sea correcto
 * en desktop y solo necesite ajuste en mobile.
 */
@media (max-width: 767px) {
    .mobile-p-0   { padding: 0 !important; }
    .mobile-p-8   { padding: 8px !important; }
    .mobile-p-12  { padding: 12px !important; }
    .mobile-px-8  { padding-left: 8px !important; padding-right: 8px !important; }
    .mobile-px-12 { padding-left: 12px !important; padding-right: 12px !important; }
    .mobile-py-8  { padding-top: 8px !important; padding-bottom: 8px !important; }

    .mobile-gap-0  { gap: 0 !important; }
    .mobile-gap-8  { gap: 8px !important; }
    .mobile-gap-12 { gap: 12px !important; }

    .mobile-full-width { width: 100% !important; }

    /* Apilar elementos flex/grid en columna */
    .mobile-stack {
        flex-direction: column !important;
    }

    /* Apilar y alinear al inicio */
    .mobile-stack-start {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
}


/* ── ANIMACIONES DE FEEDBACK VISUAL ─────────────────────────── */
/*
 * .animate-total-update — feedback visual al actualizarse un total
 *
 * USO (JS):
 *   elementoTotal.classList.add('animate-total-update');
 *   setTimeout(() => elementoTotal.classList.remove('animate-total-update'), 500);
 *
 * Reemplaza el patrón JS anterior:
 *   style.transition = 'all 0.3s ease'
 *   style.transform  = 'scale(1.1)'
 *   style.color      = '#28a745'
 *   setTimeout → style.transform = 'scale(1)'; style.color = '#667eea'
 *
 * Migrado en: js/modules/facturacion.js
 */
@keyframes totalUpdatePulse {
    0%   { transform: scale(1);   color: inherit; }
    40%  { transform: scale(1.1); color: #28a745; }
    100% { transform: scale(1);   color: #667eea; }
}

.animate-total-update {
    animation: totalUpdatePulse 0.5s ease forwards;
}