/* =========================================
       ESTILOS EXCLUSIVOS: FLUJO DE PUBLICACIÓN
       (Hereda colores, inputs y botones de theme.css)
       ========================================= */

    h1 { color: var(--lux-primary); margin-bottom: 10px; text-align: center; }
    .subtitle { text-align: center; color: var(--lux-text-muted); margin-bottom: 30px; border-bottom: 2px solid var(--lux-border); padding-bottom: 20px;}
    
    /* Control dinámico del layout superior (Paso 1) */
    .grid-top { display: grid; gap: 15px; margin-bottom: 5px; transition: all 0.3s ease; }
    .grid-top.single { grid-template-columns: 1fr; }
    .grid-top.dual { grid-template-columns: 1fr 180px; }
    
    .ppu-loading { display: none; color: var(--lux-secondary); font-size: 0.85rem; font-weight: 600; margin-bottom: 15px; text-align: center;}

    /* Revelación Progresiva del Formulario */
    .hidden-step { display: none; opacity: 0; transition: opacity 0.5s ease; }
    .hidden-step.show { display: block; opacity: 1; animation: fadeIn 0.5s forwards; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    /* =======================================================
    ANIMACIÓN DEL LOADER DE COMPRESIÓN DE IMÁGENES
    ======================================================= */
    .custom-spinner {
        width: 40px;
        height: 40px;
        margin: 0 auto; /* Centra la ruedita */
        border: 4px solid rgba(2, 132, 199, 0.1); /* Color de fondo tenue */
        border-left-color: #0284c7; /* El color principal de tu marca (--lux-primary) */
        border-radius: 50%;
        animation: spin 1s linear infinite; /* Hace que gire por siempre */
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    /* =======================================================
    ESTILOS PREMIUM PARA SWEETALERT IA (COMPACTOS Y SOBRIOS)
    ======================================================= */
    .swal-ai-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important; /* Separación sutil */
        margin-top: 1.2em !important;
    }

    /* Botones tamaño normal, sin estirarse como chicle */
    .swal-ai-actions button {
        flex: 0 1 auto !important; /* No se inflan forzosamente */
        width: auto !important;
        min-width: 130px !important; /* Ancho mínimo para mantener simetría base */
        padding: 8px 14px !important; /* Padding normal de un botón clásico */
        font-size: 0.85rem !important; /* Letra un poco más pequeña y elegante */
        border-radius: 5px !important; /* Bordes un poco menos redondeados */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; 
        font-weight: 500 !important; /* Fuente regular, no extra gruesa */
        margin: 0 !important; 
        transition: all 0.2s ease-in-out !important;
    }

    .swal-ai-actions button:hover {
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    }

    /* En celulares, se apilan pero sin verse gigantes */
    @media (max-width: 480px) {
        .swal-ai-actions {
            flex-direction: column !important;
            align-items: center !important;
        }
        .swal-ai-actions button {
            width: 100% !important;
            max-width: 260px !important; /* Evita que el botón ocupe toda la pantalla de lado a lado */
        }
    }  
    @media (max-width: 600px) { 
        .grid-top.dual { grid-template-columns: 1fr; } 
    }


/* Escritorio: Ocultamos botones móviles */
.mobile-actions { 
    display: none !important; 
}

/* Móvil (hasta 768px): Ocultamos caja punteada, mostramos botones */
@media (max-width: 768px) {
    .drop-zone { 
        display: none !important; 
    }
    .mobile-actions { 
        display: block !important; 
        margin-top: 15px; 
        margin-bottom: 25px; 
    }
}