/* =============================================
   FIX: Área de reemplazo de borrador en ModalLabel
   AÑADIR AL FINAL DE ModalLabel.css
   ============================================= */

/* =============================================
   1. ÁREA DE REEMPLAZO - MÁS COMPACTA
   ============================================= */
.new-upload-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px !important;
    background: #faf5ff;
    border-radius: 12px !important;
    border: 1px solid #e0d8f0 !important;
    margin-top: 10px !important;
    max-height: 180px; /* Limitar altura para no empujar */
    overflow: hidden;
}

    /* Título "Reemplazar borrador actual:" */
    .new-upload-preview > p:first-child,
    .new-upload-preview > span:first-child,
    .new-upload-preview > div:first-child:not(.preview-actions) {
        font-size: 13px !important;
        font-weight: 600;
        color: #333;
        margin: 0 0 8px 0 !important;
        text-align: center;
    }

    /* Imagen de preview más pequeña */
    .new-upload-preview .preview-image,
    .preview-image {
        max-width: 100px !important;
        max-height: 70px !important;
        object-fit: contain;
        border: 2px solid #4CAF50 !important;
        border-radius: 8px !important;
        padding: 4px !important;
        background: white;
        margin: 5px 0 !important;
    }

/* =============================================
   2. BOTONES - FORZAR HORIZONTAL Y CENTRADO
   ============================================= */
.preview-actions {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 8px !important;
    flex-wrap: nowrap !important; /* NO WRAP - siempre en línea */
    width: 100%;
}

    /* Botón Actualizar (verde/primario) */
    .preview-actions .btn-save-atr-upload,
    .btn-save-atr-upload {
        background: #4CAF50 !important;
        background-image: none !important;
        border: 1px solid #4CAF50 !important;
        color: white !important;
        padding: 8px 24px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        min-width: 100px !important;
        box-shadow: 0 2px 4px rgba(76, 175, 80, 0.3) !important;
    }

        .preview-actions .btn-save-atr-upload:hover:not(:disabled),
        .btn-save-atr-upload:hover:not(:disabled) {
            background: #45a049 !important;
            transform: translateY(-1px);
        }

    /* Botón Cancelar (blanco/secundario) */
    .preview-actions .btn-cancel-upload,
    .btn-cancel-upload {
        background: white !important;
        border: 1px solid #bbb !important;
        color: #666 !important;
        padding: 8px 24px !important;
        border-radius: 20px !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        min-width: 100px !important;
    }

        .preview-actions .btn-cancel-upload:hover,
        .btn-cancel-upload:hover {
            background: #f5f5f5 !important;
            border-color: #999 !important;
            color: #333 !important;
        }

/* =============================================
   3. SECCIÓN DERECHA - SCROLL INTERNO
   ============================================= */
.child_content_info-bottle-label {
    max-height: calc(100vh - 180px);
    overflow-y: auto !important;
    overflow-x: hidden;
}

/* Sección de etiqueta final - siempre visible */
.final-label-section {
    margin-top: 15px !important;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
    flex-shrink: 0; /* No colapsar */
}

/* =============================================
   4. CONTENEDOR DRAFT - COMPACTO
   ============================================= */
.draft-existing-container {
    padding: 12px !important;
    margin: 8px 0 !important;
}

.draft-existing-image {
    max-width: 140px !important;
    max-height: 140px !important;
}

.draft-actions {
    margin-top: 8px !important;
    gap: 6px !important;
}

/* =============================================
   5. RESPONSIVE - MÓVIL
   ============================================= */
@media (max-width: 768px) {
    .new-upload-preview {
        padding: 10px 12px !important;
        max-height: 160px;
    }

        .new-upload-preview .preview-image,
        .preview-image {
            max-width: 80px !important;
            max-height: 55px !important;
        }

    .preview-actions {
        flex-direction: row !important; /* Mantener horizontal en móvil */
        gap: 10px !important;
    }

        .preview-actions .btn-save-atr-upload,
        .preview-actions .btn-cancel-upload,
        .btn-save-atr-upload,
        .btn-cancel-upload {
            padding: 7px 18px !important;
            font-size: 12px !important;
            min-width: 85px !important;
        }

    .child_content_info-bottle-label {
        max-height: none; /* En móvil el scroll es del body */
        overflow: visible;
    }
}

@media (max-width: 480px) {
    .preview-actions {
        gap: 8px !important;
    }

        .preview-actions .btn-save-atr-upload,
        .preview-actions .btn-cancel-upload {
            padding: 6px 14px !important;
            font-size: 11px !important;
            min-width: 75px !important;
        }
}